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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146506 Aug 6,2019 02:20 PM UTC Aug 9,2019 05:18 AM UTC React - EJ 2 3
loading
Tags: Grid
Rodrigo Fazendeiro
Asked On August 6, 2019 02:20 PM UTC

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 [Syncfusion]
Replied On 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}> 
            <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>); 
  } 


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

Regards, 
R.Dhivya 


Rodrigo Fazendeiro
Replied On August 8, 2019 02:34 PM UTC

Thank you for the reply. This should resolve our issue

Dhivya Rajendran [Syncfusion]
Replied On 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. 
Regards, 
R.Dhivya 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon