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();
Leave a Reply Cancel reply
Search other topic from here
Blog Stats
- 292,834 hits
Top Posts
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)
Can u plz mail me the sourcecode to bindhya.c@ebirdonline.com
Can u plz mail me the sourcecode to bindhya.c@ebirdonline.com / bindhyac@gmail.com
can you please send me complete source code
You can use same code that i post above. If you need more details, Please post your email id.
can you please send me the ful code on tanv_22@yahoo.com
Thank you so much for your reply, but i stck here.
what is this “eMallBL” and “eMallEntity”
Could you please email me the source code as well. My email address is crosenh@optonline.net –Thank you.
Your post is Good…!!
In my project i need same nested listview with collapsible panel extender in nested list.
I used your code, But i am not getting what is eMallEntity and eMallBL, How to bind the nested listview datasource , can you please explain it, Could you please email me the complete source code of it.
I really need it and its urget too for my project.
My Email ID is mishalmanish@rediffmail.com
Hello Everybody..
This post is useful but it is not completely described.If anybody have complete code please forward it to me at kumawat.ban@gmail.com. I will be thankful for the same. Its urgent please do favour me.
Hi Banwari Kumawat,
Using above post, you can implement all features described in the post. Did you try with above post? Did you get any error? Please describe the error, then I will give the solution.
Your posit is good .But incomplete .pls mail me full source code.Thanks advance.
Hi Shahanaj,
Thanks for your comment. Please share your email id.
Your posit is good .But incomplete .plZ mail me full source code.Thanks advance
the_last_moment7@yahoo.com
Hi jo,
I will post full source code here itself ASAP.
Thank you for that code! Really help, but I also need the whole code. There is a few things I don’t figure…
My email is vinny_bouli@hotmail.com
Thx
Please email the source code to casandra_7788@yahoo.ca. Your code is good starting point.
can u please email me code on nihil.khagram@gmail.com
please mail me full code varsha.sinyal@gmail.com