First of all let's change the number of records per page. Just add the following parameter to the component's declaration:
<t:grid t:source="allCelebrities" rowsPerPage="5"/>
Run the application, and here is what you should see:
You can now easily page through the records using the attractive pager control that appeared at the bottom of the table. If you would rather have the pager at the top, add another parameter to the Grid
declaration:
<t:grid t:source="allCelebrities" rowsPerPage="5" pagerPosition="top"/>
You can even have two pagers, at the top and at the bottom, by specifying pagerPosition="both"
, or no pagers at all ( pagerPosition="none"
). In the latter case however, you will have to provide some custom way of paging through records.
The next enhancement will be a link surrounding the celebrity's last name and linking to the Details page. We'll be adding an ActionLink
and will need to know which Celebrity
to link to, so we have the Grid
store using the...