Modify other cell in Batch mode

[Cedric E]

Hi,

I have a requirement in Grid that should update other columns value based on a computation. So, the behavior should be after editing Cell 1, the values in Cell 2 and Cell 3 will be updated based on some computation. Is there a callback that I can use for this? Also, I am using Batch in editSettings.mode.

Thanks.

[Balaji Sekar]

Hi Cedric, 

Greetings from the Syncfusion support. 

To achieve your requirement we suggest you to use cellEditParams feature in the Batch edit mode. 

Using cellEditParams feature, we have enabled the change event of the numeric edit type in the Price column. When we edit the Price value in the edit mode it will compute “Tax” and “Total” values and update to corresponding cells using this event. 

We have prevented edit options in the Tax and Total Price column using cellEdit event of the Grid. 

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

[index.js] 

   this.priceEditParams = { params: { change: this.changeFn.bind(this) } }; 

  } 

  changeFn(e) { 

    var rowDetils = this.grid.getRowInfo(e.event.target); 

    this.grid.updateCell(rowDetils.rowIndex, "Tax", e.value / 10); 

    this.grid.updateCell(rowDetils.rowIndex, "Total", e.value / 10 + e.value); 

  } 

  cellEdit(args) { 

    if (args.columnName == "Tax" || args.columnName == "Total") { 

      args.cancel = true; // Prevent edit action in Tax and Total columns 

    } 

  } 

    <GridComponent 

              ref={g => (this.grid = g)} 

              dataSource={this.customData} 

              pageSettings={this.pageSettings} 

              toolbar={this.toolbarOptions} 

              allowPaging={true} 

              editSettings={this.editSettings} 

              cellEdit={this.cellEdit.bind(this)} 

            > 

              <ColumnsDirective> 

                <ColumnDirective 

                  field="Item" 

                  headerText="Product" 

                  width="120" 

                  textAlign="Right" 

                  isPrimaryKey={true} 

                /> 

                <ColumnDirective 

                  field="Price" 

                  headerText="Price" 

                  format="C2" 

                  editType="numericedit" 

                  edit={this.priceEditParams} 

                  width="150" 

                /> 

                <ColumnDirective 

                  field="Tax" 

                  headerText="Tax" 

                  width="120" 

                  format="C2" 

                  textAlign="Right" 

                /> 

                <ColumnDirective 

                  field="Total" 

                  headerText="Total" 

                  format="C2" 

                  width="170" 

                /> 

              </ColumnsDirective> 

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

            </GridComponent> 

Sample link: https://stackblitz.com/edit/react-cdp6fa-aeuv9l  

Help Documentation:     https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-type-and-its-params  

 https://ej2.syncfusion.com/react/documentation/api/grid/#celledit  

                                            https://ej2.syncfusion.com/react/documentation/api/numerictextbox#change  

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[Cedric E]

Hi Balaji,

I've tried your solution and it works. 

Is this approach also possible in Normal edit mode?

Thanks.

[Balaji Sekar]

Hi Cedric, 

We are happy to hear that the provided solution works fine at your end. 

Query: “Is this approach also possible in Normal edit mode?” 

No, we have achieved your requirement in change event of NumericText editing while enable Normal edit mode and we have prevented the editing option the “Tax” and “Total’ column using column.allowEditing is false  

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

[index.js] 

 changeFn(e) { 

    var rowDetils = this.grid.getRowInfo(e.event.target); 

    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

    if (grid.element.querySelector(".e-gridform")) { 

      grid.element.querySelector(".e-gridform input[name='Tax']").value = 

        e.value / 10; 

      grid.element.querySelector(".e-gridform input[name='Total']").value = 

        e.value / 10 + e.value; 

    } 

  } 

 <GridComponent 

              ref={g => (this.grid = g)} 

              dataSource={this.customData} 

              pageSettings={this.pageSettings} 

              toolbar={this.toolbarOptions} 

              allowPaging={true} 

              editSettings={this.editSettings} 

            > 

              <ColumnsDirective> 

                <ColumnDirective 

                  field="Item" 

                  headerText="Product" 

                  width="120" 

                  textAlign="Right" 

                  isPrimaryKey={true} 

                /> 

                <ColumnDirective 

                  field="Price" 

                  headerText="Price" 

                  format="C2" 

                  editType="numericedit" 

                  edit={this.priceEditParams} 

                  width="150" 

                /> 

                <ColumnDirective 

                  field="Tax" 

                  headerText="Tax" 

                  width="120" 

                  format="C2" 

                  textAlign="Right" 

                  allowEditing={false} 

                /> 

                <ColumnDirective 

                  field="Total" 

                  headerText="Total" 

                  format="C2" 

                  width="170" 

                  allowEditing={false} 

                /> 

              </ColumnsDirective> 

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

            </GridComponent> 

 

Sample  link: https://stackblitz.com/edit/react-cdp6fa-xc8aur  

 

Help Documentation: https://ej2.syncfusion.com/react/documentation/api/grid/columnModel/#allowediting  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Cedric E]

Hi Balaji,

I've tried your solution but it seem to only work for disabled column. My scenario is when you entered a value in Volume field, it will remove the value in length, width and height fields same goes when you also entered a value in those 3 fields, it will remove the value in Volume field. I've also tried removing the value in the visible numeric textbox but whenever I focus on the field the value returns. Maybe its the internal state of the grid that is assigning the value into the field.

Please see below example.

export class NormalGrid extends Component {

    constructor() {

        super();

        this.customData = [

            { Id: 1, Product: 'Prod A', Length: 3, Width: 4, Height: 5, Volume: null},

            { Id: 1, Product: 'Prod B', Length: 4, Width: 5, Height: 7, Volume: null},

            { Id: 1, Product: 'Prod C', Length: 5, Width: 6, Height: 9, Volume: null},

        ];

        

        this.toolbarOptions = ["Add", "Delete", "Update", "Cancel"];

        this.editSettings = {

          allowEditing: true,

          allowAdding: true,

          allowDeleting: true,

          mode: "Normal"

        };

        this.pageSettings = { pageCount: 5 };

        this.editParams = { 

            params: { 

                change: () => {

                    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

                    if (grid.element.querySelector(".e-gridform")) {

                        grid.element.querySelector(".e-gridform input[name='Volume']").value = null;

                    }

                }

            }

        };

        

        this.volumeEditParams = { 

            params: { 

                change: () => {

                    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

                    if (grid.element.querySelector(".e-gridform")) {

                        grid.element.querySelector(".e-gridform input[name='Length']").value = null;

                        grid.element.querySelector(".e-gridform input[name='Width']").value = null;

                        grid.element.querySelector(".e-gridform input[name='Height']").value = null;

                    }

                }

            }

        };

    }

    render() {

        return (

            <div>

                <GridComponent ref={g => (this.grid = g)} dataSource={this.customData} pageSettings={this.pageSettings} 

                    toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings}>

                    <ColumnsDirective> 

                        <ColumnDirective  

                        field="Product" 

                        headerText="Product" 

                        width="120" 

                        textAlign="Right" 

                        isPrimaryKey={true} 

                        /> 

                        <ColumnDirective 

                        field="Length" 

                        headerText="Length" 

                        format="N2" 

                        editType="numericedit" 

                        edit={this.editParams} 

                        width="150" 

                        /> 

                        <ColumnDirective 

                        field="Width" 

                        headerText="Width" 

                        width="120" 

                        format="N2" 

                        editType="numericedit" 

                        edit={this.editParams} 

                        textAlign="Right"

                        /> 

                        <ColumnDirective 

                        field="Height" 

                        headerText="Height" 

                        format="N2" 

                        width="170"

                        edit={this.editParams} 

                        editType="numericedit" 

                        /> 

                        <ColumnDirective 

                        field="Volume" 

                        headerText="Volume" 

                        format="N2" 

                        width="170"

                        edit={this.volumeEditParams} 

                        editType="numericedit" 

                        /> 

                    ColumnsDirective> 

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

                GridComponent>

            div>

        )

    }

}

[Balaji Sekar]

Hi Cedric, 

 

Based on your query we can update “Price” value as null in edit mode while edit a “Tax” or “Total” input component and also update the null to “Tax” and “Total” value while edit “Price” using cellEditParams. 

 

In below code example, we have achieved your requirement using change event of numericTexBox component. Please refer the below code example and sample for more information. 

 

[index.js] 

this.priceEditParams = { params: { change: this.changeFn.bind(this) } }; 

    this.editParams = { 

      params: { 

        change: e => { 

          if (e.isInteracted) { 

            var inputEle = this.grid.element.querySelector( 

              ".e-gridform input[name='Price']" 

            ); 

            if (inputEle) { 

              var priceEle = inputEle.previousElementSibling.ej2_instances[0]; 

              priceEle.value = null; 

            } 

          } 

        } 

      } 

    }; 

  } 

  changeFn(e) { 

    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

    if (grid.element.querySelector(".e-gridform") && e.isInteracted) { 

      var taxEle = this.grid.element.querySelector( 

        ".e-gridform input[name='Tax']" 

      ); 

      var totalEle = this.grid.element.querySelector( 

        ".e-gridform input[name='Total']" 

      ); 

      if (taxEle) { 

        taxEle.previousElementSibling.ej2_instances[0].value = null; 

      } 

      if (totalEle) { 

        totalEle.previousElementSibling.ej2_instances[0].value = null; 

      } 

    } 

  } 

 

Sample link: https://stackblitz.com/edit/react-cdp6fa-w2wgap  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar