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?

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

This is the second installment following Part 1, which introduced the editable grid in CRM 2011. Since then, I have upgraded the editable grid to work in CRM 2013.

In this blog, I will first demo what the grid looks like in CRM 2013. Afterwards, I will walk through the main block of code.

Demo

The following screen shots demonstrate the editable grid of opportunity products inside of the opportunity.

MPitts KnockoutJS 2 image 1

The above demonstrates:

  • Editing existing data, including lookup data
  • Adding a new record
  • Deleting an existing record
  • The introduction of the custom option set field, ‘projected schedule’ (new to this post)

MPitts KnockoutJS 2 image 2

Steps

  1. Click ‘Add Opportunity’
  2. The standard lookup appears; select a product and click ‘Add’

MPitts KnockoutJS 2 image 3

3. Choose a ‘projected schedule’

MPitts KnockoutJS 2 image 4

4. Click ‘Save’

MPitts KnockoutJS 2 image 5

5. As a proof of concept, the code takes the count of opportunity products, and updates the parent ‘estimated budget’ field.  This demonstrates updating the parent opportunity.

Code Walkthrough

The following code is reference implementation that you can adapt to your needs.

The following web resources make up this solution:

  • Jquery.js
  • Knockout.js (version 2.2)
  • SDK_REST.js
  • SDK.MetaData.js
  • The below html web resource.

Code Walk Through

Code Comments

What’s next?

In future posts:

  • Resolving the known issue with IE (yes, IE only – sigh)
    • Object Expected with JsProvider.ashx
    • How to integrate this code in CRM
    • Sorting
    • Paging through the grid

Creating an Editable Grid in CRM 2011 Using Knockout JS

Dave Berry wrote an excellent customization for CRM 4.0 which provided the ability to mass update child records, directly from the related parent’s form. Unfortunately, the CRM 2011 architecture prevents this customization from being adopted. By now, there exist quite a few commercial solutions for grid editing.

http://www.sparklexrm.com/s/features.html
http://pinpoint.microsoft.com/en-US/applications/add-edit-grid-for-crm-2011-and-crm-online-12884923430 http://pinpoint.microsoft.com/en-US/applications/editable-grid-add-on-for-crm-2011-and-crm-online-12884921672 http://www.c360.com/RecordEditor.aspx http://www.axonom.com/crm_solutions/powertrak/articles/editablegrids.html

I’ve been looking for a way to build a solution instead of buy.  I came across this fantastic blog post, which suggests using knockout JS as the data-binding tool. There is a great tutorial and lots of examples to get started.

The following is an example of an implementation of an editable grid for CRM 2011. I show two examples of editing opportunity products from within the parent opportunity which are:

  • How all changes to opportunity product are saved in a single operation
  • How only one opportunity product is saved back to the server

I demonstrate the following features which allow:

  • Editing existing data, including lookup data
  • Adding a new record
  • Deleting an existing record

Demo

post 3 image 1

The first editable grid illustrated above, implements the ‘multi-save’ design. In this case, all data is editable all the time. The second editable grid demonstrates using a single-record approach to editing records.

post 3 image 2

Referring to the single-edit approach, clicking on the ‘Edit’ link enables that record for edit. In this approach, the user must click ‘Apply’ in order to successful save the data. The record remains in edit mode until the user clicks ‘Apply’ or ‘Cancel.

post 3 image 3

Click ‘Apply’ results in a pop-up confirmation of the success. Naturally, the pop-up can be removed.

post 3 image 4

In the multi-save demonstration, note that both quantities have been updated. Click ‘Save’ to send the updates back to the server.

post 3 image 5

A confirmation pop-up reports the success of both records.

post 3 image 6

Click ‘Add Opportunity Product’ to add a new record.

post 3 image 7

Adding a record requires that certain required fields, namely the product, are selected. Therefore, the standard product lookup is presented.

post 3 image 8

Upon selecting a product, and clicking ‘Ok’, the record is successfully created. Notice that quantity and UOM are defaulted.

post 3 image 9

Removing a record is accomplished by clicking ‘Delete’ link next to the record.

post 3 image 10

Notice the record has been removed.

In the next blog post, I will walk through the code and how to integrate this code in CRM.

Some features I plan on demonstrating in a future blog are:

  • Editing ‘OptionSet’ fields
  • Sorting
  • Paging through the grid