how to use gridview and jquery dialog for master details in asp.net

how to use gridview and jquery dialog for master details in asp.net 

This example explains  How to do Master Details relationship with asp.net GridView and Jquery UI dialogbox.

i.e when user click on Supplier ID of Products then in the Dialogbox Supplier Details will be displayed.

1) Create Web Page

2)  add 2 GridView controls

3) Add 2 SQL DATA SOURCE controls.

4)SQL Data Source1   bound to  Products from Northwind Database

This will bound to GridView1.

Whenever user clicks on SupplierID  a Popup Dialog box(JQUERY Dialog box) will be displayed with the details of that supplier.,

Here is the template.

    <asp:GridView ID="GridView1"

     runat="server" AllowPaging="True" 

     AllowSorting="True" 

     AutoGenerateColumns="False" 

     DataKeyNames="ProductID" 

     DataSourceID="SqlDataSource1">

        <Columns>

            <asp:CommandField ShowSelectButton="True" />

            <asp:BoundField DataField="ProductID" HeaderText="ProductID" 

                InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />

            <asp:BoundField DataField="ProductName" HeaderText="ProductName" 

                SortExpression="ProductName" />

            <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" 

                SortExpression="SupplierID" />

                <asp:TemplateField HeaderText="Supplier ID">

                <ItemTemplate>

                <asp:LinkButton Text='<%# Eval("SupplierID") %>' runat="server" OnClick="SupplierID_Click"></asp:LinkButton>

                </ItemTemplate>

                </asp:TemplateField>

            <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" 

                SortExpression="CategoryID" />

            <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" 

                SortExpression="QuantityPerUnit" />

            <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 

                SortExpression="UnitPrice" />

            <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" 

                SortExpression="UnitsInStock" />

            <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" 

                SortExpression="UnitsOnOrder" />

            <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" 

                SortExpression="ReorderLevel" />

            <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" 

                SortExpression="Discontinued" />

        </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

            ConnectionString="<%$ ConnectionStrings:northwindConnectionString %>" 

            SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>

Step 5)  Add  a div tag for Supplier Details

in that add GirdView 2 and SQLDataSource

 

Initially this will be hidden , whenever user clicks on supplierID, Supplier Details will be displayed in JQUERY Dialogbox.

 

            <div id="details" style="display:none;" runat="server">

        <asp:GridView ID="GridView2" runat="server">

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 

            ConnectionString="<%$ ConnectionStrings:northwindConnectionString %>" 

            ></asp:SqlDataSource>

            </div>

Step 6) Add  JQuery  Dialog box code in the Head Section

    <script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#details").dialog(

            {

                autopen: false, width: "auto", show: "blind", hide: "explode", modal: true, height: "auto"

            }

            );

         

        });

    </script>

Step 7)  Add Event Handler for Supplier Link Button

        protected void SupplierID_Click(object sender, EventArgs e)

        {

            LinkButton id = sender as LinkButton;

            //Dynamically get supplier ID and query the suppliers table.

            SqlDataSource2.SelectCommand = "select * from suppliers where supplierid=" + id.Text;

            SqlDataSource2.DataBind();

            GridView2.DataSource = SqlDataSource2;

            GridView2.DataBind();

        }

Step 8) Run the Web Page Here is the output