Name
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.
Customer ID | Name | Order Details | Shipping Details | Delivery Details | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
ID | Date | Country | Charges | Status | Feedback | |||||
| 1001 | TOMSP | 150001 | 1/2/1901 |  Germany | $20.75 | Delivered | |
| 1002 | HANAR | 150002 | 1/3/1901 | Brazil | $30.00 | In-progress | |
| 1003 | VICTE | 150003 | 1/2/1901 | Belgium | $40.25 | Delivered | |
| 1004 | SUPRD | 150004 | 1/2/1901 | Switzerland | $50.60 | In-progress | |
| 1005 | CHOPS | 150005 | 1/2/1901 | Austria | $60.85 | In-progress | |
| 1006 | RICSU | 150006 | 1/2/1901 | Mexico | $70.90 | Delivered | |
| 1007 | WELLI | 150007 | 1/2/1901 | Venezuela | $80.10 | Delivered | |
| 1008 | HILAA | 150008 | 1/2/1901 | France | $90.45 | In-progress | |
| 1009 | ERNSH | 150009 | 1/2/1901 | Germany | $100.55 | Delivered | |
| 1010 | CENTC | 150010 | 1/2/1901 | Brazil | $10.50 | Delivered | |
| 1011 | OTTIK | 150011 | 1/2/1901 | Belgium | $20.75 | Delivered | |
| 1012 | QUEDE | 150012 | 1/2/1901 | Switzerland | $30.00 | In-progress |
Column Options
- ID
- Date
- Country
- Charges
- Status
- Feedback
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.