Displaying Collapisble Data in GridView
4.71/5 (5 votes)
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.
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.