Include Add to Cart in a Datagrid

[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>

[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.

[beveled]

Thanks Joe. I'm going to look into using datalist to build these tables instead of datagrid.

Thanks,

Sheldon

[AbleMods]

Hey, I didn't even know what a DataGrid was this time last year

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.

[beveled]

Oh, it looks like I can use html tags <tr> and <td>

[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

[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.

[beveled]

Looks like I'm getting it to work with the datalist and <tr><td> tags.

Appreciate your help.

Sheldon

[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.

[m_plugables]

use AlternatingItemStyle-BackColor property for alternating item background color and ItemStyle-BackColor for others

[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

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

[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

[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;

[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

[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;
}

[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

[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>

[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.

[beveled]

Could I trouble you to explain how to get that css code into the template?

Thanks,

Sheldon

[sohaib]

Can you remove AlternatingItemStyle-CssClass and try

Code: Select all

<AlternatingItemTemplate>
                   <tr class="altitemclass">

instead of

Code: Select all

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

[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>

[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