We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151385 Feb 10,2020 09:50 AM UTC Feb 13,2020 06:25 AM UTC Angular - EJ 2 3
loading
Tags: PivotView
Shreekumar
Asked On February 10, 2020 09:50 AM UTC

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 [Syncfusion]
Replied On 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.

Shreekumar
Replied On 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.

Sivamathi Natarajan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon