Displaying Collapisble Data in GridView

• Download source - 90.6 KB

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.

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

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"
        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.