Repeater mode horizontal orientation

Question

I have a Repeater control used to display uploaded images.

How can I show the images in the repeater horizontally? How can I sign the caption at the bottom of the image?

Answer 1

Assuming you have code like this:

<asp:repeater ...>

</asp:repeater>

just enter "<itemtemplate>"with some HTML code that you want to look like. nothing special about showing horizontal or vertical value, it just depends on what html tags you use inside element templates.

Answer 2

, DataList RepeatDirection="Horizontal"

Answer 3

<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal"  onitemdatabound="dlstmovie_ItemDataBound" >
    <ItemTemplate>
        <asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
            <img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
        </asp:LinkButton>
        <br />

        <asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
        <asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>

    </ItemTemplate>
    <FooterTemplate>
        <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
        </asp:Label>
    </FooterTemplate>
</asp:DataList>

Answer 4

, , .. div, float:left; , DataList.

Answer 5

ItemTemplate :

<ItemTemplate>
    <div class="floating">
        <img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
        <span><%# /* Code to Eval your image caption from datasource */ %></span>
    </div>
</ItemTemplate>

.floating div:

.floating { float:left; overflow:hidden; }
.floating img { display: block; }

div , reset .

<div style="clear:both;"></div>

Answer 6

@numenor , , html . , , , html.

<table width="<%= this.TotalWidth %>">
    <tr>
        <asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
            <ItemTemplate>
                <td class="itemWidth">
                     Your item goes here and will be 
                     displayed horizontally as a column.
                </td>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
</table>

, TotalWidth, , , , . CSS .

protected string TotalWidth
{
    get
    {
        //In this example this.Madibu.Materiales is the datasource for the Repeater,
        //so this.Madibu.Materiales.Count is the column count for your table.
        //75 must be equal to the width defined in CSS class 'itemWidth'
        return (this.Madibu.Materiales.Count * 75).ToString() + "px";
    }
}