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.