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

ASP.NET Core Grid Frozen Columns

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
  • Change Theme
    default
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Y accessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
    Launch Theme Builder
HtmlHelper
TagHelper
Files:
frozen_columns.cshtml
Frozen_ColumnsController.cs
Order.cs
Frozen_Columns_TagHelper.cshtml

Also available for:

CLIENT-SIDE API HTML HELPER API

Description

The Telerik UI for ASP.NET Core Grid supports the frozen (locked) column feature. Frozen columns are the columns that are visible at all times while the user scrolls the Data Grid horizontally. In this way, the frozen columns functionality enables the Data Grid to display a large number of columns on limited screen space by statically rendering these columns. The concept of frozen columns is well known from MS Excel and many users expect the feature to be available in web environments too.

The Telerik UI for ASP.NET Core Grid enables you to implement the frozen column feature by setting a single configuration. This demo shows how to achieve the desired scenario by setting the .Locked(true) Boolean setting of the corresponding column. As a result, the columns in the locked-column group will be rendered to the left of the Grid. In the example, the Order ID and Ship Name are locked, while the rest of the columns can be scrolled horizontally.

For more information about the column capabilities, refer to the official Telerik UI for ASP.NET Core Data Grid product documentation on the available column settings.

Additional Apps

This Grid example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources