React UI Components Documentation
ReactJS TreeGrid Component
The TreeGrid component for React represents a lightweight widget which represents data in a tree-like structure. The TreeGrid(also known as TreeList) widget supports multi column display of hierarchical data, data paging, sorting and filtering, data editing, columns resizing, fixed columns, conditional formatting, aggregates and rows selection. It can read and display the data from your data sources like XML, JSON, Array, CSV or TSV. TreeGrid has intuitive and easy to use APIs and works across devices and browsers.
Prerequisites
Refer to React Getting Started before you start with this help topic.
Configuration
The TreeGrid component for React requires the following imports.
Then we create our component class. Properties and methods are put as React props.
Finally we render our class in the desired HTML element:
Events Methods & Properties
In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the React "ref" Callback Attribute:
Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() React Component Lifecycle method.
Events
The cellValueChanged event is triggered when a cell value is changed.
The following example demonstrates how to add an event listener:
Methods & Properties
This is how you call methods & props:
Every component have a method setOptions which accepts a object as an argument. This object contains component settings.
Every component also have a method getOptions which returns a object containing the component settings.
TreeGrid Examples
Overview
The following example demonstrates how to create a TreeGrid component.
Virtual Mode
The following example demonstrates - virtual mode, the Tree Grid is created on demand.
Disabled TreeGrid
The following example demonstrates how to disable the TreeGrid component.
