Flexgrid - cell edit event value

Flexgrid - cell edit event value

Posted by: sravya_tamma on 29 April 2021, 8:09 am EST

• 

  sravya_tamma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 April 2021, 8:09 am EST

  Hello,

  I added a comment field using ng-template, When i type text in “comment” field, cellEditEnding event is being triggered. But when i log the value “newValue” i get empty.
  
  This event handler works fine for other fields and they don’t have ng-template

  Am i missing anything here ? please let me know

  s.cellEditEnding.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellEditEndingEventArgs) => {
              const oldVal = s.rows[e.row].dataItem[s.columns[e.col].binding];
              const newValue = wjcCore.changeType(s.activeEditor.value, wjcCore.DataType.Number, s.columns[e.col].format);
              s.rows[e.row].dataItem[s.columns[e.col].binding] = newValue;
              if (oldVal !== newValue) {
                  this.setChanged(s, e.row, e.col, oldVal);
              }
          });
  
  

  <wj-flex-grid-column header="Comments" [minWidth]="250" binding="comments" width="2*" word-wrap="true">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
            <div class="divwordwrap" style="word-break:break-word;">
              {{cell.item.comments}}
            </div>
          </ng-template>
  
          <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
            <div class="tadiv">
              <textarea class="tadiv" [(ngModel)]="cell.value">   </textarea>
            </div>
          </ng-template>
        </wj-flex-grid-column>
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 3 May 2021, 5:04 pm EST

  Hi,

  If you need to compare old and new values, then you may use the cellEditEnded event and get the old and new values using the following code:

  grid.cellEditEnded.addHandler((s: FlexGrid, e: CellEditEndingEventArgs) => {
  let oldValue = e.data;
  let newValue = s.getCellData(e.row, e.col);
    if (oldValue !== newValue) {
      console.log("value changed");
    }
  });
  

  You may also refer to the following sample demonstrating the same: https://codesandbox.io/s/adoring-tesla-wejyy?file=/src/app/app.component.ts

  ~sharad