Click here to Skip to main content
Click here to Skip to main content

Displaying Collapisble Data in GridView

, 26 Oct 2007
Rate this:
Please Sign up or sign in to vote.
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.....

Introduction

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.

Background

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!

<!--<span class="code-comment">GridView Block: --></span>

    <asp:GridView ID="gvItems" runat="server"
        BackColor="White" 
        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"/>    
     <Columns>
        <asp:TemplateField HeaderText="Item Details">
        <ItemTemplate>
         <table>
         <tr>
         <td>
            <img src="plus.gif" alt="click here to see details" 
                 onclick='ToggleDisplay(<%# Eval("id") %>);' 
                 style="cursor:pointer;height:15px;width:15px" />                 
         </td>         
         <td>
         <p><%# Eval("ItemId") %> </p>
         </td>
         <td>
         <a href="Item.aspx?id=<%# Eval("ItemId") %>"><%# Eval("ItemName") %></a>
         </td>
         <td>
         <%# Eval("price") %>
         </td>
         </tr>
         <tr>
         <td colspan="4">
                <div id='coldiv<%# Eval("id") %>' style="display:none;">
                <asp:Literal runat="server" ID="ltrl" 
                     Text='<%# Eval("ItemDesc") %>'></asp:Literal>
                </div> 
         </td> 
          </tr>
         </table>
         </ItemTemplate>
        </asp:TemplateField>     
     </Columns>    
    </asp:GridView>
Java script:
<script language="JavaScript">
  function ToggleDisplay(id)
  {
    var elem = document.getElementById('coldiv' + id);
    if (elem) 
    {
          if (elem.style.display != 'block') 
      {
        elem.style.display = 'block';
        elem.style.visibility = 'visible';
      } 
      else
      {
        elem.style.display = 'none';
        elem.style.visibility = 'hidden';
      }
    }
  }
</script>

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.

License

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

Share

About the Author

Dipak Riswadkar
Web Developer
India India
No Biography provided

Comments and Discussions

 
Questionitem page PinmemberKeith Pow19-Jun-13 4:41 
GeneralMy vote of 5 Pinmembervijaymmer25-Sep-10 0:01 
Generalvery good Pinmemberitcrazyman14-Apr-09 20:19 
GeneralDisplaying Collapisble Data in GridView Pinmembertheofanis9-Sep-08 3:45 
GeneralRe: Displaying Collapisble Data in GridView PinmemberEliottA25-Mar-09 5:20 
Generalvery nice PinmemberSeaWater8-Jul-08 5:43 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 26 Oct 2007
Article Copyright 2007 by Dipak Riswadkar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid