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

hi,

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.


Thanks

1 Reply

Dhivya Rajendran 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. 
 
  
app.component.html 
 
 <ejs-grid #grid [dataSource]='data'(actionComplete)='actionComplete($event)' (cellSave)="onsave($event)" [editSettings]='editSettings' [toolbar]='toolbar' [height]='150'> 
                    <e-columns> 
                        <e-column field='CaloriesIntake' headerText='Calories Intake' textAlign='Right' [validationRules]='customerIDRules' [valueAccessor]='totalCalories'  width=150></e-column> //give fieldName for custom column also 
                    </e-columns> 
                </ejs-grid> 
 
app.component.ts 
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. 
  
Regards, 
R.Dhivya
Loader.
Live Chat Icon For mobile
Up arrow icon