Tuesday, 21 May 2013

How to implement nested grid view in Asp.net

How to implement nested grid view in Asp.net


Step 1 : Create your website first and then create one .aspx page

Step 2 : Open that page and Drag and Drop GridView control from Toolbox Diaglog box

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>


Step 3 : After adding grid view open server side code of that page. opne .cs file or .vb file

Step 4 : Change grid view data bound layout or paste below code

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        OnRowDataBound="GridView1_RowDataBound" >
        <Columns>
            <asp:BoundField DataField="RollNo" HeaderText="Roll No" />
            <asp:BoundField DataField="StudentName" HeaderText="Studnet Name" SortExpression="StudentName" />
            <asp:BoundField DataField="MobileNo" HeaderText="Mobile No" />
            <asp:BoundField DataField="Address" HeaderText="Address" />
            <asp:TemplateField HeaderText="Marks">
                <ItemTemplate>
                    <asp:GridView ID="GridView2" runat="server">
                        <EmptyDataTemplate>
                            No Marks Found
                        </EmptyDataTemplate>
                    </asp:GridView>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>


Step 5 : After that you have to create data . Create two DataTable one for Student and One for StudentMarks or paste below code in your function.

DataTable dTableStudent = new DataTable();
        dTableStudent.Columns.Add("RollNo", typeof(int));
        dTableStudent.Columns.Add("StudentName", typeof(string));
        dTableStudent.Columns.Add("MobileNo", typeof(string));
        dTableStudent.Columns.Add("Address", typeof(string));

        dTableStudent.Rows.Add(1, "Student1", "1234567890", "India");
        dTableStudent.Rows.Add(2, "Student2", "1234567890", "UK");
        dTableStudent.Rows.Add(3, "Student3", "1234567890", "India");

        //  Creating second Datatable
        DataTable dTableMarks = new DataTable();
        dTableMarks.Columns.Add("RollNo", typeof(int));
        dTableMarks.Columns.Add("Sub1", typeof(int));
        dTableMarks.Columns.Add("Sub2", typeof(int));


        dTableMarks.Rows.Add(1, 50, 60);
        dTableMarks.Rows.Add(1, 70, 80);
        dTableMarks.Rows.Add(2, 61, 80);
        dTableMarks.Rows.Add(1, 70, 82);
        dTableMarks.Rows.Add(2, 77, 10);



Step 6 : After creating temp data for student then create DataSet object We can only used DataSet to do Nesting binding because DataSet havi one Relations Method which is allow to store mutiple data and allow mutiple datatable creation.So add both DataTable to DataSet paste below code.

DataSet ds = new DataSet();
        ds.Tables.Add(dTableStudent);
        ds.Tables.Add(dTableMarks);



Step 7 : After creating Dataset and adding DataTable your to set the Relations property of DataSet.
StudentGroup is Relations name and other is Group ID 

 ds.Relations.Add(new DataRelation("StudentGroup", ds.Tables[0].Columns["RollNo"], ds.Tables[1].Columns["RollNo"], true));

Step 8 : After initializing Relations then bind the data to GridView  bind only 0 position table

GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();


Step 9: After that add one Event of Grid View is RowDataBound which will bind all nested Grid View Data.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

//Getting Inner DataItem
        DataRowView dv = e.Row.DataItem as DataRowView;
// checking is empty or not
        if (dv != null)
        {
//creating object of that control.
            GridView nestedGridView= e.Row.FindControl("GridView2") as GridView;
            if (nestedGridView!= null)
            {

// binding to grid view
                nestedGridView.DataSource = dv.CreateChildView("StudentGroup");
                nestedGridView.DataBind();

            }

        }
    }


 Step 8 : Run your project and check is nested grid view is working properly.



No comments:

Post a Comment

Thank you for your interest .