locked
Repeater control - columns RRS feed

  • Question

  • User-1826049516 posted

    Hello,

    If I have a SQL dataset bound to a repeater control, can I lay it out in a set number of columns, in this example like this. Say I have 10 records:

    Record 1 | Record 2
    Record 3 | Record 4
    Record 5 | Record 6
    Record 7 | Record 8
    Record 9 | Record 10

    I am actually putting my SQL result sets into DataSets/DataTables, then binding them to the Repeater controls.

    I don't think I can use DataList as this renders as a table. I don't want a traditional table - I am using CSS tables:

    <asp:Repeater id="Absences_Repeater" runat="server">
    	<HeaderTemplate></HeaderTemplate>
    	<ItemTemplate>
    		<div class="table-row">
    			<div class="table-cell">
    				<img src="<%# String.Format("/images/person-status-{0}.png", DataBinder.Eval(Container.DataItem, "ABR_Status")) %>" alt="Status" />
    				<span><%# DataBinder.Eval(Container.DataItem, "ABR_Name") %></span>
    			</div>
    			<div class="table-cell">
    				<img src="<%# String.Format("/images/person-status-{0}.png", DataBinder.Eval(Container.DataItem, "ABR_Status")) %>" alt="Status" />
    				<span><%# DataBinder.Eval(Container.DataItem, "ABR_Name") %></span>
    			</div>
    		</div>
    	</ItemTemplate>
    	<FooterTemplate>
    		<p class="hidden" id="NoData_Placeholder" runat="server">No upcoming absences were found for this person.</p>
    	</FooterTemplate>
    </asp:Repeater>
    

    Thanks

    Sunday, March 4, 2018 3:33 PM

Answers

  • User-1838255255 posted

    Hi ldoodle,

    According to your description and needs, i make a sample through your needs, please check:

    <head runat="server">
        <title></title>
        <style>
            .table-cell {
                float: left;
            }
    
            .newcol {
                margin-left: 40px;
            }
    
            .newcolone {
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="rptCustomers" runat="server">
                    <HeaderTemplate>
                        <table cellspacing="0" rules="all" border="1">
                            <tr>
                                <th scope="col" style="width: 80px">Column1
                                </th>
                                <th scope="col" style="width: 120px">Column2
                                </th>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <div class="table-row">
                            <div class="table-cell newcolone">
                                <asp:Label ID="Column1" runat="server" Text='<%# Eval("ColumnOne") %>' />
                            </div>
                            <div class="table-cell newcol">
                                <asp:Label ID="Column2" runat="server" Text='<%# Eval("ColumnTwo") %>' />
                            </div>
                            <br />
                        </div>
                    </ItemTemplate>
                    <FooterTemplate>
                        <p class="hidden" id="NoData_Placeholder" runat="server">No upcoming absences were found for this person.</p>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>
    protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("ColumnOne", typeof(string));
                dt.Columns.Add("ColumnTwo", typeof(string));
                dt.Rows.Add("Record 1", "Record 2");
                dt.Rows.Add("Record 3", "Record 4");
                dt.Rows.Add("Record 5", "Record 6");
                dt.Rows.Add("Record 7", "Record 8");
                dt.Rows.Add("Record 9", "Record 10");
                rptCustomers.DataSource = dt;
                rptCustomers.DataBind();
            }

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 5, 2018 9:38 AM