Example of Stacked Header in ASP.NET MVC Data Grid Control

This sample demonstrates the Grid component with the stacked header and resize feature. In this sample, we have shown multiple level of column headers.

DEMO
SOURCE

The Grid columns can be stacked/grouped in order to show multiple level of column headers. It can be done by setting the Columns->Columns property.

The Grid columns can be resized by clicking and dragging at the right edge of columns header. To enable column, resize behavior, set allowResizing opens in a new tab property as true. You can also prevent the resize of the particular column by setting columns->allowResizing as false in columns definition.

In this demo, the columns ColumnName, OrderDate are grouped under Order Details, the columns ShippedDate, ShipCountry, Freight are grouped under Ship Details.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab