Display Sum of two columns values in another column while Cell Edit

[Rodrigo Fazendeiro]

So I'm using a simple grid that has 4 columns and the user can enter edit mode, fill out the cells and save. I have this working without any problem.

My problem is one of the columns is a read-only field that gets filled by the sum of two other editable her fields. So when the user enters edit mode for a row and changes the value (or inserts a new value if its a new row) of these 2 fields, I want the sum of them to appear on the read-only field. This should happen when still in edit mode and not after I click save. 

Is there a way to resolve this issue?

[Dhivya Rajendran]

Hi Rodrigo, 

Greeting from Syncfusion. 

We have analyzed your requirement and we have created a sample based on your requirement. In the below sample, we have bind the change event for numeric text box and apply value for Total field based on the Quantity and Price field. 

Please refer the below code example and sample for more information. 

export class BatchEdit extends SampleBase { 

  constructor() { 

    . . . . . . . . 

    this.edParams = { params: { change: this.change, value: 0, min: 0 } }; 

    this.gridData = [{ OrderID: 1001, CustomerName: 'VINET', Quantity: 3, Price: 14.25, Total: 45.5 }, 

    { OrderID: 1002, CustomerName: 'TOMSP', Quantity: 5, Price: 89.45, Total: 447.25 } 

    ] 

    function actionBegin(args) {      

      if (args.requestType == 'save') { 

        // apply the updated value to the Total field 

        args.data['Total'] =  parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Total').value); 

      } 

    } 

    function change(args) { 

      this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Total').value = parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Quantity').value) * parseFloat(this.gridObj.element.querySelector("#" + this.gridObj.element.id + 'Price').value) 

    } 

  } 

  render() { 

    return (<div className='control-pane'> 

          <GridComponent ref={grid => this.gridObj = grid} dataSource={this.gridData} pageSettings={this.pageSettings} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} actionBegin={this.actionBegin}> 

            <ColumnsDirective> 

              <ColumnDirective field='Quantity' headerText='Quantity' width='120' format='N' textAlign='Right' editType='numericedit' edit={this.edParams}></ColumnDirective> 

              <ColumnDirective field='Price' headerText='Price' width='120' format='C2' textAlign='Right' editType='numericedit' edit={this.edParams}></ColumnDirective> 

              <ColumnDirective field='Total' allowEditing={false} headerText='Total' width='120' format='C2' textAlign='Right' ></ColumnDirective> 

            </ColumnsDirective> 

            <Inject services={[Page, Toolbar, Edit]} /> 

          </GridComponent> 

    </div>); 

  } 

} 

Sample : https://stackblitz.com/edit/react-9brvtz-gmrfrt?file=index.js 

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

Regards, 

R.Dhivya 

[Rodrigo Fazendeiro]

Thank you for the reply. This should resolve our issue

[Dhivya Rajendran]

Hi Rodrigo, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to resolve the problem. Please get back to us if you need further assistance from us. 

Regards, 

R.Dhivya