Click here to Skip to main content
Click here to Skip to main content
Go to top

Nested gridview Edit

, 25 Feb 2014
Rate this:
Please Sign up or sign in to vote.
Nested GridView With Editing Facility of both gridview.

Introduction

Nested gridview shows the gridview inside gridview which indicates that the parent gridview has an child gridview. Then, it provides to edit both parent and child gridview with perfect editing.

Background

This is useful in the regular situation whenever there is a need to display multiple records related to one record, at that time implement the nested gridview concept. After implementation, sometimes you need to edit that record on those page. At that time, it is very useful and provides the powerful solution for editing record in nested gridview.

Using the Code

Using this code, you can edit parent gridview record and child gridview record at the same time without any dropdown selection that just provides simple textbox editing.

As I show in the image, that is useful at the time of displaying state related country and also category related company, etc.

Here, this article gives all the implementation about nested gridview and provides editing in both. You have to write your own select command, Connection then integrate the below code.

Step 1: Add the below code in your .aspx page:

<div align="center">
        <table bgcolor="#FFFFCC" border="1" cellpadding="4" cellspacing="1">
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" 
                    Font-Bold="True" Font-Italic="True" Font-Size="Larger"
                        ForeColor="#003300" 
                        Text="Nested GridView With Editing Facility"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <asp:GridView ID="gridcountry" runat="server" 
                    AutoGenerateColumns="False" BackColor="White"
                        BorderColor="#999999" BorderStyle="Solid" 
                        BorderWidth="1px" CellPadding="3" DataKeyNames="countryid"
                        ForeColor="Black" GridLines="Vertical" 
                        OnRowCancelingEdit="gridcountry_RowCancelingEdit"
                        OnRowEditing="gridcountry_RowEditing" OnRowUpdating="gridcountry_RowUpdating">
                        <AlternatingRowStyle BackColor="#CCCCCC" />
                        <Columns>
                            <asp:BoundField DataField="countryname" HeaderText="Country" />
                            <asp:TemplateField HeaderText="State">
                                <ItemTemplate>
                                    <asp:GridView ID="gridstate" runat="server" 
                                    AutoGenerateColumns="False" BackColor="#CCCCCC"
                                        BorderColor="#999999" BorderStyle="Solid" 
                                        BorderWidth="3px" CellPadding="4" CellSpacing="2"
                                        DataKeyNames="stateid" ForeColor="Black" 
                                        OnRowEditing="gridstate_RowEditing"
                                        OnRowUpdating="gridstate_RowUpdating" ShowHeader="False">
                                        <Columns>
                                            <asp:CommandField ShowEditButton="True" Visible="False" />
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <asp:Label ID="Label1" runat="server" 
                                                    Text='<%# Eval("statename") %>'></asp:Label>
                                                    <asp:Panel ID="Panel1" runat="server" 
                                                    Visible="False">
                                                    </asp:Panel>
                                                    <br />
                                                    <asp:TextBox ID="TextBox1" runat="server" 
                                                    Visible="False"></asp:TextBox>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                        <FooterStyle BackColor="#CCCCCC" />
                                        <HeaderStyle BackColor="Black" 
                                        Font-Bold="True" ForeColor="White" />
                                        <PagerStyle BackColor="#CCCCCC" 
                                        ForeColor="Black" HorizontalAlign="Left" />
                                        <RowStyle BackColor="White" />
                                        <SelectedRowStyle BackColor="#000099" 
                                        Font-Bold="True" ForeColor="White" />
                                        <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                        <SortedAscendingHeaderStyle BackColor="Gray" />
                                        <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                        <SortedDescendingHeaderStyle BackColor="#383838" />
                                    </asp:GridView>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField HeaderText="Action" 
                            ShowEditButton="True" />
                        </Columns>
                        <FooterStyle BackColor="#CCCCCC" />
                        <HeaderStyle BackColor="Black" 
                        Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#999999" 
                        ForeColor="Black" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#000099" 
                        Font-Bold="True" ForeColor="White" />
                        <SortedAscendingCellStyle BackColor="#F1F1F1" />
                        <SortedAscendingHeaderStyle BackColor="Gray" />
                        <SortedDescendingCellStyle BackColor="#CAC9C9" />
                        <SortedDescendingHeaderStyle BackColor="#383838" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div> 

Step 2: Then add this simple code to your .CS file:

  Class_Main cm = new Class_Main();
    int indexedit;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DisplayCountry();
            DisplayState();
        }
    }
    public void DisplayCountry()
    {   // add you connetion and write your command parent table select command
        DataSet ds = cm.select("select * from country");
        gridcountry.DataSource = ds;
        gridcountry.DataBind();
    }
    public void DisplayState()
    {
        for (int i = 0; i <= gridcountry.Rows.Count - 1; i++)
        {   // add you connetion and write your command Child table select command
            string Cid = gridcountry.DataKeys[i].Value.ToString();
            DataSet ds = cm.select("Select * from state where countryid=" + Cid + "");
            GridView g = (GridView)gridcountry.Rows[i].FindControl("gridstate");
            g.DataSource = ds;
            g.DataBind();
        }
    }
    protected void gridcountry_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gridcountry.EditIndex = e.NewEditIndex;
        DisplayCountry();
        DisplayState();
        GridView g = (GridView)gridcountry.Rows[e.NewEditIndex].FindControl("gridstate");
        for (int i = 0; i <= g.Rows.Count - 1; i++)
        {
            gridstate_RowEditing(g, e);
        }
        indexedit = e.NewEditIndex;
    }

    protected void gridstate_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView g = (GridView)gridcountry.Rows[indexedit].FindControl("gridstate");

        for (int j = 0; j <= g.Rows.Count - 1; j++)
        {  string Cid = gridcountry.DataKeys[e.NewEditIndex].Value.ToString();
            DataSet ds = cm.select("Select * from state where countryid=" + Cid + "");
            Panel Panel = (Panel)g.Rows[j].FindControl("Panel1");
            Label lbl = (Label)g.Rows[j].FindControl("Label1");
            TextBox txt = (TextBox)g.Rows[j].FindControl("TextBox1");
            lbl.Visible = false;
            txt.Text = ds.Tables[0].Rows[j]["statename"].ToString();
            Panel.Visible = true;
            Panel.Controls.Add(txt);
            txt.Visible = true;
        }
    }
    protected void gridstate_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        GridView g = (GridView)gridcountry.Rows[e.RowIndex].FindControl("gridstate");
        for (int j = 0; j <= g.Rows.Count - 1; j++)
        {
            string sid = g.DataKeys[j].Value.ToString();
            TextBox txt = (TextBox)g.Rows[j].FindControl("TextBox1");
            cm.update("update state set statename='" + 
            txt.Text + "' where stateid=" + sid + "");
        }
    }
    protected void gridcountry_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        string cid = gridcountry.DataKeys[e.RowIndex].Value.ToString();
        TextBox txtcountryname = (TextBox)gridcountry.Rows[e.RowIndex].Cells[0].Controls[0];
        cm.update("update country set countryname='" + 
        txtcountryname.Text + "' where countryid=" + cid + "");
        GridView g = (GridView)gridcountry.Rows[e.RowIndex].FindControl("gridstate");
        for (int i = 0; i <= g.Rows.Count - 1; i++)
        {
            gridstate_RowUpdating(sender, e);
        }
        gridcountry.EditIndex = -1;
        DisplayCountry();
        DisplayState();
    }
    protected void gridcountry_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        gridcountry.EditIndex = -1;
        DisplayCountry();
        DisplayState();
    } 

Make changes as per your requirement. You can also add more child gridviews.

Points of Interest

In this tip, we have seen how to implement nested gridview and provide it to editing facility in both gridviews. It seems simple, but many new developers struggle with it, hence I uploaded it.

History

  • 25 February, 2014: First version

Thank you!!

License

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

Share

About the Author

JatinKhimani

India India
No Biography provided

Comments and Discussions

 
BugThere is BUG I found in this post Pinmemberjhdodia26-Mar-14 22:47 
GeneralNice Post Pinmemberjhdodia26-Mar-14 17:36 
GeneralRe: Nice Post PinmemberJatinKhimani26-Mar-14 17:46 
Thanking you JHDODIA
Questionvery nice PinmemberMember 1056841326-Feb-14 20:45 
AnswerRe: very nice PinmemberJatinKhimani5-Mar-14 4:05 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 25 Feb 2014
Article Copyright 2014 by JatinKhimani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid