title: create nested collapsable gridview dynamically
body: <p>I'm trying to build a dynamic nested collapsable gridview for a project in college.</p>
  
  <p>I read <a href="http://csharpdotnetfreak.blogspot.com/2012/06/nested-gridview-example-in-aspnet.html" rel="nofollow">this article</a> which helped me a bit, but I'm still stuck.</p>
  
  <p>the two relevant tables in my sql server are: member which contains info including id (primary key), and history table that is used to store history details about calls made with foreign key id that points to the member table. (each history row gets an int by identity-history_num).</p>
  
  <p>I'd like that by a given id the grid will list all the history records which will be expendable to show the content field of the history table.</p>
  
  <p>I did some tests and managed to get it to work, but not dynamic. I guess I need to create the gridview dynamically as well.</p>
  
  <p><strong>here is my aspx:</strong></p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
   &lt;script type="text/javascript"&gt;
       function showNestedGridView(obj) {
           var nestedGridView = document.getElementById(obj);
           var imageID = document.getElementById('image' + obj);
  
           if (nestedGridView.style.display == "none") {
               nestedGridView.style.display = "inline";
               imageID.src = "minus.png";
           } else {
               nestedGridView.style.display = "none";
               imageID.src = "plus.png";
           }
       }
  &lt;/script&gt;
  
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div id='div1' runat="server"&gt;
  
  
          &lt;asp:GridView ID="gridViewMaster" runat="server" AllowPaging="True" 
              AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" 
              BorderWidth="1px" CellPadding="2" DataKeyNames="id" 
               ForeColor="Black" GridLines="None" 
              onrowdatabound="gridViewMaster_RowDataBound"&gt;
              &lt;Columns&gt;
                  &lt;asp:TemplateField&gt;
                     &lt;ItemTemplate&gt;
                              &lt;a href="javascript:showNestedGridView('customerID-&lt;%# Eval("id") %&gt;');"&gt;
                                  &lt;img id="imagecustomerID-&lt;%# Eval("history_num") %&gt;" alt="Click to show/hide orders" border="0" src="plus.png" /&gt;
                              &lt;/a&gt;
                          &lt;/ItemTemplate&gt;
                  &lt;/asp:TemplateField&gt;
  
                  &lt;asp:BoundField DataField="history_num" HeaderText="history_id" ReadOnly="True" 
                      SortExpression="Member-ID" /&gt;
                  &lt;asp:BoundField DataField="h_date" HeaderText="History-Date" 
                      SortExpression="Member-Name" /&gt;
                      &lt;asp:BoundField DataField="topic" HeaderText="History-topic" 
                      SortExpression="Member-Name" /&gt;
  
                  &lt;asp:TemplateField&gt;
                              &lt;ItemTemplate&gt;
                        &lt;tr&gt;
                                  &lt;td colspan="100%"&gt;
                                     &lt;div id="customerID-&lt;%# Eval("history_num") %&gt;" style="display:none;position:relative;left:25px;" &gt;
                           &lt;asp:GridView ID="nestedGridView" runat="server" AutoGenerateColumns="False" 
                              DataKeyNames="id"&gt;
                               &lt;RowStyle VerticalAlign="Top" BackColor="White" ForeColor="#330099" /&gt;
                              &lt;Columns&gt;
  
                                  &lt;asp:BoundField DataField="content" HeaderText="content" 
                                      SortExpression="OrderDate" /&gt;
  
                              &lt;/Columns&gt;
                               &lt;FooterStyle BackColor="#FFFFCC" ForeColor="#330099" /&gt;
              &lt;PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" /&gt;
              &lt;AlternatingRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /&gt;
              &lt;HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /&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;%-- &lt;asp:sqldatasource ID="Sqldatasource1" runat="server" 
              ConnectionString="&lt;%$ ConnectionStrings:igroup20_test2ConnectionString %&gt;" 
              SelectCommand="select id, h_date, topic from history where id='038191904'"&gt;&lt;/asp:sqldatasource&gt;--%&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>and this is the code behind for now:</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Configuration;
  
  public partial class _Default : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          SqlDataSource sqlDS = new SqlDataSource();
          sqlDS.ID = "sqlDS";
          sqlDS.ConnectionString = "igroup20_test2ConnectionString";
          sqlDS.SelectCommand = "select  history_num, h_date, topic from history where id='038191904'";
          div1.Controls.Add(sqlDS);
  
          gridViewMaster.DataSource = sqlDS;
          gridViewMaster.DataBind();
  
      }
  
      protected void gridViewMaster_RowDataBound(object sender, GridViewRowEventArgs e)
      {
          if (e.Row.RowType == DataControlRowType.DataRow)
          {
              string his_num = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "history_num"));
              GridView gridViewNested = (GridView)e.Row.FindControl("nestedGridView");
              SqlDataSource sqlDataSourceNestedGrid = new SqlDataSource();
              sqlDataSourceNestedGrid.ConnectionString = ConfigurationManager.ConnectionStrings["igroup20_test2ConnectionString"].ConnectionString;
              sqlDataSourceNestedGrid.SelectCommand = "SELECT content from history where history_num='" + his_num + "'";
              gridViewNested.DataSource = sqlDataSourceNestedGrid;
              gridViewNested.DataBind();
          }
      }
  }
  </code></pre>
  
  <p>history table fields are:
  history_num
  id
  h_date
  topic
  content</p>