When displaying data, we sometimes would like to group data for better user experience or when displaying long list of hierarchal data, we would want to display them in a tree view kind of structure. There is more than way of doing this, but I am going to explain achieving this functionality using AJAX Collapsible Panel Extender Control.
Overview: I am going to use Adventure Works as datasource. Every product in Production.Product table belongs to a product sub category. We fetch handful of products and the sub categories they belong to from the database. Our objective is to list all the available sub categories and allow user to expand/collapse to look/hide the list of products belonging to each subcategory.
Database Connection Added following entry under connectionStrings element in web.config.
I am using SQLDataSource to load the products categories from database. The ConnectionString property of the SqlDataSource control specifies how to connect to the database. This property can be a hard-coded connection string or can point to a connection string in a Web.config file as shown in the code given above. TheSelectCommand property specifies the SQL statement to execute to retrieve the data.
SelectCommand="Select ProductSubCategoryID, Name from
I am using AJAX Update Panel to enable partial postbacks to avoid flashing and flickering that occurs when an ASP.NET page posts back to the server and turn it into smooth, flicker-free updates. Add a GridView control to the template content of the update panel, which will be used to display products subcategories. In order to bind the SQLDataSource created above to the grid, set the “DataSourceID” property of the GridView to “sqlDsSubCategories” (ID property value of SQLDataSource). I have added an ItemTemplate to render all products related to subcategory.
I have added pnlSubCategories panel to the ItemTemplate. This is our header/seperator panel . This is the panel that will expand or collapse the pnlProductspanel on a click. This comprises of an ImageControl “imgCollapsible “ which would hold Expand/Collapse images. Depending upon the collapsible state of the panel, it would show either collapse image or expand image. I am also displaying the name of the current SubCategory in a span element.
I have added another panel pnlProducts to the ItemTemplate. This is the Panel that would expand and collapses on clicking expand/collapse buttons onpnlSubCategories panel. I have added gvProductsgridview control to this panel. In this gridview control, we display all the products for the current subcategory. The datasource for this gridview is a SqlDataSource object “sqlDsProducts” which would accept ProductSubCategoryID as the parameter. This parameter is set in the RowCreated event of the gvSubCategories.
All that is left is to add collapsible behavior between pnlSubCategories and pnlProducts using CollapsiblePanelExtender . I have added a CollapsiblePanelExtender control to the ItemTemplate. I have Set the TargetControlID property to pnlProducts and ExpandControlID/ CollapseControlID properties to “pnlSubCategories” header panel. Initially we would want to load the panel in expanded, so I have set the Collapsed property to false. For this example, I am disabling mouse over AutoExpand & AutoCollapse functionality. Finally, I have set the ExpandedImage & CollapsedImage properties to the url’s of the images you wanted to be displayed.