ASP.NET - expand/collapse nested gridview - Asked By anbu n on 23-Sep-11 04:57 AM

<asp:GridView ID="MainProduct" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                          EnableTheming="false" Width="100%">
                          <Columns>
                            <asp:TemplateField>
                              <ItemTemplate>
                                <table>
                                  <tr>
                                    <td>
                                      <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=1&CPYDIR=1">
                                        <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                          ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="padding-left: 10px">
                                      <table>
                                        <tr>
                                          <td>
                                            <asp:GridView ID="Subproduct" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                                              GridLines="None">
                                              <Columns>
                                                <asp:TemplateField>
                                                  <ItemTemplate>
                                                    <table>
                                                      <tr>
                                                        <td>
                                                          <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=1&CPYDIR=0">
                                                            <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                                              ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                                        </td>
                                                      </tr>
                                                      <tr>
                                                        <td style="padding-left: 10px">
                                                          <asp:GridView ID="Subproductfolder" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                                                            GridLines="None">
                                                            <Columns>
                                                              <asp:TemplateField>
                                                                <ItemTemplate>
                                                                  <table>
                                                                    <tr>
                                                                      <td>
                                                                        <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=1&CPYDIR=0">
                                                                          <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                                                            ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                                                      </td>
                                                                    </tr>
                                                                    <tr>
                                                                      <td style="padding-left: 10px">
                                                                        <asp:GridView ID="subfolder" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                                                                          GridLines="None">
                                                                          <Columns>
                                                                            <asp:TemplateField>
                                                                              <ItemTemplate>
                                                                                <table>
                                                                                  <tr>
                                                                                    <td>
                                                                                      <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=1&CPYDIR=0">
                                                                                        <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                                                                          ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                                                                    </td>
                                                                                  </tr>
                                                                                  <tr>
                                                                                    <td style="padding-left: 10px">
                                                                                      <asp:GridView ID="subfolder1" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                                                                                        GridLines="None">
                                                                                        <Columns>
                                                                                          <asp:TemplateField>
                                                                                            <ItemTemplate>
                                                                                              <table>
                                                                                                <tr>
                                                                                                  <td>
                                                                                                    <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=1&CPYDIR=0">
                                                                                                      <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                                                                                        ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                                                                                  </td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                  <td style="padding-left: 10px">
                                                                                                    <asp:GridView ID="Filelist" runat="server" AutoGenerateColumns="false" ShowHeader="False"
                                                                                                      GridLines="None">
                                                                                                      <Columns>
                                                                                                        <asp:TemplateField>
                                                                                                          <ItemTemplate>
                                                                                                            <table>
                                                                                                              <tr>
                                                                                                                <td>
                                                                                                                  <a href="Product.aspx?pth=<%#Eval("DirPath") %>&FP=1&DIR=0&CPYDIR=0">
                                                                                                                    <asp:Label ID="lblproductname" runat="server" Text='<%#Bind("DirName") %>'></asp:Label></a><asp:HiddenField
                                                                                                                      ID="HFProductid" Value='<%#Bind("DirPath") %>' runat="server" />
                                                                                                                </td>
                                                                                                              </tr>
                                                                                                            </table>
                                                                                                          </ItemTemplate>
                                                                                                        </asp:TemplateField>
                                                                                                      </Columns>
                                                                                                    </asp:GridView>
                                                                                                  </td>
                                                                                                </tr>
                                                                                              </table>
                                                                                            </ItemTemplate>
                                                                                          </asp:TemplateField>
                                                                                        </Columns>
                                                                                      </asp:GridView>
                                                                                    </td>
                                                                                  </tr>
                                                                                </table>
                                                                              </ItemTemplate>
                                                                            </asp:TemplateField>
                                                                          </Columns>
                                                                        </asp:GridView>
                                                                      </td>
                                                                    </tr>
                                                                  </table>
                                                                </ItemTemplate>
                                                              </asp:TemplateField>
                                                            </Columns>
                                                          </asp:GridView>
                                                        </td>
                                                      </tr>
                                                    </table>
                                                  </ItemTemplate>
                                                </asp:TemplateField>
                                              </Columns>
                                            </asp:GridView>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </ItemTemplate>
                            </asp:TemplateField>
                          </Columns>
                        </asp:GridView>

--------------------------------

in the above nested grid , i need to make expand / collapse for each gridview , i also need + and - image button for the user to click on it
Sakshi a replied to anbu n on 23-Sep-11 05:02 AM

there is no readymade option, you have to write custom code.

Following links have good code which were implemented and found successful,

http://www.codeproject.com/KB/webforms/EditNestedGridView.aspx

http://forums.asp.net/t/1140991.aspx/1

http://stackoverflow.com/questions/1861549/how-does-one-expand-collapse-a-nested-gridview-embedded-within-div-element-while
smr replied to anbu n on 23-Sep-11 05:27 AM
HI

try this

Check this complete code-

<html xmlns=
"http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
  <script>
    $(function () {
      $('.domainPlus, .CriteriaPlus').click(function () {
 
        $(this).hide();
        if ($(this).hasClass("domainPlus")) {
          $(this).closest("tr").find("div.criteriaData").show();
          $(this).parent().find(".domainMinus").show();
        }
        else {
          $(this).closest("tr").find("div.SubCriteriaData").show();
          $(this).parent().find(".CriteriaMinus").show();
        }
      });
      $('.domainMinus, .CriteriaMinus').click(function () {
 
        $(this).hide();
        if ($(this).hasClass("domainMinus")) {
          $(this).closest("tr").find("div.criteriaData").hide();
          $(this).parent().find(".domainPlus").show();
        }
        else {
          $(this).closest("tr").find("div.SubCriteriaData").hide();
          $(this).parent().find(".CriteriaPlus").show();
        }
      });
    });
  </script>
  <style>
    .plus
    {
      background-image: url('http://www.agilemfg.com/i/map_plus.gif');
    }
    .minus
    {
      background-image: url('http://www.agilemfg.com/i/map_minus.gif');
    }
    .width
    {
      width: 150px;
    }
    .width1
    {
      width: 50px;
    }
    .display
    {
      display: inline-block;
    }
    td
    {
      vertical-align: top;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
      <tr>
        <th class="width1">
            
        </th>
        <th class="width">
          Domain ID
        </th>
        <th class="width">
          Domain Name
        </th>
        <th class="width">
          Domain Description
        </th>
      </tr>
    </table>
    <asp:GridView ID="domain" runat="server" AutoGenerateColumns="false" ShowHeader="false">
      <Columns>
        <asp:TemplateField ItemStyle-CssClass="width1">
          <ItemTemplate>
            <img class="domainPlus" src="http://www.agilemfg.com/i/map_plus.gif" />
            <img class="domainMinus" style="display: none" src="http://www.agilemfg.com/i/map_minus.gif" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
          <ItemTemplate>
            <span class="display width">
              <%#Eval("DomainID")%></span> <span class="display width">
                <%#Eval("DomainName")%></span> <span class="display width">
                  <%#Eval("Description")%></span>
            <div class="criteriaData" style="display: none">
              <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;
                width: 100%">
                <tr>
                  <th style="width: 10%">
                      
                  </th>
                  <th style="width: 45%">
                    Criteria ID
                  </th>
                  <th style="width: 45%">
                    Criteria Name
                  </th>
                </tr>
              </table>
              <asp:GridView ID="Criteria" runat="server" AutoGenerateColumns="false" ShowHeader="false"
                DataSource=' <%#Eval("Criteria")%>' Style="width: 100%">
                <Columns>
                  <asp:TemplateField ItemStyle-Width="10%">
                    <ItemTemplate>
                      <img class="CriteriaPlus" src="http://www.agilemfg.com/i/map_plus.gif" />
                      <img class="CriteriaMinus" style="display: none" src="http://www.agilemfg.com/i/map_minus.gif" />
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField ItemStyle-Width="90%">
                    <ItemTemplate>
                      <span class="display" style="width: 50%">
                        <%#Eval("CriteriaID")%>
                      </span><span class="display " style="width: 45%">
                        <%#Eval("CriteriaName")%>
                      </span>
                      <div class="SubCriteriaData" style="display: none">
                        <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;
                          width: 100%">
                          <tr>
                            <th style="width: 50%">
                              Sub Criteria ID
                            </th>
                            <th style="width: 50%">
                              Sub Criteria Name
                            </th>
                          </tr>
                        </table>
                        <asp:GridView ID="SubCriteria" runat="server" AutoGenerateColumns="false" ShowHeader="false"
                          DataSource=' <%#Eval("SubCriteria")%>' Style="width: 100%">
                          <Columns>
                            <asp:TemplateField ItemStyle-Width="100%">
                              <ItemTemplate>
                                <span class="display" style="width: 50%">
                                  <%#Eval("SubCriteriaID")%>
                                </span><span class="display " style="width: 45%">
                                  <%#Eval("SubCriteriaName")%>
                                </span>
                              </ItemTemplate>
                            </asp:TemplateField>
                          </Columns>
                        </asp:GridView>
                      </div>
                    </ItemTemplate>
                  </asp:TemplateField>
                </Columns>
              </asp:GridView>
            </div>
          </ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
  </div>
  </form>
</body>
</html>

codebehind:

protected void Page_Load(object sender, EventArgs e)
  {
    var SubCriteria = (new[] {
        new{ SubCriteriaID = 1, SubCriteriaName = "Sub Criteria Name 1"},
        new{ SubCriteriaID = 2, SubCriteriaName = "Sub Criteria Name 2"},
        new{ SubCriteriaID = 3, SubCriteriaName = "Sub Criteria Name 3"},
          
    }).ToList();
    var Criteria = (new[] {
        new{ CriteriaID = 1, CriteriaName = "Criteria Name 1", SubCriteria},
        new{ CriteriaID = 2, CriteriaName = "Criteria Name 2", SubCriteria},
        new{ CriteriaID = 3, CriteriaName = "Criteria Name 3", SubCriteria},
          
    }).ToList();
    var data =( new[] {
        new{ DomainID = 1, DomainName = "Domain Name 1", Description = "Domain Description 1", Criteria },
        new{ DomainID = 2, DomainName = "Domain Name 2", Description = "Domain Description 2", Criteria },
        new{ DomainID = 3, DomainName = "Domain Name 3", Description = "Domain Description 3", Criteria },
        new{ DomainID = 4, DomainName = "Domain Name 4", Description = "Domain Description 4", Criteria },
        new{ DomainID = 5, DomainName = "Domain Name 5", Description = "Domain Description 5", Criteria }
    }).ToList();
    domain.DataSource = data;
    domain.DataBind();
  }


refer
https://forums.asp.net/t/1673163.aspx/1?+Javascript+ASP+expand+collapse+nested+gridview
http://forums.asp.net/t/1078251.aspx/1
smr replied to anbu n on 23-Sep-11 05:29 AM
hi

Instead of setting the index in OnRowDataBound of parent do it in SelectedIndexChanged event. So when you select the row you will fetch data specific to that row.

You can use button with +/- text or  images as select buttons for row to make it look like treeview.