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.

When you're typing up a question, please look at the preview before you click "post". Your code was a little...tough to read =) Otherwise, good question though. — Josh Darnell, Dec 28 '11 at 21:09

Cosmin Onea · Accepted Answer · 2011-12-28T21:25:32.113

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.

Went through the article... looks more like a paging technique. I need load all the items but make it collapsible/expandable.hide the cells initially and then the user can request to display the rest of the elements. any other way you know of? — karry, Dec 28 '11 at 20:57
that was a good suggestion. It works without too much fuss! Appreciate the help! — karry, Dec 29 '11 at 15:16

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

1 Answers1