Editing Child GridView in Nested GridView

In this article we will explore how to edit child gridview in the nested gridview.



Let''s write some code.

Step 1: Add scriptmanager in the aspx page.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

Step 2: Add below stylesheet for modal popup.

<style type="text/css">
      .modalBackground
      {
            background-color: Gray;
            filter: alpha(opacity=80);
            opacity: 0.5;
      }
      .ModalWindow
      {
            border: solid1px#c0c0c0;
            background: #f0f0f0;
            padding: 0px10px10px10px;
            position: absolute;
            top: -1000px;
      }
</style>

Step 3:  Create an aspx page and add a Gridview with another gridview in the last TemplateField. The last templatefield will also contain a lable which will be used as last column in the parent gridview.

<asp:UpdatePanel runat="server" ID="updTest" UpdateMode="Conditional">
      <ContentTemplate>
            <asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvParent_RowDataBound" CellPadding="4" ForeColor="#333333" ShowHeader="True" DataKeyNames="EmployeeId">
                  <Columns>
                        <asp:TemplateField ItemStyle-Width="20px">
                              <ItemTemplate>
                                    <asp:Image runat="server" ID="img1" ImageUrl="images/Collapse.GIF" />
                              </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField HeaderText="Employee Id" DataField="EmployeeId">
                              <ItemStyle HorizontalAlign="Center" Width="160px" />
                        </asp:BoundField>
                        <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName">
                              <ItemStyle HorizontalAlign="Center" Width="160px" />
                        </asp:BoundField>
                        <asp:BoundField HeaderText="Designation" DataField="Designation">
                              <ItemStyle HorizontalAlign="Center" Width="160px" />
                        </asp:BoundField>
                        <asp:TemplateField HeaderText="Location">
                              <ItemTemplate>
                                    <asp:Label ID="lblEmpName" runat="server" Text=''<%# Eval("Location")%>''>
                                    </asp:Label>
                                    <asp:Literal runat="server" ID="lit1" Text="</td><tr id=''trCollapseGrid'' style=''display:none'' ><td colspan=''5''>" />
                                    <asp:GridView ID="gvChild" AutoGenerateColumns="False" runat="server" EnableViewState="False" DataKeyNames="EmployeeId" ForeColor="#333333" PageSize="2" AllowPaging="True" OnPageIndexChanging="gvChild_PageIndexChanging" OnRowCancelingEdit="gvChild_RowCancelingEdit" OnRowDeleting="gvChild_RowDeleting" OnRowEditing="gvChild_RowEditing" OnRowUpdating="gvChild_RowUpdating">
                                          <RowStyle BackColor="#EFF3FB" />
                                          <AlternatingRowStyle BackColor="White" />
                                          <Columns>
                                                <asp:BoundField HeaderText="Skill ID" DataField="SkillID" ReadOnly="True">
                                                      <ItemStyle HorizontalAlign="Center" Width="80px" />
                                                </asp:BoundField>
                                                <asp:BoundField HeaderText="Employee Id" DataField="EmployeeId" ReadOnly="True">
                                                      <ItemStyle HorizontalAlign="Center" Width="100px" />
                                                </asp:BoundField>
                                                <asp:TemplateField HeaderText="SkillSet">
                                                      <ItemStyle HorizontalAlign="Center" Width="100px" />
                                                      <ItemTemplate>
                                                            <%# Eval("SkillSet")%>
                                                      </ItemTemplate>
                                                      <EditItemTemplate>
                                                            <asp:TextBox ID="txtEditSkillSet" runat="server" Text='' <%# Eval("SkillSet")%>'' Width="100px"></asp:TextBox>
                                                      </EditItemTemplate>
                                                </asp:TemplateField>
                                                <asp:TemplateField HeaderText="Remarks">
                                                      <ItemStyle HorizontalAlign="Center" Width="100px" />
                                                      <ItemTemplate>
                                                            <%# Eval("Remarks")%>
                                                      </ItemTemplate>
                                                       <EditItemTemplate>
                                                            <asp:TextBox ID="txtEditRemarks" runat="server" Text='' <%# Eval("Remarks")%>'' Width="100px"></asp:TextBox>
                                                      </EditItemTemplate>
                                                </asp:TemplateField>
                                                <asp:CommandField ButtonType="Button" EditText="Edit" HeaderText="Edit" ShowEditButton="true" />
                                                <asp:CommandField ButtonType="Button" DeleteText="Delete" HeaderText="Delete" ShowDeleteButton="true" />
                                          </Columns>
                                          <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                    </asp:GridView>
                                    <asp:Literal runat="server" ID="lit2" Text="</td></tr>" />
                              </ItemTemplate>
                        </asp:TemplateField>
                  </Columns>
                  <RowStyle BackColor="#EFF3FB" />
                  <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hidProcessing" PopupControlID="panEdit" BackgroundCssClass="modalBackground" PopupDragHandleControlID="panEdit">
            </ajaxToolkit:ModalPopupExtender>
            <asp:Panel ID="panEdit" runat="server" CssClass="ModalWindow">
                  <div style="background-color: White">
                        <img src="images/processing.gif" alt="Processing" />
                        Processing......
                  </div>
            </asp:Panel>
            <asp:HiddenField ID="hidProcessing" runat="server" />
      </ContentTemplate>
      <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnExpandRow" EventName="Click" />
      </Triggers>
</asp:UpdatePanel>

Step 4: Add a button and three hidden fields in the aspx page.


<asp:Button ID="btnTest" runat="server" OnClick="btnTest_Click" Style="display: none" />
<asp:HiddenField ID="hidRowId" runat="server" />
<asp:HiddenField ID="hidImgId" runat="server" />
<asp:HiddenField ID="hidRowIndex" runat="server" />

Step 5: Add below javascript in the aspx.

<script language="javascript" type="text/javascript">
      function OpenTable(trRow, imgId, ID) {
            document.getElementById(''<%=hidRowIndex.ClientID %>'').value = ID;
            document.getElementById(''<%=hidRowId.ClientID %>'').value = trRow;
            document.getElementById(''<%=hidImgId.ClientID %>'').value = imgId;
            __doPostBack("<%=btnExpandRow.ClientID%>", "");
      }
</script>

Step 6: Add below javascript in the aspx to get processing image whenever server calls happen.

<script language="javascript" type="text/javascript">
      // Reference of PageRequestManager.
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_initializeRequest(InitializeRequest);
      prm.add_endRequest(EndRequest);
      // Async postback starts.
      function InitializeRequest(sender, args) {
            var modalPopupBehavior = $find(''<%=ModalPopupExtender1.ClientID %>'');
            modalPopupBehavior.show();
      }
      // Async postback ends.
      function EndRequest(sender, args) {
            var modalPopupBehavior = $find(''<%=ModalPopupExtender1.ClientID %>'');
            modalPopupBehavior.hide();
      }
</script>

Step 7: Create a method GetParentTableData which will return datatable. Bind the datatable returned by GetParentTableData  with parent gridview on page load.

private DataTable GetParentTableData()
{
      DataTable table = new DataTable();
      table.Columns.Add("EmployeeId", typeof(string));
      table.Columns.Add("EmployeeName", typeof(string));
      table.Columns.Add("Designation", typeof(string));
      table.Columns.Add("Location", typeof(string));

      table.Rows.Add(100, "Andy", "S/W Engg", "NY");
      table.Rows.Add(200, "James", "S/W Engg", "NJ");
      table.Rows.Add(300, "Ramesh", "Sr. S/W Engg", "Bangalore");
      table.Rows.Add(400, "George", "Architect", "London");
      table.Rows.Add(500, "Lisa", "Manager", "Washington");
      return table;
}

protected void Page_Load(object sender, EventArgs e)
{
      if (!Page.IsPostBack)
      {
            DataTable dtParentData = GetParentTableData();
            gvParent.DataSource = dtParentData;
            gvParent.DataBind();
            GridViewChildPageIndex();
      }

}


Step 8: Create a method GetChildTableData which will return datatable. The datatable returned by GetChildTableData will bind to child gridview. EmployeeId of parent and childgridview will be same. It will act as foreign key.


private DataTable GetChildTableData()
{
      DataTable table = new DataTable();
      table.Columns.Add("SkillID", typeof(string));
      table.Columns.Add("EmployeeId", typeof(string));
      table.Columns.Add("SkillSet", typeof(string));
      table.Columns.Add("Remarks", typeof(string));
      table.Rows.Add("1", "100", "ASP.NET", "Remarks1");
      table.Rows.Add("2", "100", "SQL", "Remarks2");
      table.Rows.Add("1", "200", "ASP.NET", "Remarks1");
      table.Rows.Add("2", "200", "SQL", "Remarks2");
      table.Rows.Add("3", "200", "WCF", "Remarks3");
      table.Rows.Add("4", "300", "PHP", "Remarks1");
      table.Rows.Add("5", "300", "Oracle", "Remarks2");
      table.Rows.Add("6", "300", "Javascipt", "Remarks3");
      table.Rows.Add("7", "400", "J2EE", "Remarks1");
      table.Rows.Add("5", "400", "Oracle", "Remarks2");
      table.Rows.Add("8", "400", "Struts", "Remarks3");
      table.Rows.Add("9", "500", "Estimation", "Remarks1");
      table.Rows.Add("10", "500", "Project Plan", "Remarks2");
      table.Rows.Add("11", "500", "Resource Loading", "Remarks3");
      table.Rows.Add("12", "500", "Resource allocation", "Remarks4");
      return table;
}

Step 9: btnExpandRow_Click will be invoked whenever the row will be expanded.

protected void btnExpandRow_Click(object sender, EventArgs e)
{
      DataTable dtParentData = GetParentTableData();
      gvParent.DataSource = dtParentData;
      gvParent.DataBind();
}

Step 10: gvParent_RowDataBound will bind the child gridview. It also contains the logic of expanding and collapsing child gridview.

protected void gvParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
            string strID = gvParent.DataKeys[e.Row.RowIndex].Value.ToString();
            Image img = (Image)e.Row.Cells[0].FindControl("img1");
            Literal ltrl = (Literal)e.Row.FindControl("lit1");
            ltrl.Text = ltrl.Text.Replace("trCollapseGrid", "trCollapseGrid" + e.Row.RowIndex.ToString());
            string str = "trCollapseGrid" + e.Row.RowIndex.ToString();
            e.Row.Cells[0].Attributes.Add("OnClick", "return OpenTable(''" + str + "'',''" + img.ClientID + "'',''" + strID + "'')");
            e.Row.Cells[0].RowSpan = 1;
            System.Web.UI.WebControls.GridView gvChild = (System.Web.UI.WebControls.GridView)e.Row.FindControl("gvChild");
            if (Session["ChildPageIndex"] != null)
            {
                  DataTable dtPageIndex = (DataTable)Session["ChildPageIndex"];
                  gvChild.PageIndex = Convert.ToInt16(dtPageIndex.Rows[e.Row.RowIndex][0]);
            }
            if (hidRowIndex.Value.Equals(strID))
            {
                  BindChildgvwChildView(strID, gvChild);
                  if (!ClientScript.IsStartupScriptRegistered("ChildGrid"))
                  {
                        string javScript = "document.getElementById(''" + hidRowId.Value + "'').style.display = '';";
                        javScript = javScript + "document.getElementById(''" + hidImgId.Value + "'').src = ''images/Expand.gif'';";
                        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ChildGrid", javScript, true);
                  }
            }
      }
}

Step 11: BindChildgvwChildView will bind child gridview.

private void BindChildgvwChildView(string empId, System.Web.UI.WebControls.GridView gvChild)
{
      DataTable dtChildTable = GetChildTableData();
      DataTable dtCloneChildTable = dtChildTable.Clone();
      DataRow[] gvChildRows = dtChildTable.Select("EmployeeId = " + empId);
      foreach (DataRow gvChildRow in gvChildRows)
      {
            dtCloneChildTable.ImportRow(gvChildRow);
      }
      gvChild.DataSource = dtCloneChildTable;
      gvChild.DataBind();
}

Step 12: gvChild_PageIndexChanging will handle paging in the child gridview.

protected void gvChild_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView)sender);
      GridViewRow gvRowParent = ((System.Web.UI.WebControls.GridView)sender).Parent.Parent as GridViewRow;
      gvwChild.PageIndex = e.NewPageIndex;
      if (Session["ChildPageIndex"] != null)
      {
            DataTable dtPageIndex = (DataTable)Session["ChildPageIndex"];
            dtPageIndex.Rows[gvRowParent.RowIndex][0] = e.NewPageIndex;
      }
      KeepExpanded(gvwChild, sender);
}

Step 13: KeepExpanded will be called whenever there is any postback from child gridview will occur.

protected void KeepExpanded(System.Web.UI.WebControls.GridView gvwChild, object sender)
{
      GridViewRow gvRowParent = ((System.Web.UI.WebControls.GridView)sender).Parent.Parent as GridViewRow;
      BindChildgvwChildView(gvParent.DataKeys[gvRowParent.RowIndex].Value.ToString(), gvwChild);
      if (!ClientScript.IsStartupScriptRegistered("ChildGridIndex"))
      {
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ChildGridIndex", "document.getElementById(''" + hidRowId.Value + "'').style.display = '';", true);
      }
}

Step 14: Below four methods will handle Editing, Updating, Deleting and CancelEditing in child gridview.

protected void gvChild_RowEditing(object sender, GridViewEditEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView)sender);
      gvwChild.EditIndex = e.NewEditIndex;
      KeepExpanded(gvwChild, sender);
}

protected void gvChild_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView)sender);
      TextBox txtRemarks = ((TextBox)(gvwChild.Rows[e.RowIndex].FindControl("txtEditRemarks")));
      TextBox txtSkillSet = ((TextBox)(gvwChild.Rows[e.RowIndex].FindControl("txtEditSkillSet")));
      //Code to update table
      gvwChild.EditIndex = -1;
      KeepExpanded(gvwChild, sender);
}
protected void gvChild_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView)sender);
      //Code to delete data from table
      KeepExpanded(gvwChild, sender);
}
protected void gvChild_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
      System.Web.UI.WebControls.GridView gvwChild = ((System.Web.UI.WebControls.GridView)sender);
      gvwChild.EditIndex = -1;
      KeepExpanded(gvwChild, sender);
}
This ends the article of editing child gridview of nested gridview

Live Demo
Like us if you find this post useful. Thanks! 
chinmaya parija
Download Code