1. Home
  2. Forum
  3. Angular - EJ 2
  4. Calculate another column value when a column value changed in grid edit

Calculate another column value when a column value changed in grid edit

Hi,

Do you have a solution to trigger a custom function on event like focus, change or blur on one input.

This function needs to calculate and update value on another field.

I've followed this solution: https://www.syncfusion.com/forums/151062/trigger-event-after-editing-specific-cell 

but I got a bug: the updated column is displaying the correct value but as soon as focus on this field, it reverts to his original value.

Could you help me?

Regards,

Matt


3 Replies
PS Pavithra Subramaniyam Syncfusion Team September 19, 2023 06:28 AM UTC

Hi Matthieu,


You can achieve your requirement by adding “change” event for the required column editors using the column’s “edit.params” property. For the default edit column (string edit type), the TextBox component will be rendered. For this, you can add the “input” event. Please refer to the code example, documentation, and sample link for more information.


<e-column field="CustomerID" headerText="Customer ID" width="140" [validationRules]="customeridrules"

  [edit]="editparams"></e-column>

<e-column field="Freight" headerText="Freight" width="140" format="C2" textAlign="Right" editType="numericedit"

  [validationRules]="freightrules" [edit]="editparams"></e-column>

<e-column field="OrderDate" headerText="Order Date" width="120" editType="datetimepickeredit" [format]="formatoptions"

  [edit]="editparams" textAlign="Right"></e-column>

<e-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit" [edit]="editparams">

</e-column>

 


this.editparams = {

  params: {

    change: (args) => {

      console.log(args.value);

    },

    input: (args) => { // for text box component

      console.log(args.value);

    },

  },

};

 


https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#customize-editors-using-params


Sample: https://stackblitz.com/edit/angular-pn7qzj-y4uq5k?file=src%2Fapp.component.ts


Inside this event, you can do your calculations and set another field value by setting the “value” property of EJ2 editor components using its instance.


 

// here Total is the field name of the required column to be changed

this.grid.element.querySelector('#' + this.grid.element.id + 'Total').ej2_instances[0].value = calculatedValue;

 


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


MA Matthieu September 19, 2023 08:06 AM UTC

Hi,


Thanks for the answer!

Where can I find the API doc explaining the possible properties of edit.params?


Regards,

Matt


Loader.
Up arrow icon