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

Multi-column headers

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

multicolumnheaders.cshtml

Also available for:

Drag a column header and drop it here to group by that column

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Company Name","headerAttributes":{"data-field":"CompanyName","data-title":"Company\u0026#32;Name"},"width":"420px","field":"CompanyName","encoded":true},{"title":"Contact Info","headerAttributes":{"colSpan":"5","data-colspan":"5"},"columns":[{"title":"Contact Title","headerAttributes":{"data-field":"ContactTitle","data-title":"Contact\u0026#32;Title"},"width":"200px","field":"ContactTitle","encoded":true},{"title":"Contact Name","headerAttributes":{"data-field":"ContactName","data-title":"Contact\u0026#32;Name"},"width":"200px","field":"ContactName","encoded":true},{"title":"Location","headerAttributes":{"colSpan":"2","data-colspan":"2"},"columns":[{"title":"Country","headerAttributes":{"data-field":"Country","data-title":"Country"},"width":"200px","field":"Country","encoded":true},{"title":"City","headerAttributes":{"data-field":"City","data-title":"City"},"width":"200px","field":"City","encoded":true}]},{"title":"Phone","headerAttributes":{"data-field":"Phone","data-title":"Phone"},"field":"Phone","encoded":true}]}],"groupable":{"enabled":true},"pageable":{"buttonCount":10},"sortable":true,"columnMenu":true,"resizable":true,"reorderable":true,"scrollable":{"height":"200px"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/grid/multicolumn_customers_read"},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"CustomerID":{"type":"string"},"CompanyName":{"type":"string"},"ContactName":{"type":"string"},"ContactTitle":{"type":"string"},"Address":{"type":"string"},"City":{"type":"string"},"Region":{"type":"string"},"PostalCode":{"type":"string"},"Country":{"type":"string"},"Phone":{"type":"string"},"Fax":{"type":"string"},"Bool":{"type":"boolean","defaultValue":null}}}}}});});

Description

The Telerik MVC Grid extension 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 Columns -> Group -> Columns scheme. In addition, operations like sorting and filtering are supported on each column level, regardless of the chosen multi-header pattern.

Multi-column headers

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo