I'm having an issue with resizing a grid that has rowVirtualization turned on.
The issue is that if the grid is initialized with columns set wide enough to generate a horizontal scrollbar, then resizing the grid works fine. The grid stays contained by its parent div. If the grid is initialized without the need for a horizontal scrollbar, then on resize the grid will stretch past the width of its parent. As a note, the grid width is set to 100% and the column widths are set in pixels.
I've needed to deal with the grid_hscroller element to fix an issue with hiding and resizing where after the operation the grid was snapped back to the leftmost scroll position, however if a scroll bar was not present on initialization, this element is never on the dom. Also, the grid has a column that by default will be hidden. I have tried making it visible then hiding it after its databound and this works to make the grid_hscroller element appear when the grid is scrolled wide enough, the issue is that this won't work on all screen resolutions. If the user has a screen that would fit all of the columns without needing to render the horizontal scrollbar, then after hiding the column it still wouldn't be there.
I have tried setting the width for the grid, grid_displayContainer, and grid_virtualDisplayContainer and none of that worked either. However, after realizing the issue with the scroll element never getting placed on the dom, this would not have helped anyway. If it did succeed in restraining the grid to the original width, I wouldn't be able to scroll to see what was beyond it.
If there was a way to set column widths programmatically after the grid was initialized, then I could set them all to be very wide to begin with then change them after data binding.
Included is the screenshot of the grid as normal (top) and stretched (bottom) after resizing the Program column.
Is there a way to force the horizontal scroll elements to appear at all times or a way to programmatically change the widths of the columns at run time? Either one of these scenarios would solve my issue. Thank you for your time.
Hello Joey,
Thank you for posting in our forum.
I’ve tested this on my side in a grid that has width set to 100% and columns with widths in pixels, however after resizing the width of the columns ,the grid’s width was not changes, instead a scrollbar was displayed.
I’ve attached the sample I used to test this, please test it on your side and let me know if you’re encountering any issues with it.
If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in versions we are using.
If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
I’m looking forward to your reply.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
That example did not include the rowVirtualization option. Without it, the grid indeed resized as expected. When I tried to resize after adding rowVirtualization: true, virtualizationMode: “continuous”, and height: “200px”, the grid acts just like my problem. Resizing a row made the grid grow past the 100% width and no horizontal scrollbar was rendered.
Is there a way to achieve the normal functionality while using the virtualization option?
Thank you for reporting this.
I have asked our engineering staff to examine this further. To ensure that it will receive attention, I have logged this behavior in our internal tracking system with a Development ID of 177656. A support case is created on your behalf with number CAS-141904-Q0Z2T6 , so that you can be notified when the bug is fixed. You can find your active cases under Account - Support Activity in our website. Select your ticket and go to Development Issues tab to view the status of related bugs.
Let me know if I may be of further assistance.
Best regards,
Stamen Stoychev