We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How change values in grid in real-time writing

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?



1 Reply

RS Rajapandiyan Settu Syncfusion Team October 5, 2022 08:52 AM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon