TreeGrid allows you to load large amount of data without performance degradation.
To use virtualization, you need to inject VirtualScrollService in TreeGrid.
Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the rows will be appended while scrolling vertically. To setup the row virtualization, you need to define
enableVirtualization as true and content height by height property.
The number of records displayed in the TreeGrid is determined implicitly by height of the content area and a buffer records will be maintained in the TreeGrid content in addition to the original set of rows.
Expand and Collapse state of any child record will be persisted.
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew' enableVirtualization={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name' width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]} />
</TreeGridComponent>
}
}import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component {
render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew' enableVirtualization={true} treeColumnIndex={1} height='291'>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Player Jersey' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD1' headerText='Player Name' width='120'></ColumnDirective>
<ColumnDirective field='FIELD2' headerText='Year' width='100' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD3' headerText='Stint' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='FIELD4' headerText='TMID' width='120' textAlign='Right'></ColumnDirective>
</ColumnsDirective>
<Inject services={[VirtualScroll]}/>
</TreeGridComponent>;
}
}import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));height given to the TreeGrid.