Horizontal scroll becomes out of memory exception

[JoseAn Fed]

Hi, I am facing an issue with a grid that combines : infinite scroll, frozen columns (left and right) and grouping. 
If the size of any column is expanded and then, the horizontal scroll bar is shown, scrolling right and left causes infinite invocations inside the FocusStrategy.prototype.onFocus event function of ejs-grid.es5.js file.

To be specific, inside the code is executing the following sentence: 
     var current = this.getContent().matrix.get(0, -1, [0, 1], null, this.getContent().validator());

And then the function Matrix.prototype.get enters in a recursive infinite loop, it might be maybe because of the first cell on the first row ( the one that holds the link for collapse/expand the groups:

   <a class="e-icons e-gdiagonaldown e-icon-gdownarrow" rel='nofollow' href="#" title="Expanded"></a>

) has no width value assigned, so is is re-invoked recursively with the same parameters all the time (rowIndex=0, columIndex=0, action = nu.

Is there any way to prevent this without disabling resizing/column selection? . 

Thanks so much in advance, I will appreciate so much any help.

Attached some screenshots for a better understanding. The application is an angular v.17 including sycfusion components: "^25.1.40".

 

Attachment: Horizontal_scroll_71969e04.zip

[Dineshnarasimman Muthu]

Hi JoseAn Fed,

Greetings from Syncfusion Support.

We have reviewed your query regarding out of memory exception when infiniteScrolling is enabled along with frozen column. We have analyzed the images you have provided, it seems you have set freeze right to the Action columns and it seems you have set initial grouping in the grid. We tried to replicate the issue by preparing a sample based on the provided image and the package version details. We cannot replicate the out of memory exception upon scrolling the grid horizontally.

We have attached the sample for your reference.

Please provide the following information to validate the issue further.

• Please provide the grid rendering code information since we are unaware of the properties which you have used in the grid.

• If you have implemented any other customization in the grid, please provide the code information regarding the customization. Also, ensure us whether this issue occurs only upon scrolling horizontally.

• Please replicate the issue in the provided sample, this will help us to identify the issue and resolve it.

We highly appreciate your co-operation in providing these details.

Regards,

Dineshnarasimman M

Attachment: GridAngular17_46f2db68.zip

[JoseAn Fed]

Hi Dineshnarasimman M, thanks so much for your reply. 

I've modified the sample to make it fail into the infinite loop when scrolling horizontally. The grid has freeze left set for column name, and freeze right for actions type. It is also grouping by a field (sports), and has infinitescroll activated. 

Maybe the percentages in columns width have something to do, but I am using them instead of using fixed width because sometimes there is a mismatch between columns and headers width.

The steps to reproduce are: loading the page, resize a column to make it bigger and causes a horizontal scroll bar appears (usually column name),  scroll right and left. Then a console error is displayed: 

core.mjs:6531 ERROR RangeError: Maximum call stack size exceeded

    at Number.toString (<anonymous>)

    at Matrix3.first (focus-strategy.js:1172:52)

    at Matrix3.get (focus-strategy.js:1146:26)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

    at Matrix3.get (focus-strategy.js:1165:18)

Thanks so much for your help.

Best regards!

Attachment: GridAngular17_Modified_c4caf57e.zip

[JoseAn Fed]

There is also another issue if a column chooser is added. In this scenario, hiding/showing columns cause that expand/collapse buttons don't work. It seems that the row index of the row that contains the expand/collapse link changes after performing iterations with column chooser causing a index out of range exception inside Group.prototype.expandCollapseRows function, located at group.js.

Attached a new version of the sample with the column chooser available. For reproduce the issue, hide one column (year) on the column chooser window and then try to collapse the first sports group. 

Thanks so much in advance, I would appreciate any help.

Best regards!

Attachment: GridAngular17_Chooser_bf64dab7.zip

[Dineshnarasimman Muthu]

Hi,

We have confirmed that the reported behavior is an issue from our side and logged as "Column Width Percentage Causes Scrolling Issues in EJ2 Grid”. Thank you for taking time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on February 04th, 2025. Until then we appreciate your patience.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback: https://www.syncfusion.com/feedback/64715/column-width-percentage-causes-scrolling-issues-in-ej2-grid

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

Regards,

Dineshnarasimman M

[Kishore Muthukrishnan]

Hi ,

 

We sincerely apologize for the delay.

 

We were unable to include the fix for this issue as we are facing some complexities. The complexity of the issue necessitates additional time for our team to design a comprehensive solution in order to ensure the stability and performance of our product. Due to this, we will fix the reported issue with "Column Width in Percentage Causes Scrolling Issues in EJ2 Grid" and include it in an upcoming weekly release which will be available on February 18th, 2025.

 

We apologize for any inconvenience this may have caused and appreciate your understanding.

 

Regards,

Kishore Muthukrishnan

[JoseAn Fed]

Thanks for the Update,

Looking forward this new release hopefully fix the issue.

Regards.

[Dineshnarasimman Muthu]

Hi JoseAn,

We sincerely apologize for the delay.

While addressing the reported script error that occurs upon scrolling horizontally when using percentage in column.width property, we encountered some additional script issues and UI problems. So, we would like to tell you that we have considered this "Column Width Percentage Causes Scrolling Issues in EJ2 Grid" as an improvement feature from our end. This feature will be included in upcoming weekly release which will be available on March  11th, 2025. Till then we highly appreciate your patience and understanding.

Regards,

Dineshnarasimman M

[JoseAn Fed]

Hi  Dineshnarasimman,

Thanks for the update. The wait will be worth if finally the issue is fixed.

Regards,

Josean,

[Dineshnarasimman Muthu]

Hi,

We are glad to announce that, we have included the fix for the issue “Column Width Percentage Causes Scrolling Issues in EJ2 Grid” our 28.2.11 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

Root Cause: When the first column has a percentage (%) or auto width, it can become hidden if there isn’t enough available space. While using the horizontal scrollbar, focus repeatedly shifts to the first cell due to clientWidth being 0. This leads to an infinite loop of method calls, eventually causing the maximum call stack issue.

Fix: Modified focus behavior to move to the next cell on Tab action. On Shift + Tab, the focus moves to the previous cell, preventing the infinite loop.

Feedback: https://www.syncfusion.com/feedback/64715/column-width-percentage-causes-scrolling-issues-in-ej2-grid

Release Notes: https://ej2.syncfusion.com/javascript/documentation/release-notes/28.2.11?type=all#grid

Video:

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance

Regards,

Dineshnarasimman M

Attachment: GridAngular17_Modified_(28.2.11)_a32bc5f1.zip