I am using a Grid View in asp.net, i want to get Element on clicking a grid, how can i do so?
A grid has a column id, name, warp, weft, etc, i want to pick the selected cell data using Javascript, let me know.
Please help...
Regards
Atif
To track which row button is clicked, you have to set the row Index as a parameter to a JS function like...
protected void grdForecast_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType ==DataControlRowType.DataRow )
{
((Button)e.Row.FindControl("buttonId")).Attributes.Add("onclick", "javascript:update(" + (e.Row.RowIndex ) + ");");
}
}
And then in JavaScript:
<script language="javascript" type="text/javascript">
function update(ri) {
var grd = document.getElementById('<%= GridView1.ClientID %>');
SecondCellValue = grd.rows[ri].cells[1].childNodes[0].value
ThirdCellValue = grd.rows[ri].cells[2].childNodes[0].value
}
</script>
Do you have a control inside the cell that you can reference? If not, then you can create a hidden control. Then you can write out the control's client id to the client side in the PreRender event handler via ScriptManager. And you can then get a hold of that element by id and find other content inside that parent cell.
Alternatively, you can use jquery to handle cell click events...
$('#myTable td').click(function () {
alert($(this).html());
});
Related
I have CheckListBox inside a GridView. I need an alert when the checkbox gets clicked. It is currently done on the Gridview.RowDataBound() event, so it happens only one time in if it is not postback. How do I make the alert to work every time when the page loads.
You can do it using jquery like below:
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "input:checkbox", function () {
alert(this.checked);
});
});
</script>
</head>
Make sure you're doing something like this in your RowDataBound event.
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var cbListSource = getDataSource(); // get the data source values for the checkboxlist to bind to
CheckBoxList cblItems = (CheckBoxList)e.Row.FindControl("cblItems");
cblItems.DataSource = cbListSource;
cblItems.DataTextField = "QuestionName";
cblItems.DataValueField = "QuestionId";
cblItems.DataBind();
cblItems.Attributes.Add("onclick", "alert('Your alert text goes in here')");
}
}
Alternatively you can use javascript or jquery to achieve the same result.
As I found on Internet that there is a bug from MS when we add a RadioButton inside repeater for selecting just one.
But I found this code here that solved my problem. (only one radiobutton selection in repeater)
$(function () {
$('[name$="$YourGroupName"]').attr("name", $('[name$="$YourGroupName"]').attr("name"));
$('[name$="$YourGroupName"]').click(function () {
//set name for all to name of clicked
$('[name$="$YourGroupName"]').attr("name", $(this).attr("name"));
});
});
But it only works when the radiobutton is not set to autopostback. But I need to do a postback when I select a radiobutton and a response to the database. But.... anytime that I do a click on a radiobutton with postback, always the first in the list is selected and the ItemDataBound it's not working because of the jquery function which it's renaming all the radiobuttons with the same name.
Suggestions?
Try to add this script instead of the one you're using at the end of the page after the repeater :
<script>
var radios = $("input:radio");
radios.click(function () {
radios.removeAttr('checked');
$(this).prop("checked", true);
//$(this).attr('checked', 'checked'); // jQuery < 1.6
return true;
});
</script>
This will allow the AutoPostBack of your radiobutton to work again.
I have converted some text to hyperlinks in gridview.
if (e.Row.Cells[3].Text == Session["uname"].ToString())
{
e.Row.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFFFCC");
e.Row.Cells[1].Text = "<a href='Service.aspx'>"+e.Row.Cells[1].Text+"</a>";
}
I want to get the text from the hyperlinks when clicked and store in the session variable.
Can anyone help me doing this?
Thanks in advance.
One easy trick is to add it as parameter to you link and when you call that service.aspx page to save it on your session.
For example:
String.Format("<a href='Service.aspx?TextLink={1}'>{0}</a>"
, e.Row.Cells[1].Text
, Server.UrlEncode(e.Row.Cells[1].Text)
);
Now on the service.aspx on Page_Load you add
if(!String.IsNullOrEmpty(Request.QueryString["TextLink"]))
session["hyp"] = Request.QueryString["TextLink"];
One other way is to capture with javascript the link and do the same with ajax.
Hey If you want to do from Server side code then you have to change "" to Server Linkbutton control then only you can get link code on Grid Row Command event . Please refer this code to get link value.
protected void gvNewJoineeDetails_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (!e.CommandSource.GetType().Name.Contains("GridView"))
{
GridViewRow row1 = (GridViewRow)(((LinkButton)e.CommandSource).NamingContainer);
LinkButton lnkCust1 = (LinkButton)row1.FindControl("gvlnkBtnNewJoineeDetails");
}
}
Or if you do not change your logic means you do not take link button instead of 'a' then you can get value it on client side by Jquery and set to hidden field and access in server side or make ajax call to send value in server side.
For Client Side get value use Jquery. please refer this code.
$("a").live("click", function (e) {
var getvalue = $(this).text();
});
Untill now, I've been using 2 controls (FileUpload and additional button).
After file was chosen in a fileUpload control, user had to accept his choice by pressing save button.
Here's button's code:
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("~/file.jpg"));
Label1.Text = Server.MapPath("~/file.jpg");
Image1.ImageUrl = "file.jpg";
}
}
I'm wondering whether there is a way to avoid using that button, so the FileUpload control's button would do the additional button's job.
The FileUpload control renders an <input type="file> in the browser. You can use the javascript change event to trigger the upload.
First make sure you have a load event handler registered in the body of your page:
<body onload="body_onload()">
And add this code inside your event handler:
<script type="text/javascript">
function body_onload()
{
...
$get('<%=FileUpload.ClientID%>').onchange = function() {
$get('<%=this.Page.Form.ClientID%>').submit();
};
}
</script>
Or to do this using pure jQuery, place this in the head of your page (if you don't already have jQuery included):
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Then use this code to bind to the event (replace #fileUpload1 and #form1 with the id's of your FileUpload and Form elements, respectively):
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload1").change(function() {
$("#form1").submit();
});
});
</script>
This is a follow up to my previous question:
link text
In gridview's column i have a linkbutton and a label under it.
I want to hide/unhide label when linkbutton is clicked. I use javascript because i don't want any postbacks.
The code:
protected void gvwComments_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lButton = ((LinkButton)e.Row.Cells[2].FindControl("lbtnExpand"));
Label label = ((Label)e.Row.Cells[2].FindControl("lblBody"));
lButton.Attributes.Add("onclick", string.Format("HideLabel('{0}'); return false;", label.ClientID));
}
}
function HideLabel(button) {
var rowObj = document.getElementById(button);
if (rowObj.style.display == "none") {
rowObj.style.display = "block";
}
else {
rowObj.style.display = "none";
}
}
The problem is that when I unhide the label by clicking on button, linkbutton is shifted a a bit upper it's original position in the cell.
Is it possible to preserve linkbutton's position in the gridviews cell?
I would suggest you change your CSS from display:none to display:hidden which will hide the control but maintain the space preventing the jumping around.
The trick is to use the keyword "this" and then get a reference to the row and change the label from there.
I have a post here, where I have a GridView with a CheckBox column and a Name column. When the CheckBox is checked the background color of the Name on that row changes. I do this starting with this attribute in the CheckBox's column:
onclick="toggleSelected(this)"
then I have a JavaScript function that finds the row and changes the next cell:
function toggleSelected(sender) {
// note that at this point the "this" is now "sender" -which is the checkbox
// get a reference to the row using the helper function - see below.
var row = GetParentElementByTagName(sender, "TR");
if (sender.checked)
row.cells[1].className = "selected";
else
row.cells[1].className = '';
}
This uses the helper function:
function GetParentElementByTagName(element, tagName) {
var element = element;
while (element.tagName != tagName)
element = element.parentNode;
return element;
}
You have a slightly different requirment so you would use something like:
var lbl = row.cells[1].childNodes[0].getElementsByTagName('label')
to get a reference to your label.