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

trigger event after editing specific cell


As the stackblitz shows below, we need to do calculations on the last column based on others. The code works perfectly but we want to launch the calculation function when the user changes the value of a field and not when clicking outside the row or pressing the update button.


3 Replies

DR Dhivya Rajendran Syncfusion Team January 30, 2020 11:14 AM UTC

Hi Gaylord, 
Greetings from syncfusion support. 
Query :  we want to launch the calculation function when the user changes the value of a field and not when clicking outside the row or pressing the update button. 
We have validated the provided details and modified the sample based on your requirement. In that sample, we have bind the oninput event to the input elements in the actionComplete event of beginEdit. oniput event triggers while changing the input. In that event we have changed the CaloriesIntake column value with respect to the other columns values.  
Please refer the below code example and sample for more information.   
Note : By default, Grid actions are done based on the field Name, so ensure to give the field name for columns. 
 <ejs-grid #grid [dataSource]='data'(actionComplete)='actionComplete($event)' (cellSave)="onsave($event)" [editSettings]='editSettings' [toolbar]='toolbar' [height]='150'> 
                        <e-column field='CaloriesIntake' headerText='Calories Intake' textAlign='Right' [validationRules]='customerIDRules' [valueAccessor]='totalCalories'  width=150></e-column> //give fieldName for custom column also 
export class AppComponent { 
actionComplete(args) { 
if(args.requestType == 'beginEdit'){ 
    for (var i = 0; i < args.form.elements.length; i++) { 
      if (args.form.elements[i].name == 'Protein' || args.form.elements[i].name == 'Fat' || args.form.elements[i].name == 'Carbohydrate') { 
//bind the oninput event only for protein, fat and carbohydrate columns 
        args.form.elements[i].oninput = (args) => { 
          var x = this.grid.element.getElementsByClassName('e-gridform')[0].getElementsByClassName('e-input'); 
          var value1, value2, value3, target; 
          for (var i = 0; i < x.length; i++) { 
// get the values of protein, fat and carbohydrate columns  
            switch (x[i].name) { 
              case 'Protein': value1 = +x[i].value; 
              case 'Fat': value2 = +x[i].value; 
              case 'Carbohydrate': value3 = +x[i].value; 
              case 'CaloriesIntake': target = x[i];  // get the target element 
          target.value = value1 * 4 + value2 * 4 + value3 * 9; // change the target element value 
Please get back to us if you need further assistance. 

KN Karthik Nani replied to Dhivya Rajendran December 20, 2023 12:08 PM UTC


 looks like this is valid only for Normal editing could you please check of batch editing as well

RR Rajapandi Ravi Syncfusion Team December 22, 2023 07:20 AM UTC


After reviewing your query, we could see that you are using Batch editing in your application and like to get an event when editing the specific cell. We would like to inform you that when you edit the cell in the batch editing the cellEdit event gets triggered. So, you can perform your own action and achieve your requirement with the cellEdit event of Grid. Please refer the below API documentation for more information.

API: https://helpej2.syncfusion.com/react/documentation/api/grid/#celledit

Live Chat Icon For mobile
Up arrow icon