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

Multi-column headers

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • EDIT IN TELERIK REPL
  • Change Theme
    default

    Themes & Swatches

    SASS
    LESS
    Launch Theme Builder
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
HtmlHelper
TagHelper
Files:
multicolumnheaders.cshtml
CustomerViewModel.cs
Multicolumnheaders_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

The Telerik for ASP.NET Core DataGrid supports multi-column headers by specifying column groups which incorporate inner-column structures.

In this demo, you can see the Contact Info and Location columns have nested columns, defined trough the Column Builder: 
columns.Group(group => group.Title"Contact Info").Columns(col => { col.Bound(x => x.ContactTitle).Width(200);}));
In addition, operations like sorting and filtering are supported on each column level, regardless of the chosen multi-header pattern.

More about Telerik Grid for ASP.NET Core

Support & Learning Resources