Link to home
Start Free TrialLog in
Avatar of jmestep
jmestep

asked on

Displaying products with category grouping in DataList

I am trying to display a list of products under each subcategory on a main category page of an ecommerce app. The app uses the DataList control because it needs to be multiple columns. The page was originally written to show a subcategory repeater control with a list of subcategory links, but will all the products for all those subcategories displayed in grid like format underneath. I am trying to change it so that it will be like this, only with 3 columns for product display.
Main Category
SubCategory 1
Product 1     Product 2   Product 3

SubCategory 2
Product 1     Product 2   Product 3
and so on.
I need to leave some of the page code alone when it gets to the grid display pf products, but just want that to be repeated for each category.

Here is what I have so far:
 protected void BindSubCategories()
    {
        CategoryCollection allCategories = CategoryDataSource.LoadForParent(this.CategoryId, true);
        foreach (Category category in allCategories)      
        {
                ProductList.DataSource = ProductDataSource.NarrowSearch("", category.CategoryId, 0, 0, 0, "");
                ProductList.DataBind();
        }
    }


----   this.CategoryId is the main category
category.CategoryId is for each sub category

Later on the code  has already in it for subcategories:
public class SubCategoryData
    {
        private int _CategoryId;
        private string _Name;
        private int _ProductCount;
        private string _NavigateUrl;
        public int CategoryId { get { return _CategoryId; } }
        public string Name { get { return _Name; } }
        public int ProductCount { get { return _ProductCount; } }
        public string NavigateUrl { get { return _NavigateUrl; } }
        public SubCategoryData(int categoryId, string name, string navigateUrl, int productCount)
        {
            _CategoryId = categoryId;
           _Name = name;
            _NavigateUrl = navigateUrl;
            _ProductCount = productCount;
        }
    }

How do I get the grid to repeat under a label for each subcategory?

Here is how it is displayed in the .ascx control- I've added the label for SubCategoryName

<ContentTemplate>
        <asp:PlaceHolder ID="CategoryHeaderPanel" runat="server" EnableViewState="false">
            <uc:CategoryBreadCrumbs id="CategoryBreadCrumbs1" runat="server" HideLastNode="True" />
            <div class="pageHeader">
                <h1><asp:Localize ID="Caption" runat="server" EnableViewState="False"></asp:Localize></h1>
            </div>
            </asp:PlaceHolder>
            <asp:PlaceHolder ID="SubCategoryPanel" runat="server" EnableViewState="false">
        <!-- Top Bar -->
        <asp:Label ID="SubCategoryName" runat="server"></asp:Label>
        <div class="catalogWrapper">
            <asp:DataList ID="ProductList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%"
                OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="true" HorizontalAlign="left">
                <ItemStyle HorizontalAlign="center" VerticalAlign="middle" Width="33%" CssClass="tableNode" />
                <ItemTemplate>
                    <asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
                    <uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' />
                    <asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
                    <div id="QuantityPanel" runat="Server">
                        <asp:Label ID="QuantityLabel" runat="server" Text="Quantity:"></asp:Label>&nbsp;<asp:TextBox ID="Quantity" runat="server" Text="" MaxLength="4" Columns="3"></asp:TextBox>
                        <asp:HiddenField ID="HiddenProductId" runat="server" Value='<%#Eval("ProductId")%>' />
                    </div>
                </ItemTemplate>
                <SeparatorTemplate>&nbsp;</SeparatorTemplate>
                <SeparatorStyle CssClass="separator" Width="1" />                
            </asp:DataList><br clear="all" />
            <div align="center">
                <asp:Button ID="MultipleAddToBasketButton" runat="server" Text="Add to Basket" OnClick="MultipleAddToBasketButton_Click" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." />      
            </div>
       </div>
       </asp:PlaceHolder>      
    </ContentTemplate>
ASKER CERTIFIED SOLUTION
Avatar of jmestep
jmestep

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial