Example of Paging API in React Tree Grid Component

All Controls
/
Treegrid
/
PagingAPI

This sample demonstrates the usage of paging API in Tree Grid. In this sample, use the properties panel to change the page size mode, page size, page count and current page of the Tree Grid.

More Details...

Loading....
Description

Paging allows you to display the contents of the Tree Grid in page segments. The number of items on a page is determined by the pageSettings->pageSize property. If no value is specified for the pageSettings->pageSize property, the Tree Grid will display 12 items on a page. By default, paging is disabled. To enable paging, set allowPaging property to true.

In this demo,

  • Click the Allow Paging check box to enable/disable paging feature.
  • Change the value of Page Size Mode Dropdown to change pageSettings->pageSizeMode.
  • Change the value of Page Size textbox to change pageSettings->pageSize.
  • Change the value of Page Count textbox to change pageSettings->pageCount.
  • Change the value of Current Page textbox to change pageSettings->currentPage.

Injecting Module:

Tree Grid features are segregated into individual feature-wise modules. To use paging feature, we need to inject Page module into the services.

More information on the paging configuration can be found in this documentation section.