Click here to Skip to main content
14,578,769 members

Nested GridView [No JavaScripts]

Rate this:
4.15 (11 votes)
Please Sign up or sign in to vote.
4.15 (11 votes)
19 Jul 2009CPOL
Nesting GridViews without writing any JavaScript code [AJAX driven].


Introduction and Background

There are several implementations available for nesting GridViews on the internet. On MSDN, there is a set of code available, but that does not solve the problem of most developers. Just adding another GridView in the template field of the parent GridView is not enough.

CodeProject already has a solution available, but that involves writing methods in JavaScript: EditNestedGridView.

I am going to show you how it can be implemented without writing any JavaScript code and by letting AJAX do the work.


I'll start off quick from the beginning so that those developers who are new with this behavior of GridView won’t have any issues achieving the end result.

Create a GridView and add a Template File to the GridView. You can achieve this by going into Edit Columns from GridView Tasks. Once this is done, Edit Template and Insert a LinkButton with " + " as its Text property. Make it X-Large and remove the Underline. Insert a child GridView right next to the LinkButton.

These kinds of arrangements are usually required when you already have a relationship between two tables. Like in my example, there is a relationship between the Order Table and the Detail Table. I assume you have already created the SqlDataSources for both GridViews according to your requirements.

The important thing here is that, you must not assign any Source to the Parameter in the child GridView's SqlDataSource. In other words, assign the source as "None" for the Child DataSource.

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

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

  SelectCommand="SELECT [order_no_fk], [item_name], [order_status], [description], 
                 [quantity], [unit_price], [net_cost], [order_detail_no]
                 FROM [order_detail] WHERE ([order_no_fk] = @order_no_fk)" >

<asp:Parameter Name="order_no_fk" Type="String" />

Once you are done with it, return back to the parent GridView and create an event handler for RowDataBound.

protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
    if (e.Row.RowType ==   DataControlRowType.DataRow)

        SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
        s.SelectParameters[0].DefaultValue =   e.Row.Cells[1].Text;

This is the part of code that is actually available at MSDN, most of you may already have gone through this but, I'll just explain it in a few simple words.

Our goal over here is to assign the parameter source value, the one earlier we declared as "None" in the SqlDataSource of the child GridView. For starters who have just seen this type of code for the first time, I think it will now be a little bit more meaningful.

Now, go back to the Template Field and create an event handler for the LinkButton1_Click event. Before actually writing the event handler, you have to create an ASP Panel inside the Template Field. Place the child GridView in the newly created ASP Panel. Note that the LinkButton must remain outside the Panel you have just added.

Make the Visible property of the ASP Panel equals "False".

protected void LinkButton1_Click(object sender, EventArgs   e)
    LinkButton l_btn =   (LinkButton)sender;
    GridViewRow gvr =   (GridViewRow)l_btn.NamingContainer
    Panel p1 =   (Panel)gvr.FindControl("Panel1");
    LinkButton lb1 =   (LinkButton)gvr.FindControl("LinkButton1");
    if (p1.Visible == false)
        p1.Visible = true;
        lb1.Text = "-";
    else if (p1.Visible == true)
        p1.Visible = false;
        lb1.Text = "+";

    GridView gv2 =   (GridView)l_btn.FindControl("GridView2");


You can achieve your desired formatting just by adjusting the width of the ASP Panel. It won't make a difference if your child GridView has a greater width than the ASP Panel.

Finally, go to the parent GridView and vertical align each row at the Top position. This way, you can see the parent's row entries when the child grid pops underneath it.

Whenever “+” is pressed, you experience a postback. You can simply use the AJAX UpdatePanel to overcome this behavior. Just add the AJAX UpdatePanel and simply place your parent GridView inside the UpdatePanel. That will give you the desired nested GridView.


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


About the Author

Software Developer
Saudi Arabia Saudi Arabia
No Biography provided

Comments and Discussions

QuestionError in code Pin
Member 103181495-Oct-13 22:40
MemberMember 103181495-Oct-13 22:40 
QuestionSample code does not reflect instructions and does not work Pin
Fandango681-Jul-13 17:25
MemberFandango681-Jul-13 17:25 
Sample code does not reflect instructions and does not work in VS2005 and it's missing the actual sample database.
Questionhow open all nested grids programmatically Pin
Melchizedek19-Oct-12 8:56
MemberMelchizedek19-Oct-12 8:56 
QuestionThanks for sharing fawadhq Pin
mohanjune198720-Sep-12 18:09
Membermohanjune198720-Sep-12 18:09 
GeneralDetail Gridview expands key column Pin
indkids17-Oct-09 5:43
Memberindkids17-Oct-09 5:43 
GeneralRe: Detail Gridview expands key column Pin
fawadhq17-Oct-09 7:46
Memberfawadhq17-Oct-09 7:46 
GeneralRe: Detail Gridview expands key column Pin
indkids19-Oct-09 5:00
Memberindkids19-Oct-09 5:00 
GeneralRe: Detail Gridview expands key column Pin
paulinfrancis2-Dec-09 21:43
Memberpaulinfrancis2-Dec-09 21:43 
GeneralRe: Detail Gridview expands key column Pin
indkids24-Feb-10 9:44
Memberindkids24-Feb-10 9:44 
Generalstyle does not work for ie 7 Pin
KevinDonahue1-Oct-09 10:18
MemberKevinDonahue1-Oct-09 10:18 
Questionhow to make the panel float? Pin
zinae31-Aug-09 23:11
Memberzinae31-Aug-09 23:11 
AnswerRe: how to make the panel float? Pin
fawadhq7-Sep-09 4:49
Memberfawadhq7-Sep-09 4:49 
GeneralNice try Pin
Md. Marufuzzaman20-Jul-09 23:37
professionalMd. Marufuzzaman20-Jul-09 23:37 
GeneralRe: Nice try Pin
fawadhq21-Jul-09 7:40
Memberfawadhq21-Jul-09 7:40 
GeneralHad to read closely Pin
spoodygoon16-Jul-09 14:23
Memberspoodygoon16-Jul-09 14:23 

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.

Posted 16 Jul 2009


51 bookmarked