Posts Tagged ‘Dynamic Menu Control using Listview’

Listview inside another Listview Conrol in ASP.Net,C#

June 14, 2011 14 comments

We have already discussed about how can implement a ListView control for the shopping site in ASP.Net,C#. As we know ListView controls repeated controls inside it upto the data count that we bound to ListView Control. In some scenario we need to dynamically repeated controls inside another repeated controls.

Dynamic menu using ListView inside another ListView Control in ASP.

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.

<asp:ListView runat="server" ID="RightMenuItems" 
<asp:PlaceHolder runat="server" ID="PlaceHolder2" />
<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:ListView runat="server" ID="subMenu" 
DataSource='<%# Eval("subCategories") %>'
    <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" />
            <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") %>' />

How to create structured data for Listview inside another ListView 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());
category.subCategories = subCategories;
RightMenuItems.DataSource = categories;
%d bloggers like this: