Search code examples
asp.netrepeater

Table layout in repeater control


I am trying to get the Table shown in the image as layout in a repeater control.Since i am newbie to it Can someplease guide me on this. The section below Customer number is the only thing that should repeat vertially and I want only two repeats (i.e two item details per page ) on each page

Thank You

enter image description here

<asp:Repeater ID="RepeaterVersionsForPie" runat="server">

            <HeaderTemplate>
                <table id="VersionsTable">
            </HeaderTemplate>

            <ItemTemplate>
                <tr>
    <td class="style3">CustomerNumber</td>    
    <td class="style4">Test1:</td>    
    <td class="style5">Test2</td>    
    <td class="style7">Test3:</td>    
    <td class="style8">Test4:</td>    
  </tr>
  <tr>   
   <td class="style9"></td>    
   <td class="style10"></td>    
   <td class="style11"></td>    
   <td class="style12"></td>    
   <td class="style13"></td>
  </tr>    
            </ItemTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

Solution

  • <asp:Repeater ID="RepeaterVersionsForPie" runat="server">
        <HeaderTemplate>
            <table id="VersionsTable">
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td class="style3">CustomerNumber</td>    
                <td class="style4">Test1:</td>    
                <td class="style5">Test2</td>    
                <td class="style7">Test3:</td>    
                <td class="style8">Test4:</td>    
            </tr>
            <tr>   
                <td class="style9" colspan="5"></td>    
            </tr>
            <tr>
                <td>Item Type:</td>
                <td rowspan="3" colspan="4" valign="top">Photo</td>
            </tr>
            <tr>
                <td>Item Number:</td>    
            </tr>
            <tr>
                <td>Date:</td>    
            </tr>   
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    

    Here's a quick jsfiddle