Nested gridview Edit

• Download source - 3.5 KB

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!!