Enable tab in formula cell

Question

Hi, Using batch mode if you edit a cell and then press the 'tab' key, the grid moves to the next cell, and the new value is saved.

This is not happening in a formula cell, if you edit a formula cell and then press tab, the grid moves to the next cell, but the change ins not saved.

Please check the next example, try to modify Unit price, and then press tab, the value is not saved. But doing the same process in product name column, the grid save the new value.

https://ej2.syncfusion.com/angular/documentation/grid/editing/batch-editing/#automatically-update-the-column-based-on-another-column-edited-value-in-batch-mode

Joseph Christ Nithin Issack · Answer

We were able to reproduce the reported issue from our side. We are currently validating the issue further. We will provide further details on or before 29^th march 2022. We appreciate your patience until then.

Christian · Answer

Hello, any update about this?

Rajapandiyan Settu · Answer

Hi Christian,Sorry for the inconvenience caused.Query: if
you edit a formula cell and then press tab, the grid moves to the next cell,
but the change ins not saved.You can
resolve the reported behavior by using following highlighted code.

[app.component.ts]
   
    ngOnInit(): void {
      this.priceParams = {
        create: () => {
          this.priceElem = document.createElement('input');
          return this.priceElem;
        },
        read: (args) => {
          return parseFloat(args.value);
  // get the value from args
        },
        destroy: () => {
          this.priceObj.destroy();
        },
        write: (args) => {
          var rowData = args.rowData;
          var rowIndex = this.grid.getRowInfo(args.row).rowIndex;
          this.priceObj = new NumericTextBox({
            value: args.rowData[args.column.field],
            change: function (args) {
              var totalCostValue = args.value * rowData['UnitsInStock'];
              this.grid.updateCell(rowIndex, 'TotalCost', totalCostValue);
            }.bind(this),
          });
          this.priceObj.appendTo(this.priceElem);
        },
      };
      this.stockParams = {
        create: () => {
          this.stockElem = document.createElement('input');
          return this.stockElem;
        },
        read: (args) => {
          return parseFloat(args.value);
  // get the value from args
        },
        destroy: () => {
          this.stockObj.destroy();
        },
        write: (args) => {
          var rowData = args.rowData;
          var rowIndex = this.grid.getRowInfo(args.row).rowIndex;
          this.stockObj = new NumericTextBox({
            value: args.rowData[args.column.field],
            change: function (args) {
              var totalCostValue = args.value * rowData['UnitPrice'];
              this.grid.updateCell(rowIndex, 'TotalCost', totalCostValue);
            }.bind(this),
          });
          this.stockObj.appendTo(this.stockElem);
        },
      };
    }
    cellSaved(args) {
      
  // update the TotalCost cell value
      if (args.columnName == 'UnitsInStock') {
        var totalCostValue = args.value * args.rowData['UnitPrice'];
        var rowIndex = parseInt(args.cell.getAttribute('index'));
        this.grid.updateCell(rowIndex, 'TotalCost', totalCostValue);
      }
      if (args.columnName == 'UnitPrice') {
        var totalCostValue = args.value * args.rowData['UnitsInStock'];
        var rowIndex = parseInt(args.cell.getAttribute('index'));
        this.grid.updateCell(rowIndex, 'TotalCost', totalCostValue);
      }
    }

Sample: https://stackblitz.com/edit/angular-zknjcu?file=app.component.tsPlease get
back to us if you need further assistance with this.Regards,Rajapandiyan S