I have a gridview where, when the user clicks the row, a modal form is shown and values are passed back to the calling function. This works just fine. However, now I have the requirement that instead of clicking the entire row, they want to just click a
link button on the row (not the entire row) and get this same functionality. I am new to JQuery and cannot figure out how to select the link button inside the gridview in order to attach my function to it. Also, once I have that figured out, how do I get values
from the Link Button's row to pass to my modal form? Here is my jquery function which works fine for the row-click:
$(document).ready(function() {
// set the background color of selected gridview row
$("#<%=gridResults.ClientID%> tr").click(function() {
$(this).css("background-color", "PowderBlue");
var cells = $(this).find('td');
//alert(cells[3].innerHTML);
var annid = cells[3].innerHTML;
var rc = window.showModalDialog('ModalSearch.aspx?annid=' + annid, '', 'unadorned:yes;resizable:1; dialogHeight:550px;dialogwidth:985px;scroll:no');
I think both of the above will work; however, I did some experimenting and found out that no matter which way I try to create a selector to select the grid, the row, or the cell, I cannot get my selector to work because the grid is inside an update panel.
When I remove the update panel, I can get the selectors to work many different ways. I need to have the grid inside the update panel...does anyone know why my selectors won't work inside of the update panel?
electrawoman
Member
164 Points
135 Posts
attach event to gridview linkbutton, not entire row click
Feb 10, 2011 02:48 PM|LINK
Hello,
I have a gridview where, when the user clicks the row, a modal form is shown and values are passed back to the calling function. This works just fine. However, now I have the requirement that instead of clicking the entire row, they want to just click a link button on the row (not the entire row) and get this same functionality. I am new to JQuery and cannot figure out how to select the link button inside the gridview in order to attach my function to it. Also, once I have that figured out, how do I get values from the Link Button's row to pass to my modal form? Here is my jquery function which works fine for the row-click:
$(document).ready(function() {
// set the background color of selected gridview row
$("#<%=gridResults.ClientID%> tr").click(function() {
$(this).css("background-color", "PowderBlue");
var cells = $(this).find('td');
//alert(cells[3].innerHTML);
var annid = cells[3].innerHTML;
var rc = window.showModalDialog('ModalSearch.aspx?annid=' + annid, '', 'unadorned:yes;resizable:1; dialogHeight:550px;dialogwidth:985px;scroll:no');
//alert(rc.fn + ' ' + rc.ln);
//document.getElementById('<%=Label1.ClientID%>').value = rc.fn;
//document.getElementById('<%=Label2.ClientID%>').value = rc.ln;
if (!(rc == null)) {
$("#<%=Label1.ClientID%>").html(rc.status);
$("#<%=Label2.ClientID%>").html(rc.selPol);
}
$(this).css("background-color", "white")
});
});
I would like to add a field like this to my gridview and attach the above functin to it:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkCallModal" runat="server" CausesValidation="False" CommandName="linkPol"
Text="Modal Search" >
</asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="10px" />
</asp:TemplateField>
thanks for any help on this!
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: attach event to gridview linkbutton, not entire row click
Feb 10, 2011 03:23 PM|LINK
Hi,
You need to go like this:
$("#<%=gridResults.ClientID%>").find('tr').find('td:eq(3)').click(function() { $(this).css("background-color", "PowderBlue"); var annid = this.innerHTML; var rc = window.showModalDialog('ModalSearch.aspx?annid=' + annid, '', 'unadorned:yes;resizable:1; dialogHeight:550px;dialogwidth:985px;scroll:no'); ............ .......... .......asteranup
All-Star
30184 Points
4906 Posts
Re: attach event to gridview linkbutton, not entire row click
Feb 11, 2011 04:20 AM|LINK
Hi,
See the below code-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".modelOpener").click(function() { $(this).closest("table").find("tr").css("background-color",""); var row = $(this).closest("tr"); row.css("background-color", "PowderBlue"); var annid = row.find("td:eq(0)").html(); alert(annid); //other code goes here return false; }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" > <Columns> <asp:TemplateField HeaderText="Ministry"> <ItemTemplate> <%#Eval("annID")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Title"> <ItemTemplate> <%#Eval("Title")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Criteria"> <ItemTemplate> <%#Eval("Criteria")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False" CssClass="modelOpener" ImageUrl="~/images/DELETE.GIF" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
electrawoman
Member
164 Points
135 Posts
Re: attach event to gridview linkbutton, not entire row click
Feb 12, 2011 07:24 PM|LINK
I think both of the above will work; however, I did some experimenting and found out that no matter which way I try to create a selector to select the grid, the row, or the cell, I cannot get my selector to work because the grid is inside an update panel. When I remove the update panel, I can get the selectors to work many different ways. I need to have the grid inside the update panel...does anyone know why my selectors won't work inside of the update panel?
asteranup
All-Star
30184 Points
4906 Posts
Re: attach event to gridview linkbutton, not entire row click
Feb 14, 2011 04:07 AM|LINK
Hi,
Find the code below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript"> function loadSelector() { $(document).ready(function() { $(".modelOpener").click(function() { $(this).closest("table").find("tr").css("background-color", ""); var row = $(this).closest("tr"); row.css("background-color", "PowderBlue"); var annid = row.find("td:eq(0)").html(); alert(annid); //other code goes here return false; }); }); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="up" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Ministry"> <ItemTemplate> <%#Eval("annID")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Title"> <ItemTemplate> <%#Eval("Title")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Criteria"> <ItemTemplate> <%#Eval("Criteria")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False" CssClass="modelOpener" ImageUrl="~/images/DELETE.GIF" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>Code-
protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { var obj = new { annID = "annID 0", Title = "Title 0", Criteria = "Criteria 0" }; var objList = (new[] { obj }).ToList(); objList.Add(new { annID = "Minis try 1", Title = "Title 1", Criteria = "Criteria 1" }); objList.Add(new { annID = "Mi nis try sfd 2", Title = "Title 2", Criteria = "Criteria 2" }); objList.Add(new { annID = "Minis try fdsf sdf 3", Title = "Title 3", Criteria = "Criteria 3" }); objList.Add(new { annID = "Mini stryd dd 4", Title = "Title 4", Criteria = "Criteria 4" }); objList.Add(new { annID = "Min is tryf 5", Title = "Title 5", Criteria = "Criteria 5" }); objList.Add(new { annID = "Mini stry 6", Title = "Title 6", Criteria = "Criteria 6" }); GridView1.DataSource = objList; GridView1.DataBind(); ScriptManager.RegisterStartupScript(Page, typeof(Page), "script", "loadSelector()", true); }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog