locked
Repeater control - columns RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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