This documentation article discusses the capability to make RadGrid columns static when scrolling and static headers are enabled. This is quite useful when you want to make part of the columns data visible at all times for the end users when having horizontal scrollbar for navigation.
To enable this grid functionality, merely set the ClientSettings -> Scrolling -> FrozenColumnsCount property of the control which determines the count of columns (starting from the leftmost column) which will be statically positioned when you drag the horizontal scroll in the grid. This feature is functional with hierarchy/grouping presentation as well.
The screen shot below is taken from the online demo of the product presenting this feature (the CustomerID column is static in this case):
 |
Note that the frozen columns feature is configured to work with static headers enabled. Furthermore, since the entire grid has a single horizontal/vertical scroll, it is meaningful to define frozen columns for the master table in hierarchical grid. |
 |
The next section applies to RadGrid versions prior to 5.0.0. The frozen columns feature is built-in since version 5.0.0 of the product. |
The code snippets below illustrate how to attain the "static column" behavior for your grid instance using a neat javascript trick:
|
Note that this works under IE only and the HTML 4.0 Transitional DOCTYPE (i.e. does not work for the default XHTML DOCTYPE in ASP.NET 2.0). |
| ASPX/ASCX |
 Copy Code |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
DIV#MyDiv { OVERFLOW: auto; WIDTH: 420px; HEIGHT: 200px; }
TD.locked { ; LEFT: expression(document.getElementById("MyDiv").scrollLeft - 2); POSITION: relative; BACKGROUND-COLOR: scrollbar }
TH.locked { ; LEFT: expression(document.getElementById("MyDiv").scrollLeft - 2); POSITION: relative; BACKGROUND-COLOR: scrollbar }
TH { Z-INDEX: 10; CURSOR: default; POSITION: relative; ; TOP: expression(document.getElementById("MyDiv").scrollTop - 2); BACKGROUND-COLOR:
scrollbar }
TH.locked { Z-INDEX: 99 }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="MyDiv" style="width: 370px;">
<rad:RadGrid ID="RadGrid1" Width="450px" runat="server" />
</div>
</div>
</form>
</body>
</html> |
And in the code-behind:
| C# |
Copy Code |
|
protected void RadGrid1_NeedDataSource(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)
{
OleDbConnection MyOleDbConnection = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("Grid/Data/Access/Nwind.mdb"));
OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();
MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 20 ContactName, ContactTitle, Address, City FROM Customers", MyOleDbConnection);
DataTable myDataTable = new DataTable();
MyOleDbConnection.Open();
try
{
MyOleDbDataAdapter.Fill(myDataTable);
}
finally
{
MyOleDbConnection.Close();
}
RadGrid1.DataSource = myDataTable;
}
private void RadGrid1_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e)
{
if (e.Item is GridDataItem || e.Item is GridHeaderItem)
{
e.Item.Cells[2].CssClass = "locked";
e.Item.Cells[3].CssClass = "locked";
}
} |
| VB.NET |
Copy Code |
|
Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.WebControls.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
Dim MyOleDbConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("Grid/Data/Access/Nwind.mdb"))
Dim MyOleDbDataAdapter As New OleDbDataAdapter()
MyOleDbDataAdapter.SelectCommand = New OleDbCommand("SELECT TOP 20 ContactName, ContactTitle, Address, City FROM Customers", MyOleDbConnection)
Dim myDataTable As New DataTable()
MyOleDbConnection.Open()
Try
MyOleDbDataAdapter.Fill(myDataTable)
Finally
MyOleDbConnection.Close()
End Try
RadGrid1.DataSource = myDataTable
End Sub
Private Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.WebControls.GridItemEventArgs) Handles RadGrid1.ItemDataBound
If TypeOf e.Item Is GridDataItem Or TypeOf e.Item Is GridHeaderItem Then
e.Item.Cells(2).CssClass = "locked"
e.Item.Cells(3).CssClass = "locked"
End If
End Sub |