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

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

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

  2. Pingback: CRM Editable Grid Options - Microsoft Dynamics CRM Community

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