Horizontal orientation in Repeater control - asp.net

Question

I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?

Answer 1

assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.

Answer 2

If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"

Answer 3

how to display horizontal line after each row
<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

You can build your ItemTemplate like:
<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>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>

Answer 5

Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.

Answer 6

Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<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>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
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";
}
}