Alternating Item Style

Question

I would actually love to have an AlternatingItemTemplate on a GridView, but all it offers is an AlternatingItemStyle. In my grid, each two column row (in a table layout), has an image in the first column, and a description in the second column. I would like to have the positioning of the image and description alternate on alternate rows.

How can I do this?

Answer 1

You will need to either handle the data binding event to try and determine if it is an item or alternating item, or switch to using a control that supports Item and AlternatingItem templates.

Answer 2

Here's one way:

ASP.NET:

<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound" />

ItemDataBound event:

public void Repeater1_ItemDataBound(Object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // e.Item is an alternating item
    }
    else
    {
    }
}

Answer 3

You might consider managing this with AlternatingItemStyle for fun.

Use 1 column or a repeater:

Item Template:

<div class="MyImage"><img src="" /></div>
<div class="MyDescription">Blah...Blah...</div>

CSS:

.MyItemStyle .MyImage {width:49%; float:left;}
.MyItemStyle .MyDescription {width:49%; float:right;}

.MyAltItemStyle .MyImage {width:49%; float:right;}
.MyAltItemStyle .MyDescription {width:49%; float:left;}

Apply to Gridview/Repeater:

ItemStyle = "MyItemStyle"
AlternatingItemStyle = "MyAltItemStyle"

This would let you change your mind without having to recode event handlers etc.

Answer 4

I'd think this would work:

 <asp:GridView>
    <Columns>
        <asp:TemplateColumn>
            <%# Container.DataItemIndex % 2 == 0 ? Eval("Image") : Eval("Desc") %>
        </asp:TemplateColumn>
        <asp:TemplateColumn>
            <%# Container.DataItemIndex % 2 == 0 ? Eval("Desc") : Eval("Image") %>
        </asp:TemplateColumn>
    </Columns>
 </asp:GridView>

Obviously, the Eval image would really need to be an img tag, or you could substitute some usercontrols, etc. The important bit is the Container.DataItemIndex % 2. You could even use that as a databind on visible.

 <asp:GridView>
    <Columns>
        <asp:TemplateColumn>
            <uc:Image Data='<%# Eval("Image") %>' 
              Visible='<%# Container.DataItemIndex % 2 == 0 %>' />
            <uc:Description Data='<%# Eval("Description") %>' 
              Visible='<%# Container.DataItemIndex % 2 != 0 %>' />
        </asp:TemplateColumn>
        <asp:TemplateColumn>
            <uc:Image Data='<%# Eval("Image") %>' 
              Visible='<%# Container.DataItemIndex % 2 != 0 %>' />
            <uc:Description Data='<%# Eval("Description") %>' 
              Visible='<%# Container.DataItemIndex % 2 == 0 %>' />
        </asp:TemplateColumn>
    </Columns>
 </asp:GridView>