Pivot table Selection lost on resizing

[Paolo Turello]

Hello,

I'm using the Pivot Table component inside the splitter and to ensure no double scrollbars are shown (those inside the pivot and splitter pane) I'm forcing the pivot height and width to reflect a wrapper div filling the splitter pane but every time I resize the splitter panes the pivot selection is lost; the same behavior occurs when resizing the browser's window and also occurs when the pivot component is outside the splitter and sizes are not enforced.

I attached a sample app that reproduce this issue.

Any suggestions, workarounds or solution to avoid this problem or to "save and restore" the selected cell(s)?

Thanks in advance.

Attachment: pivottest_57c8f112.zip

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Paolo,

Currently, we are analyzing this query at our end, and we will update further details within two business day (July 1, 2022).

Regards,

Angelin Faith Sheeba.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Paolo,

Using queryCellInfo and headerCellInfo event, you can maintain the cell selection while resizing. Please refer the below code example.

Code Example:

onCellSelected(args: PivotCellSelectedEventArgs) {

             //Get the selected cells information here.

                this.selectedCells = args.selectedCellsInfo;

                this.selectionData = this.getPivotSelectedElements(args.selectedCellsInfo);

}

 

enginePopulated(): void {

                if (this.pivotView.grid) {

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

                                this.pivotView.grid.headerCellInfo = this.headerCell.bind(this);

                }

}

 

queryCell(args: any): void {

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

                if (this.selectedCells.length > 0) {

                                var colIndex = args.cell.getAttribute('aria-colindex');

                                var rowIndex = args.cell.getAttribute('index');

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

                                                if (this.selectedCells[i].currentCell.rowIndex.toString() === rowIndex && this.selectedCells[i].currentCell.colIndex.toString() === colIndex && !args.cell.classList.contains('e-cellselectionbackground')) {

                                                       // With the selected cells information add the class name(this class name shows the cells as selected cells) to the selected cells.

                                                                args.cell.classList.add('e-cellselectionbackground');

                                                }

                                }

                }

}

 

headerCell(args: any): void {

                (this.pivotView.renderModule as any).columnCellBoundEvent(args);

                if (this.selectedCells.length > 0) {

                                var colIndex = args.node.getAttribute('aria-colindex');

                                var rowIndex = args.node.getAttribute('index');

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

                                                if (this.selectedCells[i].currentCell.rowIndex.toString() === rowIndex && this.selectedCells[i].currentCell.colIndex.toString() === colIndex && !args.node.classList.contains('e-cellselectionbackground')) {

                                                                args.node.classList.add('e-cellselectionbackground');

                                                }

                                }

                }

}

Meanwhile, we have modified your sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pivottest_57c8f112_(1)407958154

Refer the following document link for more information about queryCellInfo and headerCellInfo event.

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#querycellinfo

https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#headercellinfo

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Paolo Turello]

Hello Angelin Faith Sheeba,

the provided code worked like a charm.

Thank you, have a nice day.

Paolo

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Paolo,

Please let us know if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba