Click here to Skip to main content
15,921,660 members
Articles / Web Development / ASP.NET

Displaying Collapisble Data in GridView

Rate me:
Please Sign up or sign in to vote.
4.71/5 (5 votes)
26 Oct 2007CPOL 46.6K   1K   80   6
This article demonstrates how we can show some details in a collapsible manner in a GridView. Sometimes it is required to show the description for an item but only if the user requested to show it.....


The code is intended to make a high performance GridView that has minimum postback operations, as well as has a collapsible client-side feature to show additional details for a row.


Some times, we are required to show some additional details below a GridView row, like an item description or an image below an item detail row.

Screenshot - Image1.jpg

We click on the Plus image to see the description for the item.

Screenshot - Image2.jpg

The detail for the item is displayed below the row.

Using the code

Download the source code, extract and open the website, and enjoy!

<!--GridView Block: -->

    <asp:GridView ID="gvItems" runat="server"
        BorderColor="#DEDFDE" BorderStyle="Solid" 
        BorderWidth="1px" CellPadding="4" 
        ForeColor="Black" GridLines="Vertical" 
        PageSize="1"  AutoGenerateColumns="False" 
        style="width:100%" DataSourceID="AccessDataSource1"
    <HeaderStyle BackColor="#FF9900" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="White" ForeColor="#333333" />        
    <AlternatingRowStyle BackColor="#F2F2F2" ForeColor="#333333" />
    <PagerSettings Position="Top" />
    <PagerStyle BackColor="#E4E4E4" ForeColor="#265CC0" Borderwidth="0px"/>    
        <asp:TemplateField HeaderText="Item Details">
            <img src="plus.gif" alt="click here to see details" 
                 onclick='ToggleDisplay(<%# Eval("id") %>);' 
                 style="cursor:pointer;height:15px;width:15px" />                 
         <p><%# Eval("ItemId") %> </p>
         <a href="Item.aspx?id=<%# Eval("ItemId") %>"><%# Eval("ItemName") %></a>
         <%# Eval("price") %>
         <td colspan="4">
                <div id='coldiv<%# Eval("id") %>' style="display:none;">
                <asp:Literal runat="server" ID="ltrl" 
                     Text='<%# Eval("ItemDesc") %>'></asp:Literal>
Java script:
<script language="JavaScript">
  function ToggleDisplay(id)
    var elem = document.getElementById('coldiv' + id);
    if (elem) 
          if ( != 'block') 
      { = 'block'; = 'visible';
      { = 'none'; = 'hidden';

Additional information

The same concept can be used with a Repeater control too. But with GridView, we can get many more abilities easily - that is why, though with a little slower speed, developers use the GridView for most developmental requirements.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

Questionitem page Pin
Keith Pow19-Jun-13 4:41
Keith Pow19-Jun-13 4:41 
GeneralMy vote of 5 Pin
vijaymmer25-Sep-10 0:01
vijaymmer25-Sep-10 0:01 
Generalvery good Pin
itcrazyman14-Apr-09 20:19
itcrazyman14-Apr-09 20:19 
GeneralDisplaying Collapisble Data in GridView Pin
theofanis9-Sep-08 3:45
theofanis9-Sep-08 3:45 
GeneralRe: Displaying Collapisble Data in GridView Pin
EliottA25-Mar-09 5:20
EliottA25-Mar-09 5:20 
Generalvery nice Pin
SeaWater8-Jul-08 5:43
SeaWater8-Jul-08 5:43 
very useful article and code.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.