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

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

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?

3 Replies

DR Dhivya Rajendran Syncfusion Team August 7, 2019 01:36 PM UTC

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}> 
              <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> 
            <Inject services={[Page, Toolbar, Edit]} /> 

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


RF Rodrigo Fazendeiro August 8, 2019 02:34 PM UTC

Thank you for the reply. This should resolve our issue

DR Dhivya Rajendran Syncfusion Team August 9, 2019 05:18 AM UTC

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. 

Live Chat Icon For mobile
Up arrow icon