Is there any way to get last modified cell element (After Render)?

Hi Team,

I'm adding a textbox inside a cell on (drillThrough) event and attaching a focusout event to that.

Here's my code:

cellEvent(args: DrillThroughEventArgs) {
if (args.currentCell.axis === 'value' && (!this.previousArgs || (this.previousArgs.currentCell !== args.currentCell))) {
args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" maxlength="10"></input>';
args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(event));
this.previousArgs = args;
}
}

On focus out, I'm updating cell value and refreshing the PivotGrid.

onFocusOut(args) {
val[this.previousArgs.currentCell.actualText] = args.path[0].value;
if (this.previousArgs && this.previousArgs.currentTarget.querySelector('input')) {
this.previousArgs.currentTarget.innerHTML =
'<span class="e-cellvalue">' + args.path[0].value + '</span>';
this.previousArgs = undefined;
}
this.pivotGridObj.render();
}

Is there any way, I can highlight the modified cell after Re-Render?


3 Replies

SN Sivamathi Natarajan Syncfusion Team February 11, 2020 02:51 PM UTC

Hi shreekumar, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement we have prepared a sample to edit the cell value and highlight the modified value in drillThrough event. Kindly check the below code example. 
  
Code Example: 
 drillThrough(args): void { 
    if (args.currentCell.axis === 'value') { 
      args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" maxlength="10"></input>'; 
      this.rowIndex = args.currentCell.rowIndex; 
      this.columnIndex = args.currentCell.colIndex; 
      this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this); 
      args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(args)); 
      this.previousArgs = args; 
      this.previousValue = args.currentCell.value; 
    } 
  } 
  onFocusOut(args: any) { 
    // To maintain the value in pivot table 
    let fields: object[] = []; 
    let row: string[] = args.currentCell.rowHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter); 
    let column: string[] = args.currentCell.columnHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter); 
    for (let j: number = 0; j < row.length; j++) { 
      let field: object = {}; 
      field[this.pivotObj.dataSourceSettings.rows[j].name] = row[j]; 
      fields.push(field); 
    } 
    for (let j: number = 0; j < column.length; j++) { 
      let field: object = {}; 
      field[this.pivotObj.dataSourceSettings.columns[j].name] = column[j]; 
      fields.push(field); 
    } 
    let index: number[] = []; 
    for (let i: number = 0; i < Pivot_Data.length; i++) { 
      let value: number = 0; 
      for (let j: number = 0; j < fields.length; j++) { 
        if (Pivot_Data[i][Object.keys(fields[j])[0]] && 
          String(Pivot_Data[i][Object.keys(fields[j])[0]]) === fields[j][Object.keys(fields[j])[0]]) { 
          value++; 
        } 
      } 
      if (value === fields.length) { 
        index.push(i); 
      } 
    } 
    for (let i: number = 0; i < index.length; i++) { 
      Pivot_Data[index[i]][args.currentCell.actualText] = 
        Number(args.currentTarget.querySelector('input').value.replace(/[^0-9]+/g, "")) / index.length; 
    } 
    if (index.length) { 
      (this.pivotObj as any).initEngine(); 
    } 
  } 
 
  queryCell(args: any): void { 
    (this.pivotObj.renderModule as any).rowCellBoundEvent(args); 
    if (args.cell && JSON.parse(args.cell.getAttribute('aria-colIndex')) == this.columnIndex && JSON.parse(args.cell.getAttribute('index')) == this.rowIndex) { 
     // Here you can apply any styles to the specified class in app.component.css file. 
      args.cell.classList.add('selectedCell') 
    } 
  } 
 
 
 
 
Meanwhile, we have prepared a sample for your reference. 
 
 
We hope that the above sample meets your requirement if not kindly share us more details along with screen-shots/video if possible. 
 
Regards, 
Sivamathi.


SH Shreekumar replied to Sivamathi Natarajan February 12, 2020 06:24 AM UTC

Hi shreekumar, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement we have prepared a sample to edit the cell value and highlight the modified value in drillThrough event. Kindly check the below code example. 
  
Code Example: 
 drillThrough(args): void { 
    if (args.currentCell.axis === 'value') { 
      args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" maxlength="10"></input>'; 
      this.rowIndex = args.currentCell.rowIndex; 
      this.columnIndex = args.currentCell.colIndex; 
      this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this); 
      args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(args)); 
      this.previousArgs = args; 
      this.previousValue = args.currentCell.value; 
    } 
  } 
  onFocusOut(args: any) { 
    // To maintain the value in pivot table 
    let fields: object[] = []; 
    let row: string[] = args.currentCell.rowHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter); 
    let column: string[] = args.currentCell.columnHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter); 
    for (let j: number = 0; j < row.length; j++) { 
      let field: object = {}; 
      field[this.pivotObj.dataSourceSettings.rows[j].name] = row[j]; 
      fields.push(field); 
    } 
    for (let j: number = 0; j < column.length; j++) { 
      let field: object = {}; 
      field[this.pivotObj.dataSourceSettings.columns[j].name] = column[j]; 
      fields.push(field); 
    } 
    let index: number[] = []; 
    for (let i: number = 0; i < Pivot_Data.length; i++) { 
      let value: number = 0; 
      for (let j: number = 0; j < fields.length; j++) { 
        if (Pivot_Data[i][Object.keys(fields[j])[0]] && 
          String(Pivot_Data[i][Object.keys(fields[j])[0]]) === fields[j][Object.keys(fields[j])[0]]) { 
          value++; 
        } 
      } 
      if (value === fields.length) { 
        index.push(i); 
      } 
    } 
    for (let i: number = 0; i < index.length; i++) { 
      Pivot_Data[index[i]][args.currentCell.actualText] = 
        Number(args.currentTarget.querySelector('input').value.replace(/[^0-9]+/g, "")) / index.length; 
    } 
    if (index.length) { 
      (this.pivotObj as any).initEngine(); 
    } 
  } 
 
  queryCell(args: any): void { 
    (this.pivotObj.renderModule as any).rowCellBoundEvent(args); 
    if (args.cell && JSON.parse(args.cell.getAttribute('aria-colIndex')) == this.columnIndex && JSON.parse(args.cell.getAttribute('index')) == this.rowIndex) { 
     // Here you can apply any styles to the specified class in app.component.css file. 
      args.cell.classList.add('selectedCell') 
    } 
  } 
 
 
 
 
Meanwhile, we have prepared a sample for your reference. 
 
 
We hope that the above sample meets your requirement if not kindly share us more details along with screen-shots/video if possible. 
 
Regards, 
Sivamathi.

Thanks for the update. This is what I wanted.

Is there any way Left Arrow and Right Arrow keys work within appended text-box of a cell? Because, it is taking PivotGrid keyboard shortcuts as precedence.


SN Sivamathi Natarajan Syncfusion Team February 13, 2020 06:25 AM UTC

 
You can restrict the keyboard shortcuts using following code example. 
 
Code Example: 
 
<div class="row"> 
  <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showTooltip='false' width='100%' 
    height='300' [gridSettings]='gridSettings' [editSettings]='editSettings' (drillThrough)='drillThrough($event)' (dataBound)='dataBound($event)'> 
  </ejs-pivotview> 
</div> 
 
 
dataBound(args): void { 
    this.pivotObj.grid.addEventListener('keyPressed', this.keyDownHandler.bind(this)); 
  } 
 
  keyDownHandler(args: KeyboardEventArgs) { 
    args.cancel = true; 
  } 
 
 
 
Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link. 
 
 
We hope the above sample meets your requirements. 
 
Regards, 
Sivamathi. 


Loader.
Up arrow icon