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

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

LinkedIn-48-BlueFacebook-48-BlueTwitter-48-BlueGoogle+-48-BlueInstagram-48-BluePinterest-48-BlueYouTube-48-Blue

 

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.

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)

 

Steps

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

3. Choose a ‘projected schedule’

4. Click ‘Save’

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

 


CRM Technical Tip