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

6 thoughts on “Creating an Editable Grid in CRM 2011 Using Knockout JS

  1. Hi, thanks for a nice blog post.
    When do you plan to write about the code and its integration within CRM as mentioned at the end of your article?

  2. Hi, can you assist our team with developing an editable grid for our CRM solution? I will get you the details on what we are building. Thanks!

    -tziegner

  3. Pingback: Part 2: Creating an Editable Grid in CRM 2013 Using Knockout JS | Edgewater Blog

  4. Pingback: Part 3: Creating an Editable Grid in CRM 2013 Using Knockout JS | Edgewater Blog

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