Virtualization is not calculated correctly if a stacked column is invisible

[Jean Sanson]

Good afternoon, I have found that the virtualization has problems if a stacked column is invisible. The solution suggested to me (https://www.syncfusion.com/forums/180723/is-there-a-way-i-can-hide-columns) was tested and even if I upgrade the pivot view depencence in my project, which i can't, it would have display issues with columns. It seems the horizontal scroll is not calculated correctly, perhabs the virtualization is not considering column visibility. 

It partially functions, i've attached a screenshot of it breaking.

Sample: https://stackblitz.com/edit/angular-hfcvq9-xldjmf?file=src/app.component.ts

Attachment: virtualization_d689ab47.zip

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jean,

We would like to inform you that while using virtualization with pivot table, we currently have some limitations that some pivot table customization like column resizing, autofit, textwrap, and hiding columns affect the pivot table's row height and column width during runtime and will not be taken into account for scroller calculation because having more rows and columns leads to performance constraints. Thus, scrolling in the pivot table will be problematic. Therefore, we recommend that you disable the virtualization property in order to use the hiding of specific columns option.

Please see the UG document link below for more information on the virtualization feature's limitations.

UG Document: https://ej2.syncfusion.com/angular/documentation/pivotview/virtual-scrolling#virtual-scrolling

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Jean Sanson]

Hello Angelin, I can comprehend virtualization not working if columns width are changed during run time, but just changing column visibility should be supported since it's changing only a column state. In my opinion, the root of the problem is that I need to change column visibility at runtime because there is no other option to define it before the component initializes. If there was a visible property in the IFieldOptions interface for example, the component can know before initializing which columns to consider during virtualization, and the scroll behavior should execute accordinly. Will this be improved in the future?

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jean,

We regret to inform you that, based on the current architecture, hiding specific columns for calculating page information for scrolling leads to performance constraints when loading with large amounts of data. Therefore, we can only hide specific columns during runtime.

Please let us know if any concern occurs.

Regards,

Angelin Faith Sheeba.

[Jean Sanson]

Architectures can be changed, that's exactly what I criticized in the previous reply, perhabs implementing the change I suggested would facilitate to achieve the desired result. The Pivot View component encapsulates the use of the grid component which can define visible/invisible columns. I won't use syncfusions components anymore because of these constraints and the lack of compromise to improve them =(. 

[Jean Sanson]

Also, there is no problem with performance exactly, the problem is the horizon scroll is not calculated correctly

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jean,

We'd like to let you know that we're looking into all possible workaround solutions at the sample level to fulfill your requirements, and we'll keep you updated on today (March 2, 2023).

We appreciate your patience until then.

Regards,

Angelin Faith Sheeba.

[Jean Sanson]

Hello Angelin, thank you! I was investigating yesterday the ej2-javascript-ui-controls at github trying to find a workaround, I have no idea if this is the correct approach as I have no familiarity with the code base.

the file controls/pivotview/src/pivotview/actions/virtualscroll.ts  has an private update method that uses the pivotView dataSourceSettings.values.length to calculate virtualScroll, if the dataSourceSettings.values contains only the visible elements, the scroll is calculated correctly but this caused an collateral effect that I couldn't fix, the headers started being misaligned.

Just informing what I've found if is of any help.

[Jean Sanson]

Actually, the headers were misaligned because the cells width changed

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jean,

We explored the possibilities for overcoming the scroll issue while hiding columns in the pivot table using virtualization. By subtracting the hidden column count, we attempted to update the column count. It also works well for initial rendering and content updates based on scroll position. However, when performing other operations, such as drill operations, we are encountering the issue that the columns are not being properly updated due to columns being calculated that continue to update based on previous column counts. And we are unable to overcome this further because it causes pivot table columns to be incorrectly updated. Moreover, we revisited your query and based on the we believe that instead of hiding the columns dynamically we can able to use pivot table's other features like calculated field and aggregateCellInfo event, to achieve your requirement. Please see the information below for more information.

Solution 1:

Using Calculated Field, you can create a field based on the available fields in the data source without binding the field in the pivot table report. In the below code example, we have created a calculated field by adding the fields("rando_3_0" and "cor_4_0") that aren't bound in the pivot table report.

Code example:

this.dataSourceSettings = {

      values: [{ name: 'custom Field', caption: 'V 1 Mês',type: 'CalculatedField'}],

   // created a calculated field by adding the field "rando_3_0" and “cor_4_0” values.

   calculatedFieldSettings: [{ name: 'custom Field', formula: '"Sum(rando_3_0)"+"Sum(cor_4_0)"' }],

}

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

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/calculated-field

Solution 2:

You can use aggregateCellInfo event which triggers every time while rendering value cell. Thus, you can customize the value cells based on your requirement. Refer the code example below.

Code example:

aggregateCellInfo(args){

      if(args.fieldName=="cor_4_0"){

        // You can get the current cell information in args.cellSets.

        //Thus using the cell information we have added the fields("rando_3_0" and "cor_4_0") and assign

         the customized value in "cor_4_0" field value cells.

        let value =0;

        for(var i=0; i<args.cellSets.length; i++){

          value+= args.cellSets[i]["rando_3_0"]+args.cellSets[i]["cor_4_0"];   

        }

        args.value = value;

      }

    }

 

Output screenshot:

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

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/aggregation#aggregatecellinfo

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba