Search results

Paging

Paging provides an option to display TreeGrid data in page segments. To enable paging, set the allowPaging to true. When paging is enabled, pager component renders at the bottom of the treegrid. Paging options can be configured through the pageSettings.

To use Paging, inject Page module in TreeGrid.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public pageSettings: PageSettingsModel = { pageSize: 7 };
    public render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
         allowPaging='true' pageSettings={this.pageSettings}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>
    }
}
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.pageSettings = { pageSize: 7 };
    }
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>;
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

You can achieve better performance by using treegrid paging to fetch only a pre-defined number of records from the data source.

Page Size Mode

Two behaviors are available in TreeGrid paging to display certain number of records in a current page. Following are the two types of pageSizeMode.

  • All : This is the default mode. The number of records in a page is based on pageSize property.
  • Root : The number of root nodes or the 0th level records to be displayed per page is based on pageSize property.

With pageSizeMode property as Root only the root level or the 0th level records are considered in records count.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public pageSettings: PageSettingsModel = { pageSize: 2, pageSizeMode: 'Root' };
    public render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true'
         pageSettings={this.pageSettings} height='265'>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>
    }
}
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.pageSettings = { pageSize: 2, pageSizeMode: 'Root' };
    }
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} height='265'>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>;
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Template

You can use custom elements inside the pager instead of default elements. The custom elements can be defined by using the template property. Inside this template, you can access the currentPage, pageSize, pageCount, totalPage and totalRecordCount values.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { ChangeEventArgs } from '@syncfusion/ej2-inputs';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public pageSettings: PageSettingsModel = {
        pageSize: 6,
        template: this.pageTemplate.bind(this)
    };
    public treegrid: TreeGrid | null;

    public pageTemplate(props: any): any {
        return (<div className="e-pagertemplate">
           <div className="col-lg-12 control-section">
              <div className="content-wrapper">
                <NumericTextBoxComponent max={3} min={1} step={1} value={props.currentPage} width={75} format='###.##' change={this.onChange}/>
               </div>
           </div>

           <div id="totalPages" className="e-pagertemplatemessage">
              <span className="e-pagenomsg">{props.currentPage} of {props.totalPages} pages ({props.totalRecordsCount} items)</span>
           </div>
        </div>);
    }

    public onChange(args: ChangeEventArgs) {
        const value: number = args.value as number;
        if (this.treegrid) {
            this.treegrid.goToPage(value);
        }
    }


    public render() {
        this.onChange = this.onChange.bind(this);
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
         allowPaging='true' pageSettings={this.pageSettings} ref={g => this.treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>
    }
}
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.pageSettings = {
            pageSize: 6,
            template: this.pageTemplate.bind(this)
        };
    }
    pageTemplate(props) {
        return (<div className="e-pagertemplate">
           <div className="col-lg-12 control-section">
              <div className="content-wrapper">
                <NumericTextBoxComponent max={3} min={1} step={1} value={props.currentPage} width={75} format='###.##' change={this.onChange}/>
               </div>
           </div>

           <div id="totalPages" className="e-pagertemplatemessage">
              <span className="e-pagenomsg">{props.currentPage} of {props.totalPages} pages ({props.totalRecordsCount} items)</span>
           </div>
        </div>);
    }
    onChange(args) {
        const value = args.value;
        if (this.treegrid) {
            this.treegrid.goToPage(value);
        }
    }
    render() {
        this.onChange = this.onChange.bind(this);
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} ref={g => this.treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>;
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Pager with Page Size Dropdown

The pager Dropdown allows you to change the number of records in the TreeGrid dynamically. It can be enabled by defining the pageSettings.pageSizes property as true.

    public pageSettings: PageSettingsModel = { pageSize: 7, pageSizes: true };

Page size dropdown

How to render Pager at the Top of the TreeGrid

By default, Pager will be rendered at the bottom of the TreeGrid. You can also render the Pager at the top of the TreeGrid by using the dataBound event.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { ColumnDirective, ColumnsDirective, Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public treegrid: TreeGrid | null;
    public pageSettings: PageSettingsModel = { pageSize: 7, pageSizes: true };
    public initialGridLoad: boolean = true;

    public dataBound() {
        if (this.initialGridLoad) {
            this.initialGridLoad = false;
            const pager = document.getElementsByClassName('e-gridpager');
            let topElement;
            if (this.treegrid && this.treegrid.toolbar) {
                topElement = document.getElementsByClassName('e-toolbar');
            } else {
                topElement = document.getElementsByClassName('e-gridheader');
            }
            topElement[0].before(pager[0]);
        }
    }

    public render() {
        this.dataBound = this.dataBound.bind(this);
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true'
             pageSettings={this.pageSettings} dataBound={this.dataBound} ref={g => this.treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>
    }
}
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.pageSettings = { pageSize: 7, pageSizes: true };
        this.initialGridLoad = true;
    }
    dataBound() {
        if (this.initialGridLoad) {
            this.initialGridLoad = false;
            const pager = document.getElementsByClassName('e-gridpager');
            let topElement;
            if (this.treegrid && this.treegrid.toolbar) {
                topElement = document.getElementsByClassName('e-toolbar');
            }
            else {
                topElement = document.getElementsByClassName('e-gridheader');
            }
            topElement[0].before(pager[0]);
        }
    }
    render() {
        this.dataBound = this.dataBound.bind(this);
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} dataBound={this.dataBound} ref={g => this.treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Page]}/>
        </TreeGridComponent>;
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

During the paging action, the pager component triggers the below three events.

  • The created event triggers when Pager is created.
  • The click event triggers when the numeric items in the pager is clicked.
  • The dropDownChanged event triggers when pageSize DropDownList value is selected.