Highlight selected cells after re-render.

[Shreekumar]

I have implemented a PivotView as defined in this example

Also, I'm using context menu on Pivot to achieve the Cell Lock / Unlock feature (Basically, I'm selecting multiple cells and storing it into array for my reference)

Is there any way, I can highlight all the selected cells after re-render? (After calling initEngine())

[Sivamathi Natarajan]

Hi Shreekumar, 

 

We have modified the sample as per your requirement to highlight the selected cells. Kindly check the below code example.  

 

Code Example: 

 

let index: number = 0; 

 

public selectedCells: string[] = []; 

 

  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); 

      this.selectedCells[index] = this.columnIndex + "_" + this.rowIndex; 

      index++; 

      args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(args)); 

      this.previousArgs = args; 

      this.previousValue = args.currentCell.value; 

    } 

  } 

 

 

queryCell(args: any): void { 

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

    if (this.selectedCells.length > 0) { 

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

        if (args.cell && JSON.parse(args.cell.getAttribute('aria-colIndex')) == this.selectedCells[i].split("_")[0] && JSON.parse(args.cell.getAttribute('index')) == this.selectedCells[i].split("_")[1]) { 

          // 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 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. 

[Shreekumar]

Thank you so much! This is want I wanted.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Thanks for the response. Please get in touch with us if you would require any further assistance. 

Regards, 

Sivamathi.