Archive
How to implement Collapsible panel inside listview control for MENU in asp.net/C#
Collapsible menus using listview control in ASP.Net/C#
We have already posted a blog regarding how to create Menu control in ASP.Net/C# using List view control inside a Listview control. Here we are going to demonstrate how to implement collapsible panel extender for each categories in the menu control. Most of the websites showing menu with category and subcategory list. We can create this menu as dynamic data with ASP.Net/C#.
Dynamic menu using ListView inside another ListView Control in ASP with collapsible panel.
For eg : If we need to implement dynamic menu control by fetching category and subcategory from the database. In this case there is n number of category so we need to use a listview for this, but each category there is also n number of subacategories so we have to implement a another ListView for this subcategory list.
Steps to use a listview inside another listview
In our scenario, there will be a category list and under the each categories, there is n number of subcategories should be display. First of all we cretaed a ListView control which is used to hold category name and list of subcategories coming under this category. For display category name, we just included a div and bounded a ‘Name’ value to this. For listing subcategories, we created another listview control inside the itemtemplate of the first listview and included the linkbutton for display subcategory name.
And also here we are giving a facility to user to expand and collapse each subgaries list by clicking category header. So if we having largest number of categories and subcategories in the menu, user can collapse unwanted categories and hence length of the menu control will be decreased. Here are the aspx code for the implementing menu control with categories and subcategories which including collapsible panel for each subcategory section.
<div id="boxbg"> <asp:ListView runat="server" ID="RightMenuItems" ItemPlaceholderID="PlaceHolder2"> <LayoutTemplate> <asp:PlaceHolder runat="server" ID="PlaceHolder2" /> </LayoutTemplate> <ItemTemplate> <asp:Panel runat="server" ID="panelCategory" CssClass="h1header" > <div style="float: left;"> <%# Eval("Name") %></div> <div style="float: right; margin-top: 5px; margin-right: 5px;"> <%--<asp:Image runat="server" ID="imgCollapse" />--%></div> </asp:Panel> <asp:ListView runat="server" ID="subMenu" ItemPlaceholderID="PlaceHolder3" DataSource='<%# Eval("subCategories") %>' OnItemCommand="listViewTest_ItemCommand"> <LayoutTemplate> <asp:Panel runat="server" ID="panelSubCategory" HorizontalAlign="center" Width="100%"> <table width="100%" cellspacing="0" border="0" cellpadding="0"> <asp:PlaceHolder runat="server" ID="PlaceHolder3" /> </table> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="ajxColapase1" runat="server" TargetControlID="panelSubCategory" CollapseControlID="panelCategory" ExpandControlID="panelCategory" CollapsedSize="1" Collapsed="false" ImageControlID="imgCollapse" CollapsedImage="~/images/arrow01.gif" ExpandedImage="~/images/arrow02.gif" /> </LayoutTemplate> <ItemTemplate> <tr> <td> <asp:LinkButton ID="lnkBtnSubMenu" runat="server" Text='<%# Eval("Name") %>' CommandName="clickSubMenu" CommandArgument='<%# Eval("ID") %>' /> <asp:Label runat="server" ID="lblID" Visible="false" Text='<%# Eval("ID") %>' /> </td> </tr> </ItemTemplate> </asp:ListView> </ItemTemplate> </asp:ListView> </div>
Create a structured data to binding Menu Control (Listview inside another List view Control)
In order to bind the data source to the above ListView controls, the data should be having same structure (Category List having each category child subcategory List). For achieving this we fetch the category and subcategory from the database and created a list having required structure as follows.
DataTable dtTblCategory = new DataTable(); dtTblCategory = (new eMallBL()).getCategories(0); DataTable dtTblSubCategory = new DataTable(); dtTblSubCategory = (new eMallBL()).getSubCategories(0, 0); IList<eMallEntity.ItemCatagory> categories = new List<eMallEntity.ItemCatagory>(); for (int i = 0; i < dtTblCategory.Rows.Count; i++) { eMallEntity.ItemCatagory category = new eMallEntity.ItemCatagory(); category.Name = dtTblCategory.Rows[i]["Name"].ToString(); category.ID = Convert.ToInt32(dtTblCategory.Rows[i]["ID"].ToString()); IList<eMallEntity.ItemSubCatagory> subCategories = new List<eMallEntity.ItemSubCatagory>(); for (int j = 0; j < dtTblSubCategory.Rows.Count; j++) { if (dtTblSubCategory.Rows[j]["CategoryID"].ToString() == dtTblCategory.Rows[i]["ID"].ToString()) { eMallEntity.ItemSubCatagory subCategory = new eMallEntity.ItemSubCatagory(); subCategory.Name = dtTblSubCategory.Rows[j]["Name"].ToString(); subCategory.ID = Convert.ToInt32(dtTblSubCategory.Rows[j]["ID"].ToString()); subCategories.Add(subCategory); } } category.subCategories = subCategories; categories.Add(category); } RightMenuItems.DataSource = categories; RightMenuItems.DataBind();
Search other topic from here
Blog Stats
- 293,019 hits
Top Posts
- How to access all types of server controls in ASP.Net using Javscript/JQuery OR Clear all server controls values using javascript or Jquery
- How to implement Cache mechanism in ASP.Net/C# using simple example OR What is Output Caching and Fragment Caching in ASP.Net/C#
- How to implement CAPTCHA image validation in ASP.Net/C# OR CAPTCHA image validator Sample in ASP.Net/C#
- How to implement SQL Bulk Copy in SQL Server OR Bulk insert into SQL Server using SQL BulkCopy
- How to merge two data tables in ASP.Net/C# OR Merge 2 DataTables and store in a new one in ASP.Net/C#
- How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net
- How to create breadcrumbs in ASP.Net/C# OR Show Navigations for each pages in ASP.Net/C# OR How to implement Sitemap in ASP.Net
- How to create a drag able and resizable div in ASP.Net/C# OR How to make a div Dragable and Resizable using Jquery in ASP.Net/C#
- How to implement BalloonPopupExtender in ASP.Net/C# OR Ballon Popup Extender Sample in ASP.Net/C#
- How to create always visible div using Ajax/ Always visible div in ASP.Net using Ajax
Recent Posts
- How to access all types of server controls in ASP.Net using Javscript/JQuery OR Clear all server controls values using javascript or Jquery
- How to implement Cache mechanism in ASP.Net/C# using simple example OR What is Output Caching and Fragment Caching in ASP.Net/C#
- How to implement CAPTCHA image validation in ASP.Net/C# OR CAPTCHA image validator Sample in ASP.Net/C#
- How to implement SQL Bulk Copy in SQL Server OR Bulk insert into SQL Server using SQL BulkCopy
- How to merge two data tables in ASP.Net/C# OR Merge 2 DataTables and store in a new one in ASP.Net/C#
- How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net
- How to create breadcrumbs in ASP.Net/C# OR Show Navigations for each pages in ASP.Net/C# OR How to implement Sitemap in ASP.Net
- How to create a drag able and resizable div in ASP.Net/C# OR How to make a div Dragable and Resizable using Jquery in ASP.Net/C#
- How to implement BalloonPopupExtender in ASP.Net/C# OR Ballon Popup Extender Sample in ASP.Net/C#
- How to create always visible div using Ajax/ Always visible div in ASP.Net using Ajax
- Example for All Types of SQL JOIN (Inner Join, Cross Join, Outer Join, Self Join)
- How to Create a Data Table Dynamically with sample data and Bind to Grid/Create datatable with sample data.
Archives
- June 2013 (1)
- May 2013 (2)
- October 2012 (4)
- September 2012 (6)
- July 2012 (4)
- June 2012 (1)
- May 2012 (1)
- March 2012 (2)
- February 2012 (2)
- January 2012 (1)
- October 2011 (2)
- September 2011 (5)
- August 2011 (1)
- July 2011 (6)
- June 2011 (18)
- May 2011 (14)
Recent Comments