Using the Grid with a Pagination Widget
The Grid widget displays all data from the bound infotable on a single page. Scroll bars are displayed when the number and size of rows is larger than the available space on the screen. You can paginate the grid data by splitting the data rows across multiple pages. This helps users navigate more easily to a specific part of a large data set. To paginate data, you must create a pagination service, add the Pagination widget, and then create bindings between the Pagination widget, Grid widget, and the service. The following procedure outlines the general steps for using the Pagination widget. For more detailed information about creating a pagination service, see
Creating a Pagination Data Service.
1. Open the Widgets panel, and then drag the Pagination widget to a container on the canvas.
2. On the Data panel, add a data service that returns paginated data.
The service must contain the following values:
◦ The total number of results within the data set.
◦ The number of rows to display on each page.
◦ The current page number.
3. Bind the All Data property of the pagination data service to the Grid widget Data property.
4. Bind the following events to the pagination data service on the Data panel:
◦ Loaded event of the mashup—Executes the service when the mashup is initialized.
◦ Filter event of the Grid—Executes the service when the data is filtered using the filter box, or a data filter widget.
◦ PageNumberChanged event of the Pagination widget—Executes the service when the current page number is changed.
5. Bind the Pagination widget PageNumber, PageSize, and ResultsNumber properties as input parameters for the pagination data service.
6. Click Save, then view the mashup.
The grid data is paginated at run-time.
Keeping Selected Rows when Changing Pages
By default, selected rows that are stored in the SelectedRows property are not kept when the page changes in a paginated grid. In ThingWorx 9.3.6 or later, the IDs of selected rows are stored in the SelectedRowsIDs infotable property. The property value is kept when moving between pages. You can create an out binding to pass the IDs of selected rows to a data service, or an in binding to reset the selections by passing an empty infotable to the property.