This is the third installment following Part 2, which demonstrated the editable grid from inside Microsoft Dynamics CRM 2013, and Part 1, which introduced the editable grid in CRM 2011. This blog introduces paging.
I will first demo what the grid looks like with paging in a CRM 2013 environment. Afterwards, I will walk through the main block of code.
I adopted the concepts from this great blog post from Ryan Vanderpol, about adding a pager to a grid.
Demo
The following screen shot demonstrates the pager inside the grid.
The above demonstrates:
- The “Previous” and “Next” buttons allow the user the move forward and backwards one page. Currently, the “Previous” button is disabled because the first page is being displayed.
- The numbers “1”, “2”, and “3” represent the page numbers.
Code Walkthrough
The following code represents the additional changes required to the source originally introduced in Part 2 of my blog.
I have added a new resource to the mix:
- new_bootstrap_no_icons.css
I have made changes to the following source.
- The below html web resource.
*Look for code marked in green
*Strike outcode is either replaced or removed
See Code Walkthrough here
Code Comments
Snippet | Comments |
<tbody data-bind=”foreach: pagedList“> | Loop through pageList instead of oproducts collection. |
<div class=”pagination”> | Represents the paging UI controls. This code uses the styles from bootstrap CSS. |
self.pageSize = ko.observable(3); | Establishes the number of rows to display per page. |
self.pageIndex = ko.observable(0); | Determines what page to start on when the form loads. |
self.moveToPage(self.maxPageIndex()); | This is called after a new record is inserted |
if (self.pageIndex() > self.maxPageIndex()) self.moveToPage(self.maxPageIndex()); |
This is called after a record is removed. |
What’s next?
In future blog posts:
- Resolving deadlocks when saving multiple records from the editable grid.
- Sorting.
- Do you have any suggestions on what you would like to see?