title: How to achieve Nested GridView functionality using any other controls in div tags in asp.net
body: <p>I am using Nested GridView. How can I use only div tags and any other controls to achieve the Nested GridView functionality ?</p>
  
  <p>Javascript is </p>
  
  <pre><code> &lt;script language="javascript" type="text/javascript"&gt;
  function divexpandcollapse(divname) {
  var div = document.getElementById(divname);
  var img = document.getElementById('img' + divname);
  if (div.style.display == "none") {
  div.style.display = "inline";
  img.src = "minus.gif";
  } else {
  div.style.display = "none";
  img.src = "plus.gif";
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the aspx contain two a gridview( with nested gridviews) as   </p>
  
  <pre><code>      &lt;div&gt;
      &lt;asp:GridView ID="gvParentGrid" runat="server" DataKeyNames="CountryId" Width="300"
      AutoGenerateColumns="false" OnRowDataBound="gvUserInfo_RowDataBound" GridLines="None" BorderStyle="Solid" BorderWidth="1px"  BorderColor="#df5015"&gt;
      &lt;HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /&gt;
      &lt;RowStyle BackColor="#E1E1E1" /&gt;
      &lt;AlternatingRowStyle BackColor="White" /&gt;
      &lt;HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /&gt;
      &lt;Columns&gt;
      &lt;asp:TemplateField ItemStyle-Width="20px"&gt;
      &lt;ItemTemplate&gt;
      &lt;a href="JavaScript:divexpandcollapse('div&lt;%# Eval("CountryID") %&gt;');"&gt;
      &lt;img id="imgdiv&lt;%# Eval("CountryID") %&gt;" width="9px" border="0" src="plus.gif" /&gt;
      &lt;/a&gt;
      &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
      &lt;asp:BoundField DataField="CountryId" HeaderText="CountryId" HeaderStyle-HorizontalAlign="Left" /&gt;
      &lt;asp:BoundField DataField="CountryName" HeaderText="CountryName" HeaderStyle-HorizontalAlign="Left" /&gt;
      &lt;asp:TemplateField&gt;
      &lt;ItemTemplate&gt;
      &lt;tr&gt;
      &lt;td colspan="100%"&gt;
      &lt;div id="div&lt;%# Eval("CountryID") %&gt;" style="display: none; position: relative; left: 15px; overflow: auto"&gt;
      &lt;asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Double"  BorderColor="#df5015" GridLines="None" Width="250px"&gt;
      &lt;HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /&gt;
      &lt;RowStyle BackColor="#E1E1E1" /&gt;
      &lt;AlternatingRowStyle BackColor="White" /&gt;
      &lt;HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /&gt;
      &lt;Columns&gt;
      &lt;asp:BoundField DataField="StateID" HeaderText="StateID" HeaderStyle-HorizontalAlign="Left" /&gt;
      &lt;asp:BoundField DataField="StateName" HeaderText="StateName" HeaderStyle-HorizontalAlign="Left" /&gt;
      &lt;/Columns&gt;
      &lt;/asp:GridView&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/ItemTemplate&gt;
  &lt;/asp:TemplateField&gt;
  &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Code behind is   </p>
  
  <pre><code> protected void Page_Load(object sender, EventArgs e)
  {
  if (!IsPostBack)
  {
  BindGridview();
  }
  }
  // This method is used to bind gridview from database
  protected void BindGridview()
  {
  con.Open();
  SqlCommand cmd = new SqlCommand("select * from Country", con);
  SqlDataAdapter da = new SqlDataAdapter(cmd);
  DataSet ds = new DataSet();
  da.Fill(ds);
  con.Close();
  gvParentGrid.DataSource = ds;
  gvParentGrid.DataBind();
  
  }
  protected void gvUserInfo_RowDataBound(object sender, GridViewRowEventArgs e)
  {
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
  con.Open();
  GridView gv = (GridView)e.Row.FindControl("gvChildGrid");
  int CountryId = Convert.ToInt32(e.Row.Cells[1].Text);
  SqlCommand cmd = new SqlCommand("select * from State where CountryID=" + CountryId, con);
  SqlDataAdapter da = new SqlDataAdapter(cmd);
  DataSet ds = new DataSet();
  da.Fill(ds);
  con.Close();
  gv.DataSource = ds;
  gv.DataBind();
  }
  </code></pre>