How to: Editable Grid Controls in Microsoft Dynamics CRM (Dynamics 365)

As an experienced Senior CRM Developer and Consultant, I can attest that this is a long overdue and highly requested feature for Microsoft Dynamics CRM. While this may seem like a small change in features the Editable Grid touches many areas of the Dynamics CRM product and will prove to have a large impact on how users can now make changes/edits more easily in records.

In short, the main benefit of the new Editable Grid Control is that it enables users to edit data in a tabular format in Microsoft Dynamics CRM rather than opening each record to make changes, save and repeat. This is a huge improvement in usability. With the help of the Editable Grid, users can accomplish the same task with far fewer clicks – thus minimizing much of the pain and unpleasantness associated with manually updating records.

Having said that, there are still a few kinks that need to be ironed out. For example, the Editable Grid lacks the option to create a new line inside of the grid. Users will still need to launch a new form and thus open a dialog box to create a new record. We can hope this is resolved as this feature evolves (*wink* to developers working on the Dynamics CRM platform at the Microsoft mothership headquarters *wink*).

While the Editable Grid for Microsoft Dynamics CRM/Microsoft Dynamics 365 provides fantastic functionality the release documentation is a little light when it comes to providing usage examples. Consequently I wanted to provide you with step-by-step instructions, not only for enabling and setting up the grid, but also for handling an OnChange event for a cell. Here it goes:

1. Select the entity for which you want to enable the Editable Grid

2. Click “Controls” > “Add Controls”

3. Select Editable Grid and click “Add”

4. Choose which clients can use it. In the below screenshot it is set to only be available for the Web Client.

And presto, you’re ready to get started with the Editable Grid in Microsoft Dynamics!

While being able to edit in the grid is very convenient there will be times when you will want to add events (JavaScript) for such things as validation and business logic. Therefore, I’ve also included an explanation of how to use the OnChange event of a cell to update the value of another cell in the same row.

1. Select the entity

2. Select the “Events” tab

3. Under “Event Handlers,” add a JavaScript library by clicking the “(+) Add” Button.

4. You can either paste in new code, or select an existing code library.

Note: While this example uses a sub-grid from a parent entity, you can also you can also add the library and events for individual forms.

4. Add an Event Handler for the field and event. It is important to pass the execution context.

Code Sample:

In the below code sample, I use the context to get the control. With the control we have access to the value (cell data value) as well as the method to retrieve the parent (Row).

The Row contains an attribute collection which we are firing the Get method to retrieve the Cell for another field “new_checkintime1”. The idea here is that when the event field changes we are time-stamping the check-in time.

In addition to this the value of another field – “new_attended” – is set to true. This field is a two-option type.

You will notice on your grid that although the data has changed it will remain in an unsaved mode until the user clicks on the save button.

With the release of the December 2016 Update for Dynamics 365 the editable grid is now available for both Dynamics CRM online and on-premise. You can find the latest here.