New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Scroll with Static Headers

The most common problem when scrolling is losing the context of the current column. This context is supplied by the column header. RadGrid lets you keep the header at the top even when scrolling the grid. To enable this feature, set the ClientSettings.Scrolling.UseStaticHeaders property to True. (Its default value is False.)

When UseStaticHeaders property is set to True, grid header and pager remain static, even when the grid is scrolled:

UseStaticHeaders is true

When UseStaticHeaders is False, the header and pager scroll along with the data rows:

UseStaticHeaders is false

When scrolling is enabled and UseStaticHeaders is True , the grid columns should declare HeaderStyle.Width .

You can set UseStaticHeaders declaratively at design time:

<telerik:RadGrid RenderMode="Lightweight" runat="server" ... >
       <Scrolling AllowScroll="True" UseStaticHeaders="true" />

You can also set the scrolling properties in the code-behind at runtime:

RadGrid1.ClientSettings.Scrolling.AllowScroll = true;
RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;
RadGrid1.ClientSettings.Scrolling.AllowScroll = True
RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = True

If you use static headers when the grid's Width and Height properties are set to "100%", the Web page shows only the grid scrollbars; the browser scrollbars are hidden. In this way, RadGrid can mimic a desktop application such as Microsoft Excel.

In this article