CODEWITHSUNDEEP
asp.netjquery-uigridviewimagebutton
aleafonso
aleafonso

Reputation: 2256

How to open a jQuery dialog from an ImageButton inside a GridView?

How can I get the ImageButton ID so that I can use it to open the jquery dialog?

By hard-typing the ImageButton ID, it works as expected. i.e:

$('#ContentPlaceHolder1_GridView1_linkPasswordEdit_0').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

However, I want to do this with all the ImageButton in the GridView and not only the first one. I have tried various ways like:

$('#ContentPlaceHolder1_GridView1_' + '<%# linkPasswordEdit.ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

Or:

$('#' + '<%# ContentPlaceHolder1.GridView1.((GridViewRow)Container).FindControl("linkPasswordEdit").ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

This is what the ImageButton looks like:

<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>

Any help would be greatly appreciated.

Upvotes: 1

Views: 3757

Answers (1)

swannee
swannee

Reputation: 3466

Why not just assign a custom CSS class (used for nothing but finding the image buttons) to the imagebutton and use the JQuery class selector to make the association.

$('.imageButtonFinderClass').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});


<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand" CssClass="imageButtonFinderClass"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>

Upvotes: 4

Related Questions