Using Repeaters to generate columns in HTML Table

Question

I need to display the results of two separate queries as side-by-side columns in the same html table. Each of the two data sets comes from a stored procedure via an ASP.NET SqlDataSource, and they each return the same number of rows. I would like the output to look like this:

 <table>
   <tr>
    <td>Row 1 from Stored Procedure 1</td>
    <td>Row 1 from Stored Procedure 2</td>
   </tr>
   <tr>
    <td>Row 2 from Stored Procedure 1</td>
    <td>Row 2 from Stored Procedure 2</td>
   </tr>
   ...
   <tr>
    <td>Row n from Stored Procedure 1</td>
    <td>Row n from Stored Procedure 2</td>
   </tr>
 </table>

Is it possible to accomplish this within a single ASP Repeater control using the "alternate row" functionality? Is it possible to execute two ASP Repeaters side-by-side? Is there another control that can accomplish this?

As I could not find a solution that I liked, I ended up putting two repeaters right next to each other and then using CSS to give them the appearance of a single table. — dneaster3
– dneaster3, Commented May 3, 2013 at 20:07

Jason P · Accepted Answer · 2013-04-10 23:34:32Z

1

I don't think it's possible with a table.

You could do something like this:

<div style="width:500px;float:left;">
    <asp:Repeater ID="Repeater1">
        <div style="width:100%;height:25px;"><asp:Label ID="RowDataLabel"></asp:Label></div>
    </asp:Repeater>
</div>
<div style="width:500px;float:left;">
    <asp:Repeater ID="Repeater2">
        <div style="width:100%;height:25px;"><asp:Label ID="RowDataLabel"></asp:Label></div>
    </asp:Repeater>
</div>

(I know I'm missing some markup)

How this actually renders would depend on how much and how similar the data in each row is.. one really long bit of data could throw off the whole layout. You could also use <ul>'s instead of <div>'s if you have trouble with the css.

Another option would be to get the two datasets in code, use LINQ to combine them, then render the single combined dataset to a grid or repeater.

answered Apr 10, 2013 at 23:34

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dneaster3 Over a year ago

I agree with your initial sentence, it does not look possible using just repeaters.

Shai Cohen Over a year ago

@dneaster3: Please take a look at my answer that uses repeaters. Does that fit your needs?

Shai Cohen · Accepted Answer · 2013-04-11 15:20:31Z

1

Since both DataTables have the same number of rows, you can set the first table as the datasource and access the values from the second table using e.Item.ItemIndex.

So this would be your Repeater markup:

<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
    <HeaderTemplate>
        <table border="1" >
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><asp:Label ID="lblFirst" runat="server" /></td>
            <td><asp:Label ID="lblSecond" runat="server" /></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

And you would handle the OnItemDataBound like so:

protected void rptData_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        ((Label)e.Item.FindControl("lblFirst")).Text = ((DataRowView)e.Item.DataItem)["Value"].ToString();
        ((Label)e.Item.FindControl("lblSecond")).Text = this.dtSecond.Rows[e.Item.ItemIndex]["Value"].ToString();
    }
}

Here is the rest of the code-behind so you have a complete working sample:

//PAGE-LEVEL VARIABLES
DataTable dtFirst = new DataTable();
DataTable dtSecond = new DataTable();

protected void Page_Load(object sender, EventArgs e)
{
    this.PopulateDatasources();
    this.rptData.DataSource = this.dtFirst;
    this.rptData.DataBind();
}

private void PopulateDatasources()
{
    DataRow row = null;
    dtFirst.Columns.Add(new DataColumn("Value"));
    dtSecond.Columns.Add(new DataColumn("Value"));
    row = dtFirst.NewRow();
    row["Value"] = "First - 01";
    dtFirst.Rows.Add(row);
    row = dtFirst.NewRow();
    row["Value"] = "First - 02";
    dtFirst.Rows.Add(row);
    row = dtSecond.NewRow();
    row["Value"] = "Second - 01";
    dtSecond.Rows.Add(row);
    row = dtSecond.NewRow();
    row["Value"] = "Second - 02";
    dtSecond.Rows.Add(row);
}

Let me know if this works for you.

answered Apr 11, 2013 at 15:20

Shai Cohen

6,2694 gold badges34 silver badges56 bronze badges

3 Comments

Shai Cohen Over a year ago

Have you had a chance to try this out?

dneaster3 Over a year ago

I like this solution for it's simplicity and readability. I'm not a fan of what you call "page level variables", but in this case it makes sense why you used them.

Shai Cohen Over a year ago

Just wondering, why are you not a fan of "page-level" variables?

user1965927 · Accepted Answer · 2013-04-11 00:24:30Z

Do you have any column where you can join them? If yes, what you could do is join the tables in on DataSet with DataRelation and the in page you can get the Childs or the parent using this relationship, following an example

code behind:

    protected void Page_Load(object sender, EventArgs e)
{
    DataSet ds1 = new DataSet();
    DataSet ds2 = new DataSet();

    DataTable dt1 = new DataTable("Table1");
    DataTable dt2 = new DataTable("Table2");

    DataSet ds = new DataSet("DataSet");

    dt1.Columns.Add("Eno", typeof(Int32));
    dt1.Columns.Add("Ename", typeof(String));
    dt1.Columns.Add("Salary", typeof(Double));
    dt1.Columns.Add("Deptno", typeof(Int32));
    dt1.PrimaryKey = new DataColumn[] { dt1.Columns["Eno"] };

    dt2.Columns.Add("Deptno", typeof(Int32));
    dt2.Columns.Add("Dname", typeof(String));
    dt2.PrimaryKey = new DataColumn[] { dt2.Columns["Deptno"] };

    ds1.Tables.Add(dt1);
    ds2.Tables.Add(dt2);

    // Loading data into dt1, dt2:

    object[] o1 = { 1, "dvs.kiran kumar", 50000.50, 10 };
    object[] o2 = { 2, "Raj", 4000.50, 20 };
    object[] o3 = { 3, "Gary", 10000.50, 30 };

    object[] c1 = { 10, "MFG" };
    object[] c2 = { 20, "EAS" };
    object[] c3 = { 30, "E&U" };
    object[] c4 = { 40, "PES" };

    dt2.Rows.Add(c1);
    dt2.Rows.Add(c2);
    dt2.Rows.Add(c3);
    dt2.Rows.Add(c4);

    dt1.Rows.Add(o1);
    dt1.Rows.Add(o2);
    dt1.Rows.Add(o3);

    DataSet dsJoined = new DataSet();
    dsJoined.Tables.Add(ds1.Tables[0].Copy());
    dsJoined.Tables.Add(ds2.Tables[0].Copy());
    DataRelation drel = new DataRelation("EquiJoin", dsJoined.Tables[1].Columns["Deptno"], dsJoined.Tables[0].Columns["Deptno"]);
    dsJoined.Relations.Add(drel);

    rptJoined.DataSource = dsJoined.Tables[1];
    rptJoined.DataBind();


}

markup:

        <asp:Repeater runat="server" ID="rptJoined">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>

            <tr>
                <td>
            Depto: <%# ((System.Data.DataRowView) Container.DataItem)["Dname"] %>
                </td>
            <asp:Repeater runat="server" ID="rptChild" DataSource='<%# ((System.Data.DataRowView) Container.DataItem).Row.GetChildRows("EquiJoin") %>'>
                <ItemTemplate>
                    <td>
                Ename: <%# ((System.Data.DataRow) Container.DataItem)["Ename"] %>
                    </td>
                </ItemTemplate>
            </asp:Repeater>
            <tr>

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

Another option is use the OnItemDataBound event from the repeater and get the values in the code behind.

Code behind:

    protected void rptJoined_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {

        DataRowView drv = (DataRowView)e.Item.DataItem;

        Literal ltrColumn1 = (Literal)e.Item.FindControl("ltrColumn1");
        Literal ltrColumn2 = (Literal)e.Item.FindControl("ltrColumn2");

        ltrColumn1.Text = drv["Dname"].ToString();

        var childs = drv.Row.GetChildRows("EquiJoin");

        if (childs.Count() > 0)
        {
            ltrColumn2.Text = childs[0]["Ename"].ToString();
        }
    }
}

markup:

<asp:Repeater runat="server" ID="rptJoined" OnItemDataBound="rptJoined_ItemDataBound">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Literal runat="server" ID="ltrColumn1" />
                </td>
                <td>
                    <asp:Literal runat="server" ID="ltrColumn2" />
                </td>
            <tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

Cheers

In answer to your first question, no, the two tables cannot be joined, or I would have done that with the stored procedure for a single repeater.
I'm impressed with the level of effort and detail in your response, but I would be hesitant to include a repeater inside of another repeater. Doing so requires either (a) the data table for the nested repeater to be created asynchronously, as you did with the Page_Load event method, or (b) a data event (query, stored procedure, etc) to occur each time the outer row databinds one of its rows.

Collectives™ on Stack Overflow

Using Repeaters to generate columns in HTML Table

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related