CODEWITHSUNDEEP
jqueryasp.net
P.Brian.Mackey
P.Brian.Mackey

Reputation: 44285

jQuery & ASP.NET - Bind $.click() to gridview.Template control

I have a Gridview with a template for this Hyperlink:

        <asp:TemplateField HeaderText="Notes" ItemStyle-CssClass="NoMargin NoPadding" SortExpression="lineNotes">
            <ItemTemplate>
                <asp:HyperLink id="notesHl" runat="server" text='<%# Bind("lineNotes") %>' Font-Underline="true" Font-Bold="true"></asp:HyperLink>
            </ItemTemplate>
            <ItemStyle Font-Size="Smaller" Height="10px" Width="10px" Wrap="True" />
        </asp:TemplateField>

Then jQuery that creates a Modal dialogue called by Popup();

    $(document).ready(function () {
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function () {
            $("#divLineItemComments").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
            width: 900,
            height: 500
            });
        });

        $("#_ctl0_ContentPlaceHolder1_cwgPhysical__ctl3_notesHl").click(function () {
            $("#divLineItemComments").dialog("open");
            return false;
        });
    });

    function Popup() {
        $("#divLineItemComments").dialog("open");
        return false;                       
    }

For testing, I hard coded the generated name of the first link in the gridview:

_ctl0_ContentPlaceHolder1_cwgPhysical__ctl3_notesHl

Because ASP.NET generates the id's dynamically, I need to dynamically bind the click event of the hyperlinks. So that it works with the naming used by ASP.NET. I could hardcode up to XX generated names (and hope they always generate the same names). This seems to be a terrible solution...

How can I get the jQuery to bind my Clicks to my Hyperlinks?

Hooking into the rowbound may work, but I don't know how to bind jQuery here

protected void cwgPhysical_RowDataBound(object sender, GridViewRowEventArgs e)
{
  Hyperlink.NavigateUrl = "javascript:Popup();";//this might work somehow...
}

Upvotes: 1

Views: 1744

Answers (1)

Tejs
Tejs

Reputation: 41256

You can actually solve this with a rather low-tech solution: simply make a dummy cssClass and apply it to all your hyperlinks generated. Then you have a really simple selector:

$('.myDummyCssClass').click(...);

Upvotes: 1

Related Questions