Tuesday, 22 October 2013

JQuery : How to show GridView in popup window in ASP.NET

Hi friends, in this article I will explain about  JQuery : How to show GridView in popup window in ASP.NET.

In ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery : How to show GridView in popup window in ASP.NET </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $("#btnShowPopUp").live("click", function () {
        $("#popup").dialog({
            title: "Displaying GridView Data",
            width:600,
            buttons: {
//            if you want close button use below code
//                Close: function () {
//                    $(this).dialog('close');
//                }
            }
        });
        return false;
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="popup" style ="display:none">
  <asp:GridView runat ="server" ID="grd" AutoGenerateColumns ="false"
            style="margin-bottom: 35px" Width="550px" >
    <Columns>
    <asp:TemplateField HeaderText ="ID">
    <ItemTemplate>
    <asp:Label ID="lblId" Text='<%#Eval("id") %>' runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
     <asp:TemplateField HeaderText ="First Name">
    <ItemTemplate>
    <asp:Label ID="lblFname" Text='<%#Eval("FirstName") %>' runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
     <asp:TemplateField HeaderText ="Last Name">
    <ItemTemplate>
    <asp:Label ID="lblLname" Text='<%#Eval("LastName") %>' runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
     <asp:TemplateField HeaderText ="Address">
    <ItemTemplate>
    <asp:Label ID="lblAddr" Text='<%#Eval("Address") %>' runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </div>         
    <asp:Button ID="btnShowPopUp"  runat="server" Text ="Show GridView Data in Popup" />
    </form>
</body>
</html>
For Code behind click here .
The output of the above code as shown in the below figure.

No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.