Highlight selected cells in Pivot Grid

[Dileep gagan R]

Hi, 

We are trying to highlight multiple selected cells inside pivot grid. We tried using querycellinfo event but not able to highlight all the cells selected incase of multiselect. 

In below mentioned snippet we are trying to highlight the cells inside selectedCellInfo array on context menu click.

Kindly suggest what are the steps.

 cellSelected(args: PivotCellSelectedEventArgs) {

    // this.pivotGridObj.pivotView.onDrill(args.target)

    if (args && args.selectedCellsInfo.length > 0 && args.selectedCellsInfo[0].currentCell.axis === 'value') {

      this.cellInfo.row = args.selectedCellsInfo[0].currentCell.rowIndex;

      this.cellInfo.column = args.selectedCellsInfo[0].currentCell.colIndex;

      this.selectedCellInfo = args.selectedCellsInfo;

    }

  }

Thanks,

Dileep Gagan R

[Sivamathi Natarajan]

Hi Dileep, 

 

Thanks for contacting Syncfusion support. 

 

We suspect that your requirement is the selection should be applied in multiple cells. To select the multiple cells you have to use SHIFT or CTRL key along with click operation on cells. Also, we have mentioned the same in our UG  

https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/?no-cache=1#selection.  

 

We hope this is your requirement if not kindly share us more details along with screen-shots/video if possible. 

 

Regards, 

Sivamathi.  

[Dileep gagan R]

No , our requirement is change the color of selected cells on a button click, after re render

[Sivamathi Natarajan]

Hi Dileep, 

 

Based on your requirement we have prepared a sample to highlight the selected cells on button click once pivot table re-render. Kindly check the following code example. 

 

Code Example: 

onCellSelected(args: PivotCellSelectedEventArgs): void { 

    if (args.selectedCellsInfo.length > 0) { 

      let i : number = 0; 

      this.selectedCells = []; 

      for (let cell of args.selectedCellsInfo) { 

          this.selectedCells[i] =  cell.currentCell.formattedText; 

          i++; 

      } 

    } 

  } 

 

  applyFormat(e: Event): void { 

    this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this); 

    this.pivotObj.layoutRefresh(); 

  } 

 

  queryCell(args: any): void { 

    (this.pivotObj.renderModule as any).rowCellBoundEvent(args); 

    for (var i = 0; i < this.selectedCells.length; i++) { 

      if (this.selectedCells[i] == args.cell.innerText) 

      args.cell.style.backgroundColor = "red"; 

    } 

  } 

 

 

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

 

We hope the above sample meets your requirements. if not then kindly provide us more details about your requirements. This would be a very helpful for us to proceed it further. 

  

Please let us know if you have concern. 

 

Regards, 

Sivamathi.