AbleCommerce Shopping Cart Software


http://forums.ablecommerce.com/

Include Add to Cart in a Datagrid

http://forums.ablecommerce.com/viewtopic.php?f=42&t=6823

Page 1 of 1

Include Add to Cart in a Datagrid

Posted: Fri Mar 21, 2008 6:03 am
by beveled
I need some help from someone more familiar with .NET in general. I created a new search page in table format, using DataGrid, but now I want to have an Add to Cart link in the furthest right column. Below is my code, in case anyone wants a simple table, and maybe someone will be kind enough to share code on how to add the user control.

From research done to date, it looks like I'll need to create the datagrid programmatically, rather than using this simpler method.

Thanks,

Sheldon

<asp:DataGrid ID="ProductList" runat="server" AutoGenerateColumns="False" BorderStyle="None" CellPadding="4" GridLines="None">
<Columns>
<asp:HyperLinkColumn DataTextField="Name" DataNavigateURLField="NavigateUrl" HeaderText="Name" />
<asp:BoundColumn DataField="Description" HeaderText="Description" />
<asp:BoundColumn DataField="Price" HeaderText="Price" DataFormatString="{0:C}" >
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Right"
Wrap="False" />
</asp:BoundColumn>
</Columns>
<AlternatingItemStyle BackColor="InactiveCaptionText" />
<HeaderStyle BackColor="GradientInactiveCaption" Font-Bold="True" />
</asp:DataGrid>

Posted: Sat Mar 22, 2008 9:49 am
by AbleMods
Take at look at the categorygridpage user controls. They leverage both programmatic gridview (or datalist) concept and implement add-to-cart functionality.

There is an add-to-cart user control that makes adding that particular functionality easier - it does have certain design expectations though so it takes a little study time.

Sounds like that's where you are headed with your customization.

Posted: Mon Mar 24, 2008 6:50 am
by beveled
Thanks Joe. I'm going to look into using datalist to build these tables instead of datagrid.

Thanks,

Sheldon

Posted: Mon Mar 24, 2008 6:59 am
by AbleMods
Hey, I didn't even know what a DataGrid was this time last year :wink:

Forget about "tables". Think in terms of repeating data in a consistent fashion.

GridView lets you repeat data in a fashion quite similar to HTML tables, with the ability to act upon each row of the data with tiggers and programming code. Generally GridView controls are used on a "recordset" but they can also be used on different sources of data.

Datalists are more simplistic and tend to work with a single "column". Think in terms of repeating the same single column from a table either across the page or down the page. Like the mailing labels on a sheet of paper, you can repeat the label vertically or repeat them across then down.

Both controls will work directly with a data source like the AC7 tables, or you can "create" a data source programmatically in the code and assign it to the controls.

Posted: Mon Mar 24, 2008 7:04 am
by beveled
Oh, it looks like I can use html tags <tr> and <td>

Posted: Mon Mar 24, 2008 7:09 am
by beveled
Generally GridView controls are used on a "recordset" but they can also be used on different sources of data.
I tried adding <uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /> to my datagrid as a bound column, but got an error message saying that wasn't in the table. I'd have to try it again to get the exact error message.

Thanks,

Sheldon

Posted: Mon Mar 24, 2008 8:30 am
by AbleMods
That's not enough information for me to be much help. If you post the entire code you're trying to do, I might be able to help more.

Posted: Mon Mar 24, 2008 8:34 am
by beveled
Looks like I'm getting it to work with the datalist and <tr><td> tags.

Appreciate your help.

Sheldon

Posted: Mon Mar 24, 2008 9:26 am
by beveled
Here's what I ended up with:

<asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left">
<ItemStyle HorizontalAlign="left" VerticalAlign="top" CssClass="tableNode" />
<ItemTemplate>
<tr>
<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
<td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /></div></td>
</tr>

</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#C4DAFC">
<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
<td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' bgcolor="#CCCCCC"/></div></td>
</tr>
</AlternatingItemTemplate>
</asp:DataList>

Next I'd like to figure out how to change the bgcolor of the user control for the alternating rows, but that's a detail.

Posted: Mon Mar 24, 2008 11:29 pm
by m_plugables
use AlternatingItemStyle-BackColor property for alternating item background color and ItemStyle-BackColor for others

Posted: Tue Mar 25, 2008 5:01 am
by beveled
Would you mind giving some more info? Does that go inside of the <uc tag, or maybe in the code behind page?

Thanks,

Sheldon

Posted: Tue Mar 25, 2008 11:20 pm
by m_plugables
place this info inside the UC tag in ascx file which contains the html. For example

Code: Select all

<asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left"
AlternatingItemStyle-BackColor="Chocolate" ItemStyle-BackColor="Yellow">
Similarly if you want to use some styles from css(casecadding style sheet) then you can specify the css style in the
ItemStyle-CssClass, AlternatingItemStyle-CssClass. For example you want to apply two differant styles on alternating rows like
color, font-family etc. Then first you should provide those styles in css file of current theme for example we have two classes
even and odd for alternating rows then the code using this will be like

Code: Select all

<asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left"
AlternatingItemStyle-CssClass="odd" ItemStyle-CssClass"even">

Posted: Wed Mar 26, 2008 5:42 am
by beveled
Thanks for the reply, but this did not produce the desired effect. It creates colored lines between each row.

Wish I could just say backcolor="#C4DAFC" inside of the <uc: tag in the <alternatingitemtemplate> section.

Thanks,

Sheldon

Posted: Wed Mar 26, 2008 6:05 am
by sohaib
You will have to play a bit with CSS to achieve the desired results. Once you are able to specify a css-class for a particular display item then you can control almost anything about that item.
I would suggest that you try a few things with CSS. For example create two classes 'MyOddClass' and 'MyEvenClass'. Set these these classes to the DataList control. The go on experimenting with the CSS for MyOddClass and MyEvenClass. You will not be disappointed.

setting background color in css

Code: Select all

background-color: #000080;

Posted: Wed Mar 26, 2008 7:21 am
by beveled
Thank you, but I'm looking for something more specific. Do you know where the style or backcolor attributes need to appear? Inside of the <alternatingitemtemplate> tags?

Sheldon

Posted: Wed Mar 26, 2008 8:15 am
by sohaib
They need to appear inside your CSS file.

If you are using something like this in ASPX file

Code: Select all

<asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left"
AlternatingItemStyle-CssClass="MyOddClass" ItemStyle-CssClass"MyEvenClass">
then you need to have 'MyOddClass' and 'MyEvenClass' in your style.css file of your currently active theme.

For example something like this in sytle.css should exist

Code: Select all

.MyOddClass 
{
   background-color: #DBDADA; 
   padding: 6px 2px 6px 6px; 
 }

.MyEvenClass
{
  background-color: #F5F5F5; 
  padding: 6px 2px 6px 6px;
}

Posted: Wed Mar 26, 2008 8:43 am
by beveled
I see thanks. Looks like that's what Mazhar was suggesting as a possible step #2 if step #1 didn't work. The issue that I have with this is that it did change the color, but in the wrong place.

I don't think this will change only the background color of my user control, for alternating items, when you consider the HTML tags in my code (used for creating a table-like style).

Thanks,

Sheldon

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 7:19 am
by beveled
With this code, I've attempted to add the AlternatingItemStyle-CssClass, but it is not taking effect. Is it possibly being overridden by the template?

Code: Select all

<asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
                OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left" 
                AlternatingItemStyle-CssClass="altitemclass">
                <ItemStyle HorizontalAlign="left" VerticalAlign="top" CssClass="tableNode" />
                <ItemTemplate>
                	<tr>
                    	<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
                        <td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
                    	<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
                    	<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
                    	<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /></div></td>
                    </tr>
                    
                </ItemTemplate>
                <AlternatingItemTemplate>
                	<tr bgcolor="#C4DAFC">
                    	<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
                        <td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
                    	<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
                    	<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
                    	<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' backcolor="#C4DAFC"/></div></td>
                    </tr>
                </AlternatingItemTemplate>
            </asp:DataList>

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 11:01 am
by sohaib
You are using AlternatingItemTemplate as well as AlternatingItemStyle-CssClass. I think your AlternatingItemStyle-CssClass settings are getting overridden by what you set in AlternatingItemTemplate.

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 11:50 am
by beveled
Could I trouble you to explain how to get that css code into the template?

Thanks,

Sheldon

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 12:43 pm
by sohaib
Can you remove AlternatingItemStyle-CssClass and try

Code: Select all

<AlternatingItemTemplate>
                   <tr class="altitemclass">
instead of

Code: Select all

<AlternatingItemTemplate>
                   <tr bgcolor="#C4DAFC">

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 2:11 pm
by beveled
Unfortunately, it had no effect. Any other ideas? Are there other css styles for the user control?

Code: Select all

 <asp:DataList ID="ProductList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"
                OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left" >
                <ItemStyle HorizontalAlign="left" VerticalAlign="top" CssClass="tableNode" />
                <ItemTemplate>
                	<tr>
                    	<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
                        <td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
                    	<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
                    	<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
                    	<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /></div></td>
                    </tr>
                    
                </ItemTemplate>
                <AlternatingItemTemplate>
                	<tr class="altitemclass">
                    	<td><asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder></td>
                        <td><asp:Label ID="ProductDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label></td>
                    	<td><uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' /></td>
                    	<td><asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>/<td>
                    	<td><div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' backcolor="#C4DAFC"/></div></td>
                    </tr>
                </AlternatingItemTemplate>
            </asp:DataList>

Re: Include Add to Cart in a Datagrid

Posted: Thu Jun 12, 2008 2:41 pm
by beveled
Ah, I found the issue. It was actually a graphic issue. The text was embedded in with the little shopping cart graphic, instead of using CSS to control it's properties.

If anyone wants a transparent "add to cart" graphic, I've attached it.

Beveled
All times are UTC-05:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/