• Download NestedGridView - 404.17 KB

Introduction

 

And in Selecting Expand you will see like that,-

 

Here emp_address is in 2nd Gridview.

In our practical programming senario, There are lots of situation is come where we have to show a grid inside another grid. But we can get proper help of that because of proper support or sample. My intention is to give a clear, brief and easy Idea of how to implement Nested Gridview or Gridview inside another gridview. Lots of people try to implement that but fails to implement properly.

How to Use

1) Firstly Place a gridview in your solution.
2) Inside Itemtemplate place your 2nd gridview.
3) Place a button for Expand inside a itemtemplate.
4) In gridview rowdatabound write the code to bind the 2nd gridview.

Background

The basic idea behind this article is to describe the use of Nested Gridview. There are no proper Sample of Nested Gridview.
This codes can be applicable to every Visual studio Compiler.

Using the code

GridView control retrieved from the SQL database table that can used to uniquely identify the record. 

In Source you have to work like that,-
 

			<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" 
        onrowcancelingedit="GridView1_RowCancelingEdit" 
        onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing" 
        onrowupdating="GridView1_RowUpdating" OnRowCommand="GridView1_RowCommand">
        <Columns>
        <asp:TemplateField HeaderText="Name">
        <ItemTemplate>
         <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
         <%--<asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex%>'></asp:Label>--%>
        </ItemTemplate>
        </asp:TemplateField>
         <asp:TemplateField HeaderText="A">
        <ItemTemplate>
           <asp:Button ID="btnShow" runat="server" Text="Expand" CommandName="Show" CommandArgument='<%# Container.DataItemIndex%>' />
        </ItemTemplate>
        </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lbl" runat="server" Text='<%#Eval("emp_name") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txt" runat="server" Text='<%#Eval("emp_name") %>'></asp:TextBox>
            </EditItemTemplate>
            </asp:TemplateField>
            
            <asp:TemplateField>
            <ItemTemplate>
              
                
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
        AutoGenerateDeleteButton="False" AutoGenerateEditButton="False" >
        <Columns>
         <asp:BoundField DataField="emp_address" HeaderText="emp_address" SortExpression="emp_address">
                            <ItemStyle Width="20%" />
                        </asp:BoundField>
         </Columns>
    
    </asp:GridView>

In my example I have done the whole things from one table. In my example the database table is look like that,-

 

In code behind I have done things with RowCommand event.

The sample code is like,-

 

 if (e.CommandName == "Show")
        {
            int RowIndex = Convert.ToInt32((e.CommandArgument).ToString());
            Button btn = (Button)GridView1.Rows[RowIndex].FindControl("btnShow");
           // Label lblID = (Label)GridView1.Rows[RowIndex - 1].FindControl("Label1");
           // int row = Convert.ToInt32(lblID.Text);
            if (btn.Text == "Expand")
            {

                //  Label lblID = (Label)gvDiscMaster.Rows[RowIndex].FindControl("lblID");
                GridView gv = (GridView)GridView1.Rows[RowIndex ].FindControl("GridView2");

                long id = long.Parse(((Label)GridView1.Rows[RowIndex].FindControl("lblID")).Text);
                DataSet ds1 = new DataSet();
                ds1 = query.selectwithId(id);
                gv.DataSource = ds1;
                gv.DataBind();
                btn.Text = "Collapse";
            }
            else if (btn.Text == "Collapse")
            {
                GridView gv = (GridView)GridView1.Rows[RowIndex].FindControl("GridView2");

                long id = long.Parse(e.CommandArgument.ToString());
                //DataSet ds1 = new DataSet();
               // ds1 = query.selectwithId(id);
                gv.DataSource = null;
                gv.DataBind();
                btn.Text = "Expand";
            }

        }

Points of Interest  

The basic idea behind this article is to describe the use of Nested Gridview. There are no proper Sample of Nested Gridview.

History

2nd May, 2011 - 1st Publish.