Posts Tagged ‘Editable Grid’

Dynamics 365 – Capture events from Editable subgrid and set main form fields

To answer one of the queries posted on my blog, in this article I am going to detail, capturing the events from Editable sub grid and Get/Set the form fields.

To simplify the explanation, I am taking below use case

  • On Account from configure ‘Contacts’ editable sub grid
  • On change of ‘Business Phone’ from ‘Contact’ sub grid
    • Read the new ‘Business Phone’ value
  • SubGridEvent_3
    • Set the ‘Telephone’ field on Account form with the Contacts ‘Business Phone’


below are the execution steps

Add ‘Editable Grid’ on Account Form:

  • Add a ‘Contact’ sub grid on the Account form (You can leverage OOB Contacts grid as well)
  • To convert read only grid to Editable grid, Double click on ‘Sub grid’ and go to ‘Controls’ -> Add Control
  • Choose ‘Editable Grid’ option from the list

Add Sub Grid

  • Select ‘Web’ checkbox

Add Sub Grid_1

  • Click ‘OK’

Register ‘onchange’ event on sub grid field:

  • Double click on ‘Sub grid’ and go to ‘Events’
  • Select the Field as ‘Business Phone’ and the Event as ‘OnChange’


  • Add click ‘+Add’ to add your Jscript function name
    • Function : businessPhoneOnChange
  • Make sure you select the ‘Pass execution context as first parameter’ checkbox


  • Save and Publish the form

JScript function:

function businessPhoneOnChange(execContext) {
try {
var formContext = execContext.getFormContext();

// Read the changed Business Phone’ value from sub grid
var entityObject = formContext.getData().getEntity();
var contactBusinessPhone = entityObject.attributes.getByName(“telephone1”).getValue();
// showAlert(“Business Phone – ” + contactBusinessPhone);

// Set the ‘Phone’ field on ‘Account’ form
} catch (e) {
showAlert(“Error in businessPhoneOnChange – ” + e.description);

function showAlert(message) {
var alertStrings = { confirmButtonLabel: “Yes”, text: message };
var alertOptions = { height: 120, width: 400 };
Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(
function success(result) {
console.log(“Alert dialog closed”);
function (error) {



Dynamics 365 New Feature – Editable Grid

November 5, 2016 Leave a comment
  • Editable grid is a new custom control in Dynamics 365 that provides inline editing capabilities on web and mobile clients


  • It can group, sort, and filter data


  • Editable grid is supported in below grids on the web client, and in dashboards and form grids on the mobile clients.
    • Homepage grid,
    • Form grids
    • Sub grids
  • It honors the read-only field metadata and field-level security settings.
  • Editable grids also support business rules and form scripting.
  • Editable grids do not support roll up associated views
  • Editable grid can be configured on the entity only if its Customizable

Configure Editable Grid on Account Entity:

  • Go to Customization -> Entities -> Account -> Controls -> Add Control
Add grid

Add grid

  • Adding Look up: We can configure look up field on Editable grid with Search option.


  • Similarly we can also add  ‘Nested Grid View’ (Only supported for Tablet and Phone clients).

Editable Grid Events:

Editable grid supports the following events



  • OnRecordSelect
    • Event occurs when a single row is selected in the editable grid.
    • This event won’t occur if a user selects different cells in the same row, or selects multiple rows.

// Register this event on ‘onRecordSelect’ event

function gridRowSelect() {

// Read selected rows from editable sub grid
var selectedRows = Xrm.Page.getControl(“subGridAccounts”).getGrid().getSelectedRows();

  • OnChange
    • Event occurs when a value is changed in a cell in the editable grid and the cell loses focus.
    • This event can also occur when an attribute value is updated using the setValue
  • OnSave
    • Event occurs, when,
      • There is a change in the record selection.
      • Explicitly triggering a save operation using the editable grid’s save button.
      • Upon sort, filter, group, pagination, or navigation operation from the editable grid while there are pending changes
    • Editable grid suppresses duplicate detection rules up on Save.
    • If a user edits multiple columns of the same record in sequence, the OnSave event will only be fired once
  • Editable grid control does not implement an auto-save timer

Configure Editable Sub Grid:

  • Sub grid on the form can be configured as Editable grid
  • I have a Custom entity ‘Company Accounts’ having 1:N relationship with ‘Accounts’
  • I added a Sub grid ‘subGridAccounts’ on the ‘Company Accounts’ form
  • To make ‘subGridAccounts’ grid as Editable, Double click the grid to open ‘Properties’
  • Add ‘Editable Grid’ Control. You can add Grid events too.
Configure- editable sub-grid

Configure- editable sub-grid

  • Editable Sub Grid looks as below
Sub-grid on form

Sub-grid on form

Refer MSDN for more info.