Model-Driven-Apps: Implement Editable Grid and learn how to customize it

Let’s learn how to implement Editable Grid and apply simple customization. As the name, the Editable Grid is a grid where we can do inline editing. In this blog, I create a custom table where we will implement the below scenario:

– On Qty or Unit Price changed, set Total with formula Qty * Unit Price.

– On Calculate Status changed, if set as “In Progress” then set Actual Start = Today’s date. If set as “Completed”, set Actual End = Today’s date.

Scenario that we will cover today

On the Parent Entity (Contact) where we want to place the Editable Grid, add the component > Editable Grid. Then you can set the necessary properties to suit your needs:

Add Editable Grid to the form

To only allow related records, checked the “Show related records” (don’t forget to set the view with the columns that you need):

Show only related records

For the customization, actually, there is no particular difference with the one that we are using. Here is the code that we want to apply:

var grid = grid || {};
(function() {
    var calculateTotal = function(executionContext) {
        var formContext = executionContext.getFormContext();
        var qty = formContext.getAttribute('ins_qty').getValue();
        var pricePerUnit = formContext.getAttribute('ins_unitprice').getValue();
        var total = qty * pricePerUnit;
    this.onPriceChange = function(executionContext) {
    this.onQtyChange = function(executionContext) {
    var calculateStatus = {
        'InProgress': 826540001,
        'Completed': 826540002
    this.statusOnChange = function(executionContext){
        var formContext = executionContext.getFormContext();
        var status = formContext.getAttribute('ins_calculatestatus').getValue();

        if(status === calculateStatus.InProgress){
            formContext.getAttribute('ins_actualstart').setValue(new Date());
        if(status === calculateStatus.Completed){
            formContext.getAttribute('ins_actualend').setValue(new Date());

Once you load the above file and create the WebResource in the CRM (Dataverse), you can open the form where you already set the Editable Grid, then add the necessary events (unfortunately on the, we can’t see the events. So I need to go back to Classic UI to add the events):

Add event

From the above image, as you can see. I add the event OnChange on the Calculate Status. Then we need to set the correct Library and the JavaScript function that we want to call (in this case, I call “grid.statusOnChange“).
And last, here is the demo:

Editable Grid demo

Happy CRM-ing!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.