Advertisements
Home > Csharp > How to implement Collapsible panel inside listview control for MENU in asp.net/C#

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();
Advertisements
  1. bindhya
    November 26, 2011 at 9:21 am

    Can u plz mail me the sourcecode to bindhya.c@ebirdonline.com

  2. bindhya
    December 13, 2011 at 6:40 am

    Can u plz mail me the sourcecode to bindhya.c@ebirdonline.com / bindhyac@gmail.com

  3. tanveer
    December 31, 2011 at 7:45 am

    can you please send me complete source code

  4. December 31, 2011 at 8:00 am

    You can use same code that i post above. If you need more details, Please post your email id.

  5. December 31, 2011 at 10:31 am

    can you please send me the ful code on tanv_22@yahoo.com

  6. tanveer
    December 31, 2011 at 10:35 am

    Thank you so much for your reply, but i stck here.

    what is this “eMallBL” and “eMallEntity”

  7. Craig
    February 2, 2012 at 8:34 pm

    Could you please email me the source code as well. My email address is crosenh@optonline.net –Thank you.

  8. Manish
    February 6, 2012 at 12:16 pm

    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

  9. Banwari Kumawat
    July 29, 2012 at 12:54 pm

    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.

  10. July 29, 2012 at 6:22 pm

    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.

  11. shahanaj
    September 13, 2012 at 2:10 pm

    Your posit is good .But incomplete .pls mail me full source code.Thanks advance.

  12. September 13, 2012 at 7:35 pm

    Hi Shahanaj,

    Thanks for your comment. Please share your email id.

  13. jo
    February 12, 2013 at 7:35 pm

    Your posit is good .But incomplete .plZ mail me full source code.Thanks advance

    the_last_moment7@yahoo.com

  14. February 12, 2013 at 8:29 pm

    Hi jo,
    I will post full source code here itself ASAP.

  15. Vince
    March 23, 2013 at 1:23 am

    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

  16. Casandra
    March 6, 2014 at 11:13 pm

    Please email the source code to casandra_7788@yahoo.ca. Your code is good starting point.

  17. nihil
    March 19, 2015 at 5:43 pm

    can u please email me code on nihil.khagram@gmail.com

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: