How To Render A Data Table With Multiple Rowspan Columns With Listview

I need to display data from a database in a html table. I am currently using a ListView control. I want the final HTML table to render something like the following, where some rows

Solution 1:

Not too elegant solution for ListView. The main idea is to use Repeater inside the ListView and bind all the sub-data(I mean data from the third column in your example) except the first record to it.

<asp:ListViewrunat="server"ID="lstData"><LayoutTemplate><table><asp:PlaceHolderrunat="server"ID="itemPlaceholder" /></table></LayoutTemplate><ItemTemplate><tr><td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("FirstName") %>
            </td><td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("LastName") %>
            </td><td>
                <%# GetFirst((IEnumerable<string>)Eval("Data")) %>
            </td><td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("Country") %>
            </td></tr><asp:Repeaterrunat="server"DataSource=<%# GetRest((IEnumerable<string>)Eval("Data")) %>>
            <ItemTemplate><tr><td>
                        <%# Container.DataItem %>
                    </td></tr></ItemTemplate></asp:Repeater></ItemTemplate></asp:ListView>

and code behind:

publicoverridevoidDataBind()
{
    var item1 = new { FirstName = "John", LastName = "Doe", 
        Data = new[] { "first", "second", "third" }, Country = "US" };
    var item2 = new { FirstName = "Jane", LastName = "Doe", 
        Data = newstring[] { }, Country = "CA" };
    var item3 = new { FirstName = "Joe", LastName = "Public", 
        Data = new[] { "first", "second", "third", "fourth" }, Country = "US" };

    lstData.DataSource = new[] { item1, item2, item3 };
    lstData.DataBind();
}

protectedstringGetRowspan(int length)
{
    if (length == 0)
        returnstring.Empty;
    elsereturnstring.Format("rowspan='{0}'", length);
}

protectedstringGetFirst(IEnumerable<string> data)
{
    return data.FirstOrDefault();
}

protectedIEnumerable<string> GetRest(IEnumerable<string> data)
{
    if (data.Any())
        return data.Skip(1);
    elsereturn Enumerable.Empty<string>();
}

this outputs data in the format you want.

But if the usage of ListView is not necessary you could take a look onto GridView. There is more elegant way to do this by using it - ASP.NET GridView RowSpan using RowCreated Event - How to add Table Dynamic RowSpan with GridView article.

Solution 2:

protectedoverridevoidRenderContents(HtmlTextWriter output)
{
 var builder = new StringBuilder();
 builder.Append("<table>");
 for(int i=0;i<dt1.rows.count;i++)
 {
     builder.Append("<tr>");
     builder.Append("<td>");
     builder.Append(dt1.rows[i].ToString());
     builder.Append("</td>");

     builder.Append("<td>");
     builder.Append(dt1.rows[i].ToString());
     builder.Append("</td>");
     builder.Append("</td>");

     builder.Append("<table>");
     builder.Append("<tr>");
    for(int j=0;i<dt2.rows.count;j++)
    {
       builder.Append("<td>");builder.Append(dt2.rows[j].ToString());
       builder.Append("</td>");
    }
    builder.Append("</tr>");
    builder.Append("</table>");
    builder.Append("</tr>");
}
builder.Append("</table>");
output.Write(builder.ToString());
}

assume that dt1 as table1 and dt2 as inner table ... so approach will help u out ...