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

This example showcases the Syncfusion EJ2 Grid component which features stacked headers, column resizing, and a customizable column chooser template.

DEMO

SOURCE

The Grid allows grouping columns to display multiple levels of headers using the Columns->Columns property.

In this demo, the columns are grouped as follows:

Order Details: ID and Date
Shipping Details: Country and Charges
Delivery Status: Status and Feedback

Column Resizing:

Columns can be resized by clicking and dragging the right edges of the column header. To enable this feature, set AllowResizing opens in a new tab to true. To disable resizing for specific columns, set columns->allowResizing to false.

Column Chooser Templates:

The column chooser template is used to customize layout and manage column visibility.

Key properties:

ColumnChooserSettings->HeaderTemplate :- Defines the header template.
ColumnChooserSettings->Template :- Defines the content template.
ColumnChooserSettings->FooterTemplate :- Defines the footer template.
ColumnChooserSettings->EnableSearching :- Enables or disables search functionality.

In this demo, the showInColumnChooser of the Customer ID column is set to false, preventing it from being displayed in the column chooser popup.