Infinite scrolling is used to load a huge amount of data without degrading the Tree Grid performance. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller.
To enable Infinite scrolling, set enableInfiniteScrolling
property as true and inject InfiniteScroll module in Tree Grid.
- In this feature, Tree Grid will not make a new data request when you visit the same page again.
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew' enableInfiniteScrolling={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={[InfiniteScroll]} />
</TreeGridComponent>
}
}
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component {
render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew' enableInfiniteScrolling={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={[InfiniteScroll]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can define the initial loading pages count by using infiniteScrollSettings.initialBlocks
property. By default, this feature loads three pages in initial rendering.
In the below demo, we have changed this property value to load five page records instead of three.
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll, InfiniteScrollSettingsModel, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component<{}, {}>{
public pageSettings: PageSettingsModel = { pageSize: 50 };
public infiniteOptions: InfiniteScrollSettingsModel = { initialBlocks: 5 };
public render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew' height={300} enableInfiniteScrolling={true} infiniteScrollSettings={ this.infiniteOptions } pageSettings={ this.pageSettings } treeColumnIndex={1}>
<Inject services={[InfiniteScroll]} />
<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>
</TreeGridComponent>
}
}
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.pageSettings = { pageSize: 50 };
this.infiniteOptions = { initialBlocks: 5 };
}
render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew' height={300} enableInfiniteScrolling={true} infiniteScrollSettings={this.infiniteOptions} pageSettings={this.pageSettings} treeColumnIndex={1}>
<Inject services={[InfiniteScroll]}/>
<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>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Cache is used to store the loaded rows object in the Tree Grid instance which can be reused for creating the row elements whenever you scroll to already visited page. Also, this mode maintains row elements based on the infiniteScrollSettings.maxBlocks
count value, once this limit exceeds then it will remove row elements from DOM for new rows.
To enable the cache mode in Infinite scrolling, set infiniteScrollSettings.enableCache
property as true.
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll, InfiniteScrollSettingsModel, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component<{}, {}>{
public pageSettings: PageSettingsModel = { pageSize: 50 };
public infiniteOptions: InfiniteScrollSettingsModel = { enableCache: true };
public render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping = 'Crew' height={300} enableInfiniteScrolling={true} infiniteScrollSettings={ this.infiniteOptions } pageSettings={ this.pageSettings } treeColumnIndex={1}>
<Inject services={[InfiniteScroll]} />
<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>
</TreeGridComponent>
}
}
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, InfiniteScroll } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { dataSource, virtualData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.pageSettings = { pageSize: 50 };
this.infiniteOptions = { enableCache: true };
}
render() {
dataSource();
return <TreeGridComponent dataSource={virtualData} childMapping='Crew' height={300} enableInfiniteScrolling={true} infiniteScrollSettings={this.infiniteOptions} pageSettings={this.pageSettings} treeColumnIndex={1}>
<Inject services={[InfiniteScroll]}/>
<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>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
selectRows
and selectRow
method is not supported in infinite scrolling.