How To Use JavaScript for Editable Grids in Dynamics 365

Satyvir Jasra, 07 October 2017

Editable Grid is a custom control that was released for Microsoft Dynamics 365. It basically gives users the ability to update records from a view without the need of opening form. We are also able to register the events to run our custom JavaScript logic. In this blog, I will go through the type of event handlers that we can add, and how we can run JavaScript code on editable grids.

Firstly, we must add editable grid control to the entity we need to work on, in this case I will be adding it to Contact entity.

Now I need to add an event handler to editable grid. There are three types of event handlers that we can add to an editable grid.

• OnChange will fire when the value stored in a cell is changed, and that cell is no longer focused.
• OnRecordSelect will fire when a row is selected, also note that it doesn’t fire upon selection of multiple rows.
• OnSave will fire when the changes have been saved. Keep in mind that when a cell is edited, and user navigates to another row or sorts the columns or refreshes the grid then record is saved automatically, and therefore OnSave event will run.
   

For demonstration, I have written a simple JavaScript code which will check the value entered by the user in field “Business Phone”. If the value starts with “+64”, then value of “Address 1: Country” will be set to “New Zealand”.

I added mag_/js/contactmanagement.js JavaScript code as a web resource. Following is the code I used.

After adding the web resource, I need to add it in form libraries. To do that I selected, “Contact” entity, then clicked on “Events” tab and under “Form Libraries” section I clicked on Add icon. Note that “Events” tab automatically becomes available when we add “Editable Grid” as a control.

Once the web resource was added, I added the OnChange event handler. Then I entered the properties as shown in the screenshot below.

Once the Handler properties have been set, click on OK and be sure to publish all the changes.
Let’s see the logic in action. I opened a view for Contact entity, and entered a Business Phone starting with “+64”.

After the value of Business Phone was changed, my JavaScript code populated “Address 1: Country” cell with “New Zealand”.