Calculate another column value while editing on Dialog mode

[Gabriel Alva]

Hi. I'm working with the grid component to edit values on Dialog mode. I need to calculate the column estimatedTotalCost based on "quantity * estimatedUnitCost". I've managed to do it after the user saves the row using the actionBegin event, 'save' requestType, but I would like to calculate the value while the user is editing the values for the row on the Dialog, so they can see the calculated value before hitting the save button. Is there any event I can use to accomplish this?

Thanks

Stackblitz sample
https://stackblitz.com/edit/stackblitz-starters-mwtmsw?file=src%2Fapp%2Fdemo%2Fdemo.component.html

Best regards,
Gabriel

[Aishwarya Rameshbabu]

Hi Gabriel Alva,

Greetings from Syncfusion support.

Upon reviewing your query, we could see that you want to update the value of one column based on other columns using Dialog Editing of the Grid. This can be achieved by defining the editType of the column to specify the type of editor used for editing the column, and providing an object for the edit property to customize the editing behavior.

Also, please ensure that when enabling editing, it is necessary to set the isPrimaryKey property value to true for the unique column. 

Please refer to the below sample, code example, and video demo for further information. In this example, the editing of the "estimatedTotalCost" column has been disabled, allowing it to update automatically based on the values of the "quantity" and "estimatedUnitCost" columns.

demo.component.html

 

  <e-columns>

        …………………………………

        …………………………………

 

    <e-column

      field="quantity"

      headerText="Qtty"

      width="150"

      editType="numericedit"

      [edit]="qntyParams"

    ></e-column>

    <e-column

      field="estimatedUnitCost"

      headerText="Est. Unit Cost"

      width="150"

      editType="numericedit"

      [edit]="costParams"

    ></e-column>

    <e-column

      field="estimatedTotalCost"

      headerText="Est. Total Cost"

      width="150"

      [allowEditing]="false"

    ></e-column>

  </e-columns>

</ejs-grid>

 

demo.component.ts

 

    this.costParams = {

      params: { change: this.calculateTotalCost.bind(this) },

    };

    this.qntyParams = {

      params: { change: this.calculateTotalCost.bind(this) },

    };

 

 

calculateTotalCost(args: ChangeEventArgs): void {

    const formEle = (args.event.target as any).closest('form').ej2_instances[0];

    formEle.getInputElement('estimatedTotalCost').value =

      formEle.getInputElement('quantity').value *

      formEle.getInputElement('estimatedUnitCost').value;

  }

 

Sample: https://stackblitz.com/edit/stackblitz-starters-oarl5t?file=src%2Fapp%2Fdemo%2Fdemo.component.ts,src%2Fapp%2Fdemo%2Fdemo.component.html

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R

Attachment: DialogEdit_e04676c7.zip