How can I make ASP 'datalist' cells expandable/collapsible?

Question

I have a asp DataList that gets populated by a DataTable.

<asp:PlaceHolder ID="ph3" runat="server">
    <asp:DataList ID="dlspec" runat="server" GridLines="Vertical" OnItemDataBound="dlspec_ItemDataBound">
        <FooterStyle BackColor="#CCCCCC" />
        <AlternatingItemStyle CssClass="alt-grey" />
        <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <ItemTemplate>
            <table width="320px">
                <tr>
                    <td class="leftcol">
                        <asp:Label ID="lblDimension" runat="server" Text='<%# Eval("Dimension") %>'></asp:Label>:
                    </td>
                    <td class="ProductDetailData">
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Attribute") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList> 
</asp:placeholder>

The problem is that I only need to display the first 5 elements in the data list and I need to hide the rest of the cells and make them "expandable" on request. How can I achieve this within the DataList control? I know there are JQuery plugins that i can use against a particular "div" tag to achieve this but I dont know how i can do this within a "DataList Control".

Help needed soon on this.. Appreciate all your valuable advice.

Answer 1

What you need is pagination. Here is an article that shows you how to get it done.

Update: For doing that client side with jQuery have a look here. Basically add a class to the table in the ItemTemplate and a Show more link and add the javascript code somewhere in the page.

Adding the jQuery script here(assuming row is your item class and showMore is the link that shows more items, in this case all of them to keep it simple):

$(function() {
    $(".row").slice(2).hide();

    $("#showMore").click(function() {
        $(".row").show();
    });
});

You can further play with the slice() function to add more interesting behaviour.

Please note that if your page is slow the users will see the whole table and when the page is done loading most of the rows in the list will disappear. To avoid that execute the javascript right after you render the datalist.