Facing Performance Issue in PivotGrid

[Dileep gagan R]

Hi,

We are loading around 70000 records into pivot grid, which is taking around 1.5 minutes to load the screen. Is it normal or we are doing something wrong. 

What is the maximum number of records pivot grid supports.

Note: We are using virtualscrolling, querycellinfo, drillthrough, cellselected, databound events for manipulation of cell display and also re-rendering the pivot grid on certain actions performed on the grid using initEngine() method. 

Thanks,

Dileep gagan R

[Sivamathi Natarajan]

Hi Dileep, 

 

Thanks for contacting Syncfusion support. 

 

Pivot Table supports up to 1 million raw items without any performance lags. It may either up to 1 million unique members in row or column. We have prepared a sample for your reference. 

 

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

 

But you have mentioned that you are facing performance problem even with less count of data (70k). Also, you have made some customizations in it. So, could you please make the same customization in the above sample and reproduce the same then revert us. This would be helpful for us to proceed further. 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Dileep gagan R]

Hi, 

We are using querycellinfo and databound event which is taking too much time it seems as below. Is there any alternative for this. We can see in chrome perfomance test time taken is for painting and rendering.

 queryCellInfo(args: any): void {

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

    const areaColIndex = JSON.parse(args.cell.getAttribute('aria-colIndex'));

    const areaRowIndex = JSON.parse(args.cell.getAttribute('index'));

    // Last Edited Cell

    if (args.cell && areaColIndex === this.columnIndex && areaRowIndex === this.rowIndex) {

      args.cell.classList.add('just-edited');

    }

    // Locked Cells

    if (this.markedCellInfo.length > 0) {

      for (const i of this.markedCellInfo) {

        if (args.cell && areaColIndex === i.currentCell.colIndex && areaRowIndex === i.currentCell.rowIndex) {

          args.cell.classList.add('locked');

        }

      }

    }

  }

dataBound(args: any): void {

    const data = this.pivotGridObj.dataSourceSettings.dataSource as IDataSet[];

    const rowsCount = this.pivotGridObj.pivotValues.length;

    const colsCount = this.pivotGridObj.pivotValues[0].length;

    for (let i = 0; i < rowsCount; i++) {

      for (let j = 1; j <= colsCount - 1; j++) {

        const r = (this.pivotGridObj.pivotValues[i][j] as IAxisSet);

        if (!r.hasChild) {

          const rowKey = r.rowHeaders;

          for (let k = 0; k <= data.length; k++) {

            if (data[k]) {

              const dataSourceKey = data[k].departmentName + '.' + data[k].className + '.' + data[k].metricName;

              if (rowKey === dataSourceKey && data[k].metricName.toString().indexOf('%') > 0) {

                r.formattedText = genericOperation.round(r.value) + ' %';

              }

            }

          }

        }

      }

    }

    this.pivotGridObj.grid.addEventListener('keyPressed', this.keyDownHandler.bind(this));

    if (cCellColIndex && cCellRowIndex &&

      document.querySelectorAll('td[aria-colIndex="' + cCellColIndex + '"][index="' + cCellRowIndex + '"]')[0]

    ) {

      document.querySelectorAll('td[aria-colIndex="' + cCellColIndex + '"][index="' + cCellRowIndex + '"]')[0].classList.add('e-focused');

    }

  }

[Sivamathi Natarajan]

Hi Dileep, 

 

Thanks for the code. Could you please explain about the purpose of the code and exact requirements. So, that we will provide you to achieve the same in optimized way. 

 

Regards, 

Sivamathi. 

[naveen praveen]

Hi Team,

I am also facing pivot report performance issue for that i had used  enableVirtualization: true in html file then it started rendering the data fastly but having other issues as

1. when we scroll down to see the grand total in pivot report it is taking some 3 seconds to show grand total.
2. And another issue is when we zoomIn the pivot report it is not showing grandTotal at the end. please guide me to fix these issues.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Dillep,

Please find the response below.

Query	Comments
I am also facing pivot report performance issue for that i had used  enableVirtualization: true in html file then it started rendering the data fastly but having other issues as when we scroll down to see the grand total in pivot report it is taking some 3 seconds to show grand total.	While enabling virtualization only the current view port data is generated and displayed in the pivot table. Thus, when you scroll to the last page, the grand total aggregation will be performed based on the entire data, resulting in a slight delay in displaying the values when compared to other pages. However, you can change the "grandTotalsPosition" to Top to display the Grand Totals on the first page of the pivot table rather than the last. Please see the code example below.   Code Example: dataSourceSettings: {             grandTotalsPosition: 'Top'         },     Output screenshot:   Sample: https://stackblitz.com/edit/angular-j7k3mx-hhex35?file=src%2Fapp.component.ts,src%2Fapp.component.html
And another issue is when we zoomIn the pivot report it is not showing grandTotal at the end. please guide me to fix these issues.	We have checked the reported issue at our end and we are unable to reproduce it at our end, the grand total renders properly at our end. We have shared the sample and video in the below attachment for your reference.   Sample: https://stackblitz.com/edit/angular-j7k3mx-slxjch?file=src%2Fapp.component.ts,src%2Fapp.component.html   If the problem persists, please reproduce it in the provided sample and revert to us (or) send your sample with the data source that reproduces the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

Attachment: video_b6487b46.zip

[naveen praveen]

Hi Angelin Faith Sheeba,

Regarding issue 2 which is causing issue when we reduce the browser viewing size I think it is zoom out I mentioned wrongly and the grandtotal row is at the bottom not right side column.

As per video you had increased the zoom. I am getting issue when we reduce the zoom. To below 60% like that. And we are having huge data with date grouping. And many rows more than 100 and atlast we will grandtotal

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Naveen,

We have checked the reported issue by zoom in the pivot table with date grouping and 1 lakh rows and the grand total displays properly at our end. Please refer the below sample that we have checked and the video from the below attachment.

Sample: https://stackblitz.com/edit/angular-j7k3mx-ds1kj4?file=src%2Fapp.component.ts,src%2Fapp.component.html

If the problem persists, please reproduce it in the provided sample and revert to us (or) send your sample with the data source that reproduces the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Regards,

Angelin Faith Sheeba

Attachment: zoominvirtualization_48595896.zip