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

[Shreekumar]

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?

[Sivamathi Natarajan]

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. 

 

Sample Link: https://stackblitz.com/edit/angular-iqe2sr-qkaerq?file=app.component.ts 

 

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.

[Shreekumar]

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. 

 

Sample Link: https://stackblitz.com/edit/angular-iqe2sr-qkaerq?file=app.component.ts 

 

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.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

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. 

 

Sample Link: https://stackblitz.com/edit/angular-iqe2sr-bkmrd2?file=app.component.ts 

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi.