• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Stacked Header in ASP.NET Core Tree Grid Control

This example demonstrates how to use stacked headers and a customizable column chooser in the Tree Grid component.

DEMO
SOURCE

The stacked header category explains the use of the columns -> column property to group columns under common headers, facilitating a clear and structured display of data for enhanced readability and user navigation. It categorizes columns into three groups: Order Details, comprising Order ID, Order Name, and Order Date; Shipment Details, comprising Shipment Category, Shipped Date, and Units; and Price Details, comprising Price per Unit and Total Price.

The Column Chooser Template category highlights a customizable layout that allows users to manage column visibility, offering flexibility and improving the overall user experience.

Key properties include columnChooserSettings -> headerTemplate for a custom header layout, columnChooserSettings -> template for a custom content layout,columnChooserSettings -> footerTemplate for a custom footer layout, and enableSearching to enable or disable search functionality.

More information about the stacked header configuration can be found in this documentation section.

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