Back to all Tutorials
Paginating Datagrids
At times, the number of results of a data table is so large that they are divided into several pages. Simulate this type of pagination using the Index and Summary components and the listing actions as explained below. First, prepare the data table so that it is able to use the pagination functions:
- Select the "Products" data table and click the Properties tab.
- Go to Rows per Page: indicate how many should be displayed per page. In this case, 0 is unlimited and, therefore, there won't be any pagination. For this example, use 3 rows.
- Drag an Index component into the canvas and link it to the grid by using the Listing property tab. The index automatically shows the number of listed pages based on the number of rows per page established.
- Note: this is a dynamic index; it is updated if the user performs a search in the simulation.
Summary displays the number of results available in all the listed pages and what values are being displayed at any time. It is configured just like the index and it is also dynamic text. Lastly, you can also simulate the "next page", "previous page", "last page" and "first page" actions. The procedure is the same for all four options. Let's look at the first one:
- Drag four buttons and label them "Next", "Previous", "First" and "Last".
- Select the first one and click the Event tab on the Pagination Action option and then click Next Page.
- The Expressions editor pops open. Drag the list from the screen to the gap in the expression and click OK.
- Click OK again in the Event dialog box.
- Now click Simulate. The values in the list change each time you click "Next". To see it in further detail, create a few more values in the Data Master.