RadGrid for ASP .NET version |
4.6.2 and later
|
RadControls for ASP .NET AJAX version |
2008.1.415 |
.NET version |
2.0 and later
|
Visual Studio version |
2005 and later
|
Browser support |
all supported by RadGrid for ASP .NET
all browsers supported by RadControls for ASP .NET AJAX
|
PROJECT DESCRIPTION
The project uses client side JavaScript code to simulate column expand/collapse. It uses a template column, which contains two images, nested in the header, which change the width of the column(s), as well as the visibility of the expand/collapse images. The aspx code, and the declaration of the control are listed below:
.aspx
<div> |
<radG:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server" |
AutoGenerateColumns="False"> |
<MasterTableView TableLayout="Fixed"> |
<Columns> |
<radG:GridTemplateColumn UniqueName="CustomerID"> |
<HeaderTemplate> |
<table> |
<tr> |
<td> |
<img onclick="CollapseColumn(0, this)" src="RadControls/Grid/Skins/Default/SingleMinus.gif" /><img |
style="display: none" onclick="ExpandColumn(0, this)" src="RadControls/Grid/Skins/Default/SinglePlus.gif" /></td> |
</tr> |
<tr> |
<td> |
<b>CustomerID</b></td> |
</tr> |
</table> |
</HeaderTemplate> |
<ItemTemplate> |
<%# Eval("CompanyName") %> |
</ItemTemplate> |
</radG:GridTemplateColumn> |
<radG:GridTemplateColumn> |
<HeaderTemplate> |
<table> |
<tr> |
<td> |
<img onclick="CollapseColumn(1, this)" src="RadControls/Grid/Skins/Default/SingleMinus.gif" /><img |
style="display: none" onclick="ExpandColumn(1, this)" src="RadControls/Grid/Skins/Default/SinglePlus.gif" /></td> |
</tr> |
<tr> |
<td> |
<b>CompanyName</b></td> |
</tr> |
</table> |
</HeaderTemplate> |
<ItemTemplate> |
<%# Eval("CompanyName") %> |
</ItemTemplate> |
</radG:GridTemplateColumn> |
</Columns> |
</MasterTableView> |
<ClientSettings> |
<Resizing AllowColumnResize="true" ClipCellContentOnResize="true" /> |
</ClientSettings> |
</radG:RadGrid> |
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" |
SelectCommand="SELECT * FROM Customers"></asp:AccessDataSource> |
</div> |
The JavaScript code used to resize the column, and hide the images is located below:
.js
<script type="text/javascript"> |
function CollapseColumn(index, element) |
{ |
<%= RadGrid1.ClientID %>.MasterTableView.ColGroup.Cols[index].width = "20px"; |
element.style.display = "none"; |
element.nextSibling.style.display = ""; |
} |
|
function ExpandColumn(index, element) |
{ |
<%= RadGrid1.ClientID %>.MasterTableView.ColGroup.Cols[index].width = ""; |
element.style.display = "none"; |
element.previousSibling.style.display = ""; |
} |
</script> |
A fully functional project is attached to this message.