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!!

2 comments:

  1. Your opinions are quite interesting, I enjoy reading what you write. Hope to hear more from you. You have been Subscribed.
    Web design australia

    ReplyDelete
  2. Thanks Brian
    Sorry for late response!!

    ReplyDelete

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo