Example of Stacked Header in ASP.NET MVC 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 on the stacked header configuration can be found in this documentationopens in a new tab section.

Looking for the full ASP.NET MVC Tree Grid component overview, features, pricing, and documentation? Visit our ASP.NET MVC Tree Grid component page.

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