How To Create A Three Column Table In Asp.net Repeater

I would like to be able to use the ASP.Net Repeater control to create an HTML Table that has three columns and as many rows as necc. For example if the Data were to look like this

Solution 1:

Repeater is not the ideal control to do that. If you're using .NET 3.5 you should use ListView instead. Here's an example that does what you're asking for.

<asp:ListViewID="myListView"runat="server"DataSourceID="YOURDATASOURCE"GroupItemCount="3"><LayoutTemplate><table><tr><td><tableborder="0"cellpadding="5"><asp:PlaceHolderrunat="server"ID="groupPlaceHolder"></asp:PlaceHolder></table></td></tr></table></LayoutTemplate><GroupTemplate><tr><asp:PlaceHolderrunat="server"ID="itemPlaceHolder"></asp:PlaceHolder></tr></GroupTemplate><ItemTemplate><td>
         <%# Eval("FullName") %>
      </td></ItemTemplate></asp:ListView>

Solution 2:

It's better to use a DataList control intstead as it has the interesting properties RepeatColumns and RepeatDirection.

Solution 3:

<asp:Repeaterrunat="server"DataSourceID="testds"><HeaderTemplate><tableclass="items"></HeaderTemplate><ItemTemplate>
       <%# (Container.ItemIndex + 3) % 3 == 0 ? "<tr>" : string.Empty%>
           <td><imgsrc='/blablabla/<%# Eval("id") %>.jpg'alt="" /></td>
       <%# (Container.ItemIndex + 3) % 3 == 2 ? "</tr>" : string.Empty%>
   </ItemTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater>

Solution 4:

I am assuming you have all those name in 5 rows of data and you want to spread it across 3 columns in a repeater and not have 2 rows of data with 3 fields which would be straight forward. Based on my assumption your data is something like:

DataTable (or whatever your source is):

ID      Name
---------------
1       Bob
2       John
3       Joe
4       Mary
5       Mike

You can do it using a Repeater and a Literal with a little logic on the OnDataBinding event of the Literal.

First define your Repeater:

<asp:RepeaterID="repeater"runat="server"><HeaderTemplate><table></HeaderTemplate><ItemTemplate><asp:LiteralID="litItem"runat="server"OnDataBinding="litItem_DataBinding" /></ItemTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater>

Next you will need a constant for the total columns you want and two global variables to track the binding operation. Define them like so:

public partial class_YourPage : System.Web.UI.Page
{
    privateconstint _repeaterTotalColumns = 3;
    privateint _repeaterCount = 0;
    privateint _repeaterTotalBoundItems = 0;

Then you will need to implement the OnDataBinding to do all the custom work:

protectedvoidlitItem_DataBinding(object sender, System.EventArgs e)
{
    Literal lt = (Literal)(sender);
    _repeaterCount++;            
    if (_repeaterCount % _repeaterTotalColumns == 1)
    {
        lt.Text = "<tr>";
    }

    lt.Text += string.Format("<td>{0}</td>", Eval("Name").ToString());

    if (_repeaterCount == _repeaterTotalBoundItems)
    {
        // Last item so put in the extra <td> if requiredfor (int i = 0;
             i < (_repeaterTotalColumns - (_repeaterCount % _repeaterTotalColumns));
             i++)
        {
            lt.Text += "<td></td>";
        }
        lt.Text += "</tr>";
    }

    if (_repeaterCount % _repeaterTotalColumns == 0)
    {
        lt.Text += "</tr>";
    }
}

Then make sure when you bind your Repeater you are saving the total count:

 _repeaterTotalBoundItems = yourDataTable.Rows.Count;
 repeater.DataSource = yourDataTable;
 repeater.DataBind();

The output produced would be:

<table>    
<tr><td>Bob</td>
<td>John</td>
<td>Joe</td></tr>
<tr><td>Mary</td>
<td>Mike</td><td></td></tr>
</table>

You could probably improve the DataBinding code but I just rattled it off to give the basic premise of how to accomplish your goal. If the DataBinding needs to do a lot of string concat operations, you should probably switch to to using a StringBuilder and then just assign the Literal in the last operation.

Solution 5:

Or just use a div in the repeater and then solve the hight/width issues with CSS.