Part 3: Creating an Editable Grid in CRM 2013 Using Knockout JS

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.

CRM editable 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 out code 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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s