Creating a Nested Gridview Control in ASP.NET

Introduction

Grid view is a very useful and easier to use data presentation control in asp.net it is having lots of default features that we can set very easily, but in some of the projects you may need to show a master client relationship to the users For eg:- List of students who are studying in different departments.
 

We can handle this situation by using nested grid views, ie a Gridview inside a Gridview. Microsoft is providing a solution for this situation msdn website , see the link :http://msdn.microsoft.com/en-us/library/aa992038(VS.80).aspx

I think Microsoft's solution contains lot of steps to complete the process, I done a workaround on this and come up with a solution, let me explain the tasks in step by step with an example.

Step 1

Create a gridview named gvDepartments and add a Template Field in it. :

Step 2

Inside the Template Field'd Item Template add another gridview called gvStudents.

Step 3

Add following code in gvStudents grid view

DataSource

Where GetStudentInfo is a server side function that returns a datatable containing the list of students based on department id.

Source of the Grid views will be like below code

<asp:gridview id="gvDepartments" runat="server" autogeneratecolumns="False">
            DataKeyNames="DepartMent_Id" CellPadding="4" ForeColor="Black"

            GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE"

            BorderStyle="None" BorderWidth="1px">

            <rowstyle backcolor="#F7F7DE">

            <columns>

                <asp:templatefield headertext="#No">

                <itemtemplate>

                

                </itemtemplate>

                </asp:templatefield>

                <asp:boundfield datafield="Department_Name" headertext="Dep Name">

                <asp:templatefield headertext="Students">

                    <itemtemplate>

                        <asp:gridview id="gvStudents" runat="server">
                            DataSource =''

                            CellPadding="4" ForeColor="#333333" GridLines="None" ShowHeader="False"

                            AutoGenerateColumns="False">

                            <rowstyle backcolor="#F7F6F3" forecolor="#333333">

                            <columns>

                                <asp:templatefield headertext="#No">

                                    <itemtemplate>

                                       

                                    </itemtemplate>

                                </asp:templatefield>

                                <asp:boundfield datafield="Student_Name">

                            </asp:boundfield></columns>

                            <footerstyle backcolor="#5D7B9D" bold="True" forecolor="White">

                            <pagerstyle backcolor="#284775" forecolor="White" horizontalalign="Center">

                            <selectedrowstyle backcolor="#E2DED6" bold="True" forecolor="#333333">

                            <headerstyle backcolor="#5D7B9D" bold="True" forecolor="White">

                            <editrowstyle backcolor="#999999">

                            <alternatingrowstyle backcolor="White" forecolor="#284775">

                        </alternatingrowstyle></editrowstyle></headerstyle></selectedrowstyle></pagerstyle></footerstyle></rowstyle></asp:gridview>

                    </itemtemplate>

                </asp:templatefield>

            </asp:boundfield></columns>

            <footerstyle backcolor="#CCCC99">

            <pagerstyle backcolor="#F7F7DE" forecolor="Black" horizontalalign="Right">

            <selectedrowstyle backcolor="#CE5D5A" bold="True" forecolor="White">

            <headerstyle backcolor="#6B696B" bold="True" forecolor="White">

            <alternatingrowstyle backcolor="White">

        </alternatingrowstyle></headerstyle></selectedrowstyle></pagerstyle></footerstyle></rowstyle></asp:gridview>

Step 4

Create Method to bind gvDepartments (Must contain a column named “Department_Id” as we are passing this parameter to bind gvStudents).

Step 5

Create a Method named GetStudentInfo(int department_Id) , It accepts Department_Id as parameter and returns a datatable contains students list,(example given below) and you are done.

public DataTable StudentsByDepartment(int DepartmentId)

   {

       SqlConnection dbConnection = new SqlConnection(ConnectionString);

       DataTable dtStudentList = new DataTable();

       try

       {

           dbConnection.Open();

           SqlDataAdapter daStudents = new SqlDataAdapter();

           SqlCommand cmdSelect = new SqlCommand("SelectStudentByDep",dbConnection);

           cmdSelect.CommandType = CommandType.StoredProcedure;

           cmdSelect.Parameters.AddWithValue("@Dep", DepartmentId );

           daStudents.SelectCommand = cmdSelect;

           daStudents.Fill(dtStudentList);

       }

       catch (Exception objException)

       {

           HttpContext.Current.Response.Write(objException.Message);

       }

       finally

       {

           if (dbConnection != null && dbConnection.State == ConnectionState.Open)

           {

               dbConnection.Close();

           }

       }

       return dtStudentList;

   }

Figure

Sample output of a nested Gridview

Enjoy with nested gridview.i hope this is help to you all.