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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

trigger event after editing specific cell

Thread ID:





151062 Jan 29,2020 04:44 PM UTC Jan 30,2020 11:14 AM UTC Angular - EJ 2 1
Tags: Grid
Gaylord Petit
Asked On January 29, 2020 04:44 PM UTC


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.


Dhivya Rajendran [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon