How to call jquery dialog on gridview button click?

Question

I am using jquerydialog.I have a gridview and an edit button in it.I want to call the jquery dialog on gridview edit buttons click event and .How can i achieve this?JqueryDialog is working properly on a button click event when is placed outside the gridview

Here the javascript

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script type="text/javascript"> 
   $(function() {    
        $("#dialog-form").dialog({
            autoOpen:false,
            show:{
                effect:"blind",
                duration:1000                
            },
            hide:{
                effect:"explode",
                duration:1000
            },
            height:500,
            width:550,
            modal:true              
        });            
   });
   $("input[id$=btnAdd]").live("click",function(){                
            $("#dialog-form").dialog("open");
        });
 </script>

Heres the gridview i have used

<asp:GridView ID="gdProgram" runat="server" CssClass="ui-widget ui-widget-contain" AutoGenerateColumns="False" Width="700px"
HeaderStyle-CssClass="ui-widget-header">
    <Columns>
        <asp:TemplateField HeaderText="SlNo">
            <ItemTemplate >
                <asp:Label ID="Label1" runat="server" Text='<%# "Test1" %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
             <ItemTemplate>
                <asp:Label ID="lbl2" runat="server" Text='<%# "Test2" %>'></asp:Label>
            </ItemTemplate>           
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="lbl3" runat="server" Text='<%# "Test3" %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <input type="button" id="btnEdit" runat="server" value="Edit" /> 
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>     
</asp:GridView>

score 1 · Accepted Answer · answered Mar 11 '13 at 11:18

change it to like this.

 <asp:TemplateField>
   <ItemTemplate>
             <input type="button" id="btnEdit" runat="server" value="Edit" onclick="showDialog(this);" /> 
            </ItemTemplate>
        </asp:TemplateField>

in JS

function ShowDialog(currObj)
{
   // do some thing with currObj data
  $("#dialog-form").dialog({
            autoOpen:false,
            show:{
                effect:"blind",
                duration:1000                
            },
            hide:{
                effect:"explode",
                duration:1000
            },
            height:500,
            width:550,
            modal:true              
        });      
  return false;
}

Thank you very much.I initially tried much of the above methods and finally struck gold. — Kannan, Mar 12 '13 at 03:44

writeToBhuwan · Answer 2 · 2013-03-11T11:45:00.297

1

This should work perfectly....!

$(document).ready(function(){
    $('#<%=gdProgram.ClientID%> :button').click(function(){
           $("#dialog-form").dialog("open");
    });
});

Just in case it does not work.. It means that you have some other jquery on master page which is conflicting with this code. You just need to use jQuery.noConflict for that.

 var j=jQuery.noConflict();
    j(document).ready(function(){
        j('#<%=gdProgram.ClientID%> :button').click(function(){
               j("#dialog-form").dialog("open");
        });
    });

edited Mar 11 '13 at 11:45

answered Mar 11 '13 at 11:39

writeToBhuwan

3,233
11
39
67

You can specifiy button ID directly by using Jquery, $(document).ready(function () { $('[id$="btnEdit"]').click(function () { $("#dialog").dialog("open"); }); }); – Magesh Dec 23 '13 at 17:57

score 0 · Answer 3 · edited May 23 '17 at 11:44

Using the same concept from Tejs answer you may try the following:

Change the gridview button to:

<ItemTemplate>
    <asp:Button ID="btnEdit" runat="server" Text="Edit" />
</ItemTemplate>

And your JS call:

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#<%= btnEdit.ClientID %>').click(function(e) 
         { 
             $("#dialog-form").dialog("open");

             if(/*Some Condition Is Not Met*/) 
                return false;
         });
     });
</script>

score 0 · Answer 4 · answered Jul 15 '13 at 07:32

Try using class instead of Id as a selector when selecting the input type button inside the gridview.

    <ItemTemplate>
      <input type="button" id="btnEdit" class="btnClass" runat="server" value="Edit" /> 
    </ItemTemplate>

    <script type="text/javascript" language="javascript">
         $(document).ready(function()
         {
            $('.btnClass').unbind("click");
            $('.btnClass').bind("click", function() {

                 $("#dialog-form").dialog("open");

                 if(/*Some Condition Is Not Met*/) 
                 return false;
            });
         });
    </script>

How to call jquery dialog on gridview button click?

4 Answers4