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.LoadFor Parent(thi s.Category Id, true);
foreach (Category category in allCategories)
{
ProductList.DataSource = ProductDataSource.NarrowSe arch("", 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:Locali ze></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="Horizonta l" Width="100%"
OnItemDataBound="ProductLi st_ItemDat aBound" 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:Place Holder>
<uc:ProductPrice ID="Price" runat="server" Product='<%#Container.Data Item%>' />
<asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:Place Holder>
<div id="QuantityPanel" runat="Server">
<asp:Label ID="QuantityLabel" runat="server" Text="Quantity:"></asp:Lab el> < asp:TextBo x ID="Quantity" runat="server" Text="" MaxLength="4" Columns="3"></asp:TextBox>
<asp:HiddenField ID="HiddenProductId" runat="server" Value='<%#Eval("ProductId" )%>' />
</div>
</ItemTemplate>
<SeparatorTemplate> < /Separator Template>
<SeparatorStyle CssClass="separator" Width="1" />
</asp:DataList><br clear="all" />
<div align="center">
<asp:Button ID="MultipleAddToBasketBut ton" runat="server" Text="Add to Basket" OnClick="MultipleAddToBask etButton_C lick" ToolTip="Fill in the quantity and Click this to add multiple products to baskt." />
</div>
</div>
</asp:PlaceHolder>
</ContentTemplate>
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.LoadFor
foreach (Category category in allCategories)
{
ProductList.DataSource = ProductDataSource.NarrowSe
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"></
</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="Horizonta
OnItemDataBound="ProductLi
<ItemStyle HorizontalAlign="center" VerticalAlign="middle" Width="33%" CssClass="tableNode" />
<ItemTemplate>
<asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:Place
<uc:ProductPrice ID="Price" runat="server" Product='<%#Container.Data
<asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:Place
<div id="QuantityPanel" runat="Server">
<asp:Label ID="QuantityLabel" runat="server" Text="Quantity:"></asp:Lab
<asp:HiddenField ID="HiddenProductId" runat="server" Value='<%#Eval("ProductId"
</div>
</ItemTemplate>
<SeparatorTemplate> <
<SeparatorStyle CssClass="separator" Width="1" />
</asp:DataList><br clear="all" />
<div align="center">
<asp:Button ID="MultipleAddToBasketBut
</div>
</div>
</asp:PlaceHolder>
</ContentTemplate>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.