<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("<%=btnTest.ClientID%>", "");
      }

</script>

Step 6: Place below javascripts in the aspx page to stop end user to do any activity while child gridview is loading

<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: Write GetData method will return the datatable.

private DataTable GetData(string strQuery)
{
      DataTable dtDept = null;
      using (SqlConnection con = new SqlConnection("Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"))
      {
            con.Open();
            using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
            {
                  dtDept = new DataTable();
                  sqlAdapter.Fill(dtDept);
            }
      }
      return dtDept;
}

Step 8:  Bind the parent gridview with Employee table on page load method and GridViewChildPageIndex method will be used to store the page index of child gridview on page load. The index of the previously loaded child gridview should be maintained which will be accompolished by keeping page index of all child gridview to zero in the session.


protected void Page_Load(object sender, EventArgs e)
{
      if (!Page.IsPostBack)
      {
            string strQuery = "SELECT * FROM Employee";
            DataTable dtParentData = GetData(strQuery);
            gvParent.DataSource = dtParentData;
            gvParent.DataBind();
            GridViewChildPageIndex();
      }
}

private void GridViewChildPageIndex()
{
      DataTable dtPageIndex = new DataTable();
      dtPageIndex.Columns.Add("PageIndex", typeof(int));
      for (int i = 0; i < gvParent.Rows.Count; i++)
      {
            dtPageIndex.Rows.Add("0");
      }
      Session["ChildPageIndex"] = dtPageIndex;
}

Step 9:  Write below gvParent_RowDataBound method

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))
            {
                  BindChildGrdView(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 10: And now we will add gvChild_PageIndexChanging method which will be used while paging in child gridview and BindChildGrdView to bind 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;
      }
      BindChildGrdView(gvParent.DataKeys[gvRowParent.RowIndex].Value.ToString(), gvwChild);
      if (!ClientScript.IsStartupScriptRegistered("ChildGridIndex"))
      {
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ChildGridIndex", document.getElementById('" + hidRowId.Value + "').style.display = ';", true);
      }
}

private void BindChildGrdView(string empId, System.Web.UI.WebControls.GridView gvChild)
{
      string strQuery = "SELECT * FROM skill WHERE employeeid = " + empId;
      DataTable dtChildTable = GetData(strQuery);
      gvChild.DataSource = dtChildTable;
      gvChild.DataBind();
}