Advertisements
Home > DotNet > Listview inside another Listview Conrol in ASP.Net,C#

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


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" 
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>
</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>

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());
    subCategories.Add(subCategory);
}
}
category.subCategories = subCategories;
categories.Add(category);
}
RightMenuItems.DataSource = categories;
RightMenuItems.DataBind();
Advertisements
  1. Ravikumar
    August 8, 2011 at 9:03 am

    Hi,
    I am Ravi, using same thing in my project but inside that i am using Collapsible panel Extender. When i click on specific row to expand then its showing all the rows with expanded data. I kindly need help regarding to expand of the specific row data. And i need only onen row data should be expand on click of specific row in listview.
    Please kindly help me regarding this issue.

  2. August 10, 2011 at 4:22 am

    Hi Ravi,

    We can implement collapsible panel extender for each inner listview control as per your requirement.

    You can see the implemented version here http://www.supershope.com/products.aspx

    For implement this, please follow the steps.

    In the codes mentioned in main post, please include ajax collapsible panel as below.

    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”

    It should be inside the layout template of the second listview control.
    Please try with this, If you are not able to do it pleasee let me know, then I will post full code

  3. Ravikumar
    August 10, 2011 at 7:39 am

    Hi,
    Thank you for helping me. I tried the same but its not working. same problem, opening more than one row at a time. I ll attach my code and please rectify me regarding this issue.

    May i know your name please?

    Below is the Inline Code of the page:

    Tender Name
    Customer Name
    Pending With
    Tender Issue Date
    Tender Submit Date
    Tender Manager
    Number of Days Left
    Status

    <asp:HiddenField id="HiddenField2" runat="server" Value='’ />
    <asp:LinkButton ID="LinkButton3" runat="server" Text='’ Enabled=”false” CommandArgument=” >

    Role
    User Name
    Start Date
    End Date
    Actual End Date
    CheckList
    Status

    <%– <asp:HiddenField id="hdnrole" runat="server" Value='’ /> –%>
    <asp:LinkButton ID="Lnkrole" runat="server" Text='’ CommandArgument=” >

    And code behind for the above nested listview:

    public void BindDashboard(string _bigbid)
    {
    ObjEtenderView.OPERATION = “GETMAINTENDERINFO”;
    ObjEtenderView.TFBIGBNAME = _bigbid;
    ObjEtenderView.TENDRMANAGERUSERID = Session[“TernderManager”].ToString();
    DataTable _dtmain = ObjEtenderView.SaveTenderInfo();
    if (_dtmain.Rows.Count > 0)
    {
    lstMain.DataSource = _dtmain;
    lstMain.DataBind();
    }

    }

    protected void lstMain_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
    ListView lstchildview = (ListView)e.Item.FindControl(“lstChild”);
    HiddenField _hdnfld = (HiddenField)e.Item.FindControl(“HiddenField2”);
    if (_hdnfld.Value != null)
    {
    ObjEtenderView.TENDERID = Convert.ToInt32(_hdnfld.Value);
    ObjEtenderView.OPERATION = “GETCHILDDATA”;
    DataTable _dtchild = ObjEtenderView.SaveTenderInfo();
    if (_dtchild.Rows.Count > 0)
    {
    lstchildview.DataSource = _dtchild;
    lstchildview.DataBind();
    }

    }
    }

  4. Ravikumar
    August 10, 2011 at 7:41 am

    Tender Name
    Customer Name
    Pending With
    Tender Issue Date
    Tender Submit Date
    Tender Manager
    Number of Days Left
    Status

    <asp:HiddenField id="HiddenField2" runat="server" Value='’ />
    <asp:LinkButton ID="LinkButton3" runat="server" Text='’ Enabled=”false” CommandArgument=” >

    Role
    User Name
    Start Date
    End Date
    Actual End Date
    CheckList
    Status

    <%– <asp:HiddenField id="hdnrole" runat="server" Value='’ /> –%>
    <asp:LinkButton ID="Lnkrole" runat="server" Text='’ CommandArgument=” >

  5. Ravikumar
    August 10, 2011 at 7:44 am

    Sorry i couldn’t paste my inline code here. If u don’t mind can u put full code for the nested listview?

    Thanks.

  6. Ravikumar
    August 10, 2011 at 1:48 pm

    Hi,
    I got it. i Missed the panel. Thank you very much.
    Be in touch:):):)

  7. August 11, 2011 at 4:43 am

    Ok.. You are Welcom Ravi Kumar ..

  8. Ravikumar
    August 11, 2011 at 12:30 pm

    Hi,
    I need some help regarding the Update Panel. I am using update panel in page and binding the data in list view control. In row bind i have a button which will help to open Modal Popup and i need to load data in the modal popup.
    The problem is that i could not load data in modal pop extender when i ll use update panel.
    Can i know what would be the problem and how to resolve it?

    Thank you.

  9. August 12, 2011 at 1:16 am

    Hi Ravi,

    We can load data in modal popup extender when a row click event in the listview. The exact situation is handled in http://www.supershope.com/products.aspx (when you click add to cart button near to the each item). I think this is the very same scenario that you discussed.
    Please note that this modal popup extender and listview control are will be in the same update panel. If it is in different update panel we can mention which update panel have to update when click a row in listvie.
    ie, if we are using two update panels upListView and upModalPopup, we have to call upModalPopup.update() when click on the listview row.
    Please check it and let me know if you have more problems. if you post particular code snippet. it will be easy to identify the issues.

    thanks


  10. Ravikumar
    August 12, 2011 at 5:06 am

    Hi,
    Thank you for your help. I tried in all way but i could not load the value especially when i use update panel. How can i post my code here?

    Thanks.

  11. Ravikumar
    August 19, 2011 at 5:46 am

    Hi,
    I am waiting for your earliest response. And have you tried out regarding this issue?
    How to load data in modalpop when we use updatepanel.

    Awaiting for your response.
    Thank you in advance.

  12. Ankit Singh
    January 9, 2012 at 7:39 am

    Hi,

    I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of Nested Listview in Asp.Net and it helped me a lot. Thanks for sharing with us. I had found another nice post with wonderful explanation on Asp.Net Nested ListeView, for more details of that post link, check out this link……
    http://mindstick.com/Articles/f05ac0cf-404e-436d-bed0-9fefdb4e0dee/?Nested%20ListView%20in%20Asp.Net

    Thank you very much!

  13. venkat
    July 26, 2013 at 1:02 pm

    how to give link button click event listview within listview

  1. August 19, 2011 at 4:29 am

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: