Proper way to handle derived (calculated) columns using local json data

Question

What is the best practice to compute derived columns in a grid using local data? For example, if my data contained columns for Quantity, Price, and Total (where Total = Quantity * Price)...myData = [{quantity: 100, price: 5, total: 500},

{quantity: 200, price: 2, total: 400} ,

{quantity: 10, price: 15, total: 150}

]How/where should I handle the computation such that my grid will update in real-time as the user makes edits?

Mohammed Ansar Sathik Ali · Answer

Hi John,Greetings from Syncfusion support.Query: Proper way to handle derived (calculated) columns
using local json dataBy analyzing your query, you need to update a column value
when we are editing another columns values. In below code example, we already
discussed this requirement in our documentation.Documentation: https://ej2.syncfusion.com/documentation/grid/editing/in-line-editing/#automatically-update-the-column-based-on-another-column-edited-valueFor your convenience, we have attached code sample for your
reference.

edit: {
          create:
  function() {
           
  priceElem = document.createElement('input');
           
  return priceElem;
          },
          read:
  function() {
           
  return priceObj.value;
          },
          destroy:
  function() {
           
  priceObj.destroy();
          },
          write:
  function(args) {
           
  priceObj = new NumericTextBox({
             
  value: args.rowData[args.column.field],
             
  change: function(args) {
               
  var formEle = grid.element.querySelector('form').ej2_instances[0];
               
  var totalCostFieldEle = formEle.getInputElement('TotalCost');
               
  totalCostFieldEle.value
  = priceObj.value * stockObj.value;
             
  }
            });
           
  priceObj.appendTo(priceElem);
          }
        },
        width: 140,
        format: 'C2',
        validationRules: {
  required: true }
      },

Sample: https://stackblitz.com/edit/6nvngp?file=index.tsPlease get back to us if you need further assistance on
this.Regards,Mohammed Ansar ,