Horizontal Scrollbars do not appear when resizing columns and width is 100%

[Michael Evans]

We are running into an issue where horizontal scrollbars do not appear when the width of the pivot view is set to 100% and the columns are manually resized. Is there any workaround for this issue?

Stack Blitz: https://stackblitz.com/edit/pivot-scrollbars?file=app.component.html

Steps to reproduce:

1. Click popup to show the field list

2. Choose axes for the pivot grid (ex: Columns "Country", Rows: "Year", Values: Sum of "Amount")

3. Click Apply.

4. Note columns expand to take up 100% of the space.

5. Manually resize one of the columns to be wider.

Expected result:

Horizontal scroll bar appears so the user can see all the data in the pivot grid

Actual result:

No horizontal scroll bar appears; some of the data is cut off. The only way to see the data is to restore the column to its original size.

[Mouli Eswararao]

Hi Michael, 

Thanks for contacting Syncfusion support. 

 

We are validating the reported issue we will update you further details in two business days(21^st  June 2021). We appreciate your patience until then. 

Regards,
Mouli 

[Manikandan Murugesan]

Hi Michael, 

 

We will update the details shortly. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

 

Hi Michael, 

 

We have considered this as a bug “Issue while resizing column with virtualization” and logged a defect report in our database. The fix for this issue will be available in our Volume 2 SP1 release which is estimated to be rolled out in the end of July 2021. You can track the same by using the following link. 

 

https://www.syncfusion.com/feedback/26358/issue-while-resizing-column-with-virtualization 

 

Please let us know if you have any concerns. 

 

Regards, 

Manikandan 

[Michael Evans]

Hi, I just wanted to follow up on this one. We just installed the recently released version 19.2.49 and this issue is not yet resolved. Do you have an updated estimate on when it might be?

[Manikandan Murugesan]

Hi Michael, 

 

Sorry for the inconvenience. 

 

We have fixed the reported issue and we are currently testing it on our end. This fix will be included in our upcoming weekly patch release, which is expected to be rolled out next week. 

 

We appreciate your patience until then. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Michael, 

 

We are glad to inform you that the fix for the issue “Issue while resizing column with virtualization” has been included in the weekly release (v19.2.51). Kindly refer to the following sample. 

 

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

  

Due to the performance constraints, we have provided resizing support (by using cursor) for first column alone while using pivot table with virtualization. Meanwhile, you can change column width for other columns dynamically as shown like in the following code example. 

 

Code Example: 

onClick() { 

    this.pivotObj.gridSettings.columnWidth += 20;  // Here you can modify column width dynamically for all columns except first. 

     

    //this.pivotObj.resizedValue = this.pivotObj.gridSettings.columnWidth;  // By using “resizedValue” property you can change first column width dynamically. 

 

    this.pivotObj.layoutRefresh(); 

} 

 

 

We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you require any further assistance. 

 

Regards, 

Manikandan 

[Michael Evans]

Hi,

This wasn't exactly the change we were hoping for. Now, the user cannot resize columns in the pivot grid, which can be an issue if the data in the header or the cell is too long to fit in the width. At least before they could resize the columns. Is there any way you can make this behavior optional? I think we preferred it the way it was.

Additionally, we did find some odd behavior when testing this out. While you can't manually resize any column after the first one any more by grabbing the boundary and moving the mouse, we did find that if you double-click the column boundary, the column will resize to fit the contents of the widest cell in the column. At first we thought this might be a workaround to not being able to manually resize the column, but then we found if you double-click another column boundary, all the columns revert to their original width. So at most you can only resize 1 column beyond the first one using this technique (which seems to be unintentional).

Thanks,

Michael

[Manikandan Murugesan]

Hi Michael, 

 

Please find the below response. 

 

Query	Comments
This wasn't exactly the change we were hoping for. Now, the user cannot resize columns in the pivot grid, which can be an issue if the data in the header or the cell is too long to fit in the width. At least before they could resize the columns. Is there any way you can make this behavior optional? I think we preferred it the way it was.	In virtual scrolling, horizontal scrolling operations will be performed based on “columnWidth” property in “gridSettings”. If we modify the column width for specific column header, the modified column width will not be considered for scrolling calculation and it leads to performance oriented problems, while considering it when we have many column headers. However, you can modify the column width for columns other than the first column by using “columnWidth” property in “gridSettings”. Kindly refer to the following code example and sample.    Code Example:  onClick() {      // Here you can modify column width dynamically for all columns except first.      this.pivotObj.gridSettings.columnWidth += 20;      // By using following property you can change first column width dynamically.      //this.pivotObj.resizedValue = this.pivotObj.gridSettings.columnWidth;      this.pivotObj.layoutRefresh();  }      Sample: https://stackblitz.com/edit/angular-3v87xy?file=app.component.ts
Additionally, we did find some odd behavior when testing this out. While you can't manually resize any column after the first one any more by grabbing the boundary and moving the mouse, we did find that if you double-click the column boundary, the column will resize to fit the contents of the widest cell in the column. At first we thought this might be a workaround to not being able to manually resize the column, but then we found if you double-click another column boundary, all the columns revert to their original width. So at most you can only resize 1 column beyond the first one using this technique (which seems to be unintentional).	This is a known issue, and it will be included in our upcoming Volume 2 SP 1 release which is expected to be rolled out next week.

 

Please let us know if you have any concerns. 

 

Regards, 

Manikandan 

[Michael Evans]

In regards to the first issue, our users need the ability to manually resize individual columns, so resizing them by a fixed amount programmatically is not an option. I do understand your concern about performance considerations.

I noticed that even if I set enableVirtualization='false' I still can't resize the columns. Is that intentional as well? We set this to true because there could be a lot of rows or columns in the pivot grid since our users often work with large data sets. If we could get it so the columns were resizable when not using virtualization we could make the virtualization dependent on the # of rows/columns which would be a fair compromise, not allowing users to resize if they are working with a very large dataset.

[Manikandan Murugesan]

Hi Michael, 

 

We can be able to resize the columns normally when the virtualization feature not enabled in the pivot table. Please refer to the following sample. 

 

Sample: https://stackblitz.com/edit/angular-3v87xy?file=app.component.html 

 

However, we will enable the resize option for virtualization in our upcoming Volume 2 SP 1 release. But, we suggest you to perform resizing on first(frozen) column alone when virtualization enabled. Because, if the resizing performed other than the first column when the virtualization enabled, the resized column information will not consider for scroller calculation, which may leads to UI issues while perform scrolling in the pivot table. 

 

Please let us know if you have any other concerns. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Michael, 

 

We are glad to announce that our Essential Studio 2021 Volume 2 service pack Release v19.2.0.55 is rolled out and we have enabled the resize option for virtualization. Kindly refer to the following sample. 

 

Sample: https://stackblitz.com/edit/angular-rxdlai?file=app.component.html 

 

We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you require any further assistance. 

 

Regards, 

Manikandan