Column width issue in pivot tables

Question

Hi ALL

I manually adjusted the width of the column (Eurpe) first, and when I drag the scrollbar to load data, my column width will be automatically refreshed.

Image_9811_1740706994621 Image_6722_1740707187831

And sometimes when I refresh the column width through code, there may be incomplete display.

Thanks

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Renard,We
understand that you are encountering a problem where the resized state of
a column (after manual column resizing) is not maintained while scrolling at
runtime when virtualization is enabled in the Pivot Table.
This behavior is due to the inherent limitations of the virtualization feature.When there
are a lot of columns and rows, the virtualization feature is used to render
without loss of performance by acquiring the rowHeight and columnWidth from
gridSettings for calculating the page information for scrolling.
Thus, the features like column resizing, auto fit, text wrap and
individual column width affects the pivot table’s row height and column width
at runtime, which will not be considered for scroller calculation because
having more rows and columns and it leads to performance constraints. Thus, it
leads UI issues while perform scrolling in the pivot table. Thus, column
width adjustments and column resizing affects the
calculation used to pick the correct page on scrolling in the pivot
table. Please refer the below documentation to know more about the
limitations of virtual scrolling.Document: https://ej2.syncfusion.com/angular/documentation/pivotview/virtual-scrolling#virtual-scrollingAdditionally,
if you want to customize the width of the column, you can achieve this by
utilizing the columnWidth property. You can use this property to
change the entire column width of the pivot table using an external button
click to change the column width at runtime. Refer to the code example below.Code example:

onClick(e: Event): void {
         
  this.pivotObj.setProperties({
             
  // Set a fixed column width of 180 for all columns in the pivot table
             
  gridSettings: { columnWidth: 180 },
              },
  false
          )
         
  this.pivotObj.refreshData();
      }

Output GIF:Meanwhile, We have provided the sample for
your reference. You can find the sample at the following link.Sample: https://stackblitz.com/edit/angular-hafdxp2e-kdt4j6tq?file=src%2Fapp.component.html,src%2Fapp.component.tsPlease let us know if you have any concerns.Regards,Narmatha Saminathan.

Renard · Answer

Hi

Narmatha Saminathan.

Because the content displayed in each column is different, I need to set different widths for each column. May I ask how this can be achieved.     Thanks

Sridhar Karunakaran · Answer

Hi Renard,We understand that you need to modify the
width of each column in the pivot table according to its content when
virtualization is enabled. If this is the case, you can utilize the columnRender
event to customize the width of the columns in the current viewport of the
pivot table by setting the autoFit property to true. Please
see the code example below.Code example:

this.gridSettings = {
             
  columnRender: this.observable.subscribe((args: any) => {
                 
  for(var i = 0; i < (args as any).columns.length;i++) {
                     
  (args as any).columns[i].autoFit = true;
                  }
              })
  as any
          }
  as GridSettings;

Output screenshot:Meanwhile, We have provided the sample for
your reference. You can find the sample at the following link.Sample: https://stackblitz.com/edit/angular-jpxn5a47-5qyqqa9m?file=src%2Fapp.component.tsAdditionally,
as mentioned earlier, there are certain limitations to consider when using
the virtualization option in the Pivot Table.When handling a large number of rows and columns, virtualization
helps maintain performance by retrieving row height and column width from
grid settings to calculate page information for scrolling. However,
features like auto-fit, column resizing, text wrapping, and individual
column width adjustments dynamically affect row height and column width at
runtime, which are not considered in the scroller calculation.Having a large dataset can introduce performance constraints,
leading to potential UI issues while scrolling. Specifically, enabling auto-fit impacts
the pagination calculation required for smooth scrolling, making it
incompatible with virtualization.Therefore,
we do not recommend using auto-fit with virtualization in the
Pivot Table. Please refer to the documentation below for more details on the
limitations of virtual scrolling.Document: https://ej2.syncfusion.com/angular/documentation/pivotview/virtual-scrolling#virtual-scrollingRegards,Sridhar Karunakaran.