Repeater with expand on table rows asp.net

Question

I am trying to use table rows with headers and all that and when the user clicks any of the rows the row should expand..

This works:

<asp:Repeater runat="server" ID="repeaterShowCases">
            <HeaderTemplate>
                <table class="table table-responsive">
                    <tr>
                        <th>Id</th>
                        <th>Date</th>
                        <th>Title</th>
                        <th>Assigned User</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <h1 class="click">
                            <asp:Label runat="server" ID="LabelId" Text='<%# DataBinder.Eval(Container.DataItem,"id").ToString() %>'></asp:Label>

                            <asp:Label runat="server" ID="lblCreatedDate" Text='<%# DataBinder.Eval(Container.DataItem,"CreatedDate").ToString() %>'></asp:Label>
                        </h1>

                        <div class="expand">
                            <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title").ToString() %>'></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"AssignedToUser").ToString() %>'></asp:Label>
                        </div>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>

But this dosent:

    <asp:Repeater runat="server" ID="repeaterShowCases">
                <HeaderTemplate>
                    <table class="table table-responsive">
                        <tr>
                            <th>Id</th>
                            <th>Date</th>
                            <th>Title</th>
                            <th>Assigned User</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                        <tr>
                    <h1 class="click">
                        <td>
                            <asp:Label runat="server" ID="LabelId" Text='<%# DataBinder.Eval(Container.DataItem,"id").ToString() %>'></asp:Label>
                        </td>
                        <td>
                            <asp:Label runat="server" ID="lblCreatedDate" Text='<%# DataBinder.Eval(Container.DataItem,"CreatedDate").ToString() %>'></asp:Label>
                        </td>
                    </h1>

                    <div class="expand">
                        <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title").ToString() %>'></asp:Label>
                        <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"AssignedToUser").ToString() %>'></asp:Label>
                    </div>
                </tr>               
 </ItemTemplate>
            </asp:Repeater>

I looks likte the table data kills the expand function..

Becasue i want it all look like a table and to get more information on a specific row the user can click it and the row expands with the info..

I know i dont have data to all of the header yet but this what im testing right now.

Answer 1

Here is the markup, with labels left out, of row from your second snippet:

<tr>
    <h1>
        <td></td>
        <td></td>
    </h1>
    <div></div>
</tr>

This is a wrong markup for a table. tr cannot have arbitrary tags as children, only td are valid there. It looks like this mixture breaks the way browser processes this table.

Your first try however is a valid markup, so you should consider following that approach. Or, if for some reason it does not work for you, your options are:

1. Get rid of tables and render everything in div's and h1's. Will require some effort to align properly, but will not have a limitation of tables in terms of markup.

2. Use colspans and rowspans, perhaps add alternating rows as needed.

Also, don't you need a footer template to close </table>?