Grids
Example of Stacked Header in ASP.NET Core 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
- Name
- 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
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.