Example of Hierarchy Grid in Javascript Data Grid Control

Hierarchy Grid

This sample demonstrates the hierarchical binding of the Grid component. Click the expand button to view the child Grid of a particular record.

More Details...


The Hierarchy Grid is used to display table data in hierarchical structure which can show or hide by clicking on expand or collapse button. This feature can be enabled by defining childGrid and childGrid.queryString. In this demo, three level hierarchy is demonstrated with hierarchical structure Employee -> Orders -> Customers. Also, we have shown spinner when loading detail Grid using detailDataBound event. This event triggers at initial expand. Injecting Module: Grid features are segregated into individual feature-wise modules. To use Hierarchy Grid feature, we need to inject DetailRow using the Grid.Inject(DetailRow) section.