CODEWITHSUNDEEP
htmlasp.net.nethtml-tablerepeater
Maxim Gershkovich
Maxim Gershkovich

Reputation: 47199

Horizontal table using Repeater

I'm trying to get the following table using a repeater.

<table>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
</table>

But I can't work out how to do it. I have tried the following: 

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
    </HeaderTemplate>
        <ItemTemplate>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </ItemTemplate>
        <SeparatorTemplate>
            </tr><tr>
        </SeparatorTemplate>
        <AlternatingItemTemplate>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

And it would work great if the separator template was just applied at the end. So is the only way to get this pattern to work using individual tables for each dataitem? Or is there a way I accomplish my goal using one table?

Upvotes: 3

Views: 2962

Answers (5)

Stephan Bauer
Stephan Bauer

Reputation: 9249

You could try to write the header of the table in the HeaderTemplate and the rows in the ItemTemplate ;-)

Edit: First, I thought you want your titles in the header only and each line represents on data item. So I suggested the following code:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </tr>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Now, after your comment that you want to repeat the header above every single data item, I'd suggest the following:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
            </tr>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Note: The AlternatingItemTemplate that you used, represents a data item as well. By using this, you have the opportunity to display data items in different ways for every single item (normally you use different background colors for odd and even row numbers)

Edit 2: I hope, I unterstood the question correctly this time :-)

<asp:Repeater ID="rptGames" runat="server" OnItemCreated="rptGames_ItemCreated">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
            </tr>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
        </ItemTemplate>
        <AlernatingItemTemplate>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </AlernatingItemTemplate>

</asp:Repeater>

And in code behind (in rptGames_ItemCreated ), you could set the template of the footer depending on the count of your data items to </table> or </tr></table> Note: I haven't tested this

Upvotes: 4

Mrchief
Mrchief

Reputation: 76258

Try it like this:

Update: To repeat the headers (as per OP's comment), modify it like this (add more tds into each tr if you want more columns):

Note: Assuming that OP wants to style the headers differently, added a background color (just to give an idea).

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr style="background-color: whiteSmoke">
              <td>Description:</td>
              <td>Start time:</td>
              <td>End time:</td>
              <td>Game type:</td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
          </tr>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Upvotes: 1

zeroef
zeroef

Reputation: 1969

Try this out:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
          <tr>
              <th>Description:</th>
              <th>Start time:</th>
              <th>End time:</th>
              <th>Game type:</th>
              <th>Description:</th>
              <th>Start time:</th>
              <th>End time:</th>
              <th>Game type:</th>
            </tr>
          <tr> 
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
          </tr>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

The only issue I have with my example is that if there is not an even number of records, then the closing</tr> won't be printed and the table might get out of whack. I'm sure you can check for that in the code behind and add a hack for that. Maybe a literal that you can modify at run-time?

UPDATE

That code should produce the following results with six records:

<table>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
</table>

.

Upvotes: 0

Fadrian Sudaman
Fadrian Sudaman

Reputation: 6465

Move your table header row to the header and each of your item encapsulated in a tr

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </tr>
    </HeaderTemplate>
        <ItemTemplate>
           <tr>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
           </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Upvotes: 1

Chains
Chains

Reputation: 13167

You need to put the <tr> in your item template (and also the alternating item template) (not the header).

<ItemTemplate>
<tr>
   <td>Description:</td>
   <td>Start time:</td>
   <td>End time:</td>
   <td>Game type:</td>
</tr>
</ItemTemplate>

Then adjust your seperator template:

<SeparatorTemplate>
   <tr></tr>
</SeparatorTemplate>

Upvotes: 0

Related Questions