trigger event after editing specific cell

[Gaylord Petit]

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.

https://stackblitz.com/edit/angular-tba1mt-xyx5dt?file=app.component.html

Thanks

[Dhivya Rajendran]

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.   

  

Sample : https://stackblitz.com/edit/angular-tba1mt-xsfuii?file=app.component.html 

 

UG : https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete 

oninput event : https://www.w3schools.com/jsref/event_oninput.asp 

 

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