attach event to gridview linkbutton, not entire row click : The Official Microsoft ASP.NET Forums

Reply

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!

Reply

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');
                 ............
                 ..........
                 .......

Raghav|My Articles|My Blog

Edited by raghav_khunger on Feb 10, 2011 03:24 PM

Reply

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>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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?

Reply

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);
    }

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by BU XI - MSFT on Feb 16, 2011 06:35 AM

attach event to gridview linkbutton, not entire row click RSS

4 replies

electrawoman

attach event to gridview linkbutton, not entire row click

raghav_khung...

Re: attach event to gridview linkbutton, not entire row click

asteranup

Re: attach event to gridview linkbutton, not entire row click

electrawoman

Re: attach event to gridview linkbutton, not entire row click

asteranup

Re: attach event to gridview linkbutton, not entire row click

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft