Click here to Skip to main content
15,867,488 members
Articles / Web Development / ASP.NET

Gridview inside Gridview in ASP.NET C#

Rate me:
Please Sign up or sign in to vote.
4.78/5 (19 votes)
9 Jun 2011CPOL1 min read 193.5K   8.4K   42   19
Gridview inside Gridview in ASP.NET C# or Nested Gridview and Update, Delete from Gridview

Introduction

There are lots of situations that come up where we have to show a grid inside another grid, like:

nestedGV1.JPG

And in selecting Expand, you will see that:

nestedGV2.JPG

Here emp_address is in the second Gridview.

In our practical programming scenario, there are lots of situations that come up 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 fail to implement properly.

How to Use

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

Background

The basic idea behind this article is to describe the use of Nested Gridview. There are no proper samples of Nested Gridview.
These codes can be applicable to every Visual Studio compiler.

Using the Code

GridView control retrieved from the SQL database table can be used to uniquely identify the record. In my example, I have given the option for Update and Delete too.

In source, you have to work like that:

ASP.NET
<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 thing from one table. In my example, the database table looks like this:

DB1.JPG

In code behind, I have done things with RowCommand event.

The sample code is as given below:

C#
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 samples of Nested Gridview.

History

  • 2nd May, 2011 - Submitted article

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer India
India India
http://devcorners.com/
Total DotNet/Programming Solution

I am Prasanta Banerjee. I am an Asp.Net Developer. My site: http://devcorners.com/
Email: prasanta.it@hotmail.com
If any body wants to prepare for interview http://guru-code.blogspot.com/ is the good site.

Comments and Discussions

 
Questionpaging of the child gridview Pin
Jocelyne El Khoury1-Jul-14 22:31
Jocelyne El Khoury1-Jul-14 22:31 
GeneralMy vote of 3 Pin
Debopam Pal19-Nov-13 4:37
professionalDebopam Pal19-Nov-13 4:37 
SuggestionNot like real nested grid view Pin
Debopam Pal19-Nov-13 4:37
professionalDebopam Pal19-Nov-13 4:37 
It is not like real Nested GridView. I mean, user will may face problem with the design of your nested GridView. Logical part is right, but this cannot be treated as Real Nested GridView as nested means 'under', so it breaks the concept of nested. I hope you understandSmile | :) Thank You.
If you do not STEP FORWARD, You'll always be in the SAME PLACE

GeneralRe: Not like real nested grid view Pin
Prasanta_Prince19-Nov-13 5:53
Prasanta_Prince19-Nov-13 5:53 
GeneralRe: Not like real nested grid view Pin
Debopam Pal19-Nov-13 7:46
professionalDebopam Pal19-Nov-13 7:46 
QuestionHow to handle events in the 2nd grid (Inside Grid)?? Pin
kanna.kannanbe19-Aug-13 18:48
kanna.kannanbe19-Aug-13 18:48 
GeneralMy vote of 3 Pin
Member 997456918-Apr-13 0:08
Member 997456918-Apr-13 0:08 
QuestionMultiple childgrids in parent grid Pin
dilfizo2-Apr-12 1:54
dilfizo2-Apr-12 1:54 
AnswerRe: Multiple childgrids in parent grid Pin
Prasanta_Prince11-Jun-12 2:05
Prasanta_Prince11-Jun-12 2:05 
QuestionNice Pin
Ravindra_Parcha11-Feb-12 20:45
Ravindra_Parcha11-Feb-12 20:45 
GeneralMy vote of 2 Pin
sudeep123456725-Jul-11 1:03
sudeep123456725-Jul-11 1:03 
GeneralMy vote of 5 Pin
Prasanta_Prince19-Jun-11 9:20
Prasanta_Prince19-Jun-11 9:20 
GeneralMy vote of 5 Pin
Monjurul Habib9-Jun-11 10:26
professionalMonjurul Habib9-Jun-11 10:26 
GeneralMy vote of 5 Pin
88Rocker1-Jun-11 23:43
88Rocker1-Jun-11 23:43 
GeneralMy vote of 5 Pin
canozurdo24-May-11 3:11
canozurdo24-May-11 3:11 
GeneralRe: My vote of 5 Pin
Prasanta_Prince25-May-11 21:52
Prasanta_Prince25-May-11 21:52 
GeneralI do not want to restore a new database to run nested gridview.. Pin
Ravi Sant24-May-11 3:00
Ravi Sant24-May-11 3:00 
GeneralRe: I do not want to restore a new database to run nested gridview.. Pin
Prasanta_Prince24-May-11 7:20
Prasanta_Prince24-May-11 7:20 
GeneralRe: I do not want to restore a new database to run nested gridview.. Pin
AspDotNetDev24-May-11 11:32
protectorAspDotNetDev24-May-11 11:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.