How change values in grid in real-time writing

[Luis Guerrero]

You can currently use the change method in the write function, but this only works if you change the values ​​using the icons in the number field.

How can I do so that while writing a numeric value in a field at the same time the value of another field changes?

[Rajapandiyan Settu]

Hi Luis,

Thanks for contacting Syncfusion support.

Query: How can I do so that while writing a numeric value in a field at the same time the value of another field changes?

We suggest you to add oninput event to the Numeric Textbox input element to achieve your requirement. In that event, you can change the other fields' values on typing a value in Numeric Textbox. Find the below code example and sample for more information.

[index.js]

var priceObj;
var grid = new ej.grids.Grid({

  ---

  columns: [

    {

      field: 'Freight',

      headerText: 'Freight',

      textAlign: 'Right',

      editType: 'numericedit',

      width: 140,

      format: 'C2',

      validationRules: { required: true },

      edit: { params: { change: freightChange } },

      edit: {

        create: function () {

          var ele = document.createElement('input');

          return ele;

        },

        read: function () {

          return priceObj.value;

        },

        destroy: function () {

          priceObj.destroy();

        },

        write: function (args) {
          // add oninput event

          args.element.addEventListener('input', freightChange);

          priceObj = new ej.inputs.NumericTextBox({

            value: args.rowData[args.column.field],

            change: function (args) {

              var totalCostFieldEle = grid.element.querySelector(

                '#' + grid.element.id + 'TotalCost'

              );

              totalCostFieldEle.value = args.value * 100;

            },

          });

          priceObj.appendTo(args.element);

        },

      },

    },

    {

      field: 'TotalCost',

      headerText: 'Total Cost',

      allowEditing: false,

      width: 160,

    },

  ],

});

grid.appendTo('#Grid');

 

function freightChange(args) {

   // get the other field input element using the Grid element id & field name and changing its value

  grid.element.querySelector('#' + grid.element.id + 'TotalCost').value =

    parseInt(args.target.value) ? parseInt(args.target.value) * 100 : 0;

}

 

Sample: https://stackblitz.com/edit/tgnzxg?file=index.js,index.html

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.