Friday, February 1, 2013

Nested Gridview with Expand/Collapse Functionality

Here in this example, I am going to show you how to create Nested Gridview with Expand and Collapse Functionality.

I have used java script to add the expandable and collapsible functionality in nested gridview by displaying plus and minus image. I have used Subjects and SubjectUnits tables to populate the nested gridviews. 

Drag and drop the Gridview control from toolbox and add two template fields with in <Columns> tag one as first column and one as last column of gridview. Now add SQLDataSource  from toolbox and configure it. The HTML source will be look like as shown below-

<asp:GridView ID="grdParent" runat="server" DataKeyNames="SubId"
            AutoGenerateColumns="False" onrowdatabound="grdParent_RowDataBound"
            DataSourceID="SqlDataSource1" GridLines="None"
            Width="500px" BorderStyle="Solid" BorderWidth="1px">
            <Columns>
            <asp:TemplateField>
            <ItemTemplate>
                        <a href="javascript:collapseExpand('SubId_<%# Eval("SubId") %>');">
                            <img id="imageSubId_<%# Eval("SubId") %>" alt="Click to show/hide orders"
                                border="0" src="Images/bullet_toggle_plus.jpg" /></a>
                    </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="SubId" HeaderText="Subject Id" />
            <asp:BoundField DataField="SubCode" HeaderText="Subject Code" />
            <asp:BoundField DataField="SubName" HeaderText="Subject Name" />
            <asp:TemplateField>
            <ItemTemplate>
            <tr>
            <td colspan="100%">
            <div id="SubId_<%# Eval("SubId") %>" style="display: none; position: relative; left: 25px;">
            <asp:GridView ID="grdChild" runat="server" AutoGenerateColumns="False" DataKeyNames="UnitId" Width="90%">           
            <Columns>
            <asp:BoundField DataField="UnitName" HeaderText="Unit Name" />
            <asp:BoundField DataField="UnitDescription" HeaderText="Description" />
            <asp:BoundField DataField="UnitSessionNumber" HeaderText="No. of Session" />
            </Columns>
            </asp:GridView>
            </div>
            </td>
            </tr>
            </ItemTemplate>
            </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Subjects]"></asp:SqlDataSource>

Add the following JavaScript code in head section of page.

<script type="text/javascript">
   function collapseExpand(obj) {
      var gvObject = document.getElementById(obj);
      var imageID = document.getElementById('image' + obj);

if (gvObject.style.display == "none") {
                gvObject.style.display = "inline";
                imageID.src = "Images/bullet_toggle_minus.jpg";
       }
       else {
                gvObject.style.display = "none";
                imageID.src = "Images/bullet_toggle_plus.jpg";
        }
   }
</script>

Now, Write the following code on RowDataBound event of parent gridview to bind the child gridview with data.

protected void grdParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
  try
  {
    if(e.Row.RowType==DataControlRowType.DataRow)
    {
       string strSubId = DataBinder.Eval(e.Row.DataItem, "SubId").ToString();
       GridView grdChild = (GridView)e.Row.FindControl("grdChild");
       SqlDataSource grdChildDataSource = new SqlDataSource();
       grdChildDataSource.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
       grdChildDataSource.SelectCommand = "select * from SubUnits where SubId='" + strSubId + "'";
        grdChild.DataSource = grdChildDataSource;
         grdChild.DataBind();
     }
   }
   catch (Exception ex)
   {
   }
}

Build the application and run it to test the functionality.
Happy coding!!

1 comment:

^ Scroll to Top