Grid does not refresh on window resize

[robfParticipant]

Hello,
I have a jqgrid inside a bootstrap col-6. If the window is opened say 75% the grid shows fully across. If I maximize or resize the window larger the grid does not resize to full width. Is it my responsibility to handle window resize events and them manually refresh the widget? Seems odd that I’d need to do this.

Thanks.
Rob

[TodorParticipant]

Hello robf,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[robfParticipant]

Hello,
Your example is fine, however in a bootstrap app that contains other elements the grid is does not refresh leaving half-painted columns. The only way I am able to get the grid to properly repaint is attaching window resize event – i.e.

$(window).resize(function() 
	{
		$('#mygrid').jqxGrid('render');
	});

Even, ‘refresh’ does not work – only ‘render’

Again, seems odd that I would need to monitor window resize event for this.

[TodorParticipant]

Hello robf,

You could review the following demo and try to use it in your case.

Also you could share a jsfiddle/codepen example with your code which demonstrates the issue then we would be able to properly investigate it.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[robfParticipant]

Hello,
I am stuck for the right answer. When I add a window resize event to refresh any grids when window or splitter resize event occurs, all groups are always collapsed. If I remove the events then the grid does not correctly repaint on resizes. The demo above is ok but please see screen shot for actual behavior.

https://ibb.co/vQQTKJ1

Please help. Prototypes/demos are failing.

Thanks.

[MartinParticipant]

Hello robf,

Could you send us a jsfiddle example, so we can review this behavior?
As a workaround, you could try to use the expandgroup or expandallgroups methods of the grid after you call the render method.
You could keep information of which groups are expanded before resizing the window using the getgroup method.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[nigelwright7558Participant]

The grid and window don’t follow the browser window size.
This fixed it for me:

$(window).bind(‘resize’, function () {
$(“#jqxgrid”).jqxGrid(‘width’,$(window).width());
$(“#jqxwindow”).jqxWindow(‘width’, $(window).width());
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’); //refresh screen
}).trigger(‘resize’);

[robfParticipant]

This still continues to haunt me when a window resize or splitter resize occurs. The suggested solution by nigel does not work 100% of the time. Window resizing and splitter resize will still render 1) half-drawn grids OR 2) squished columns OR 3) missing toolbar buttons.

The only way I can get a full redraw is to perform full ‘render’ and then all is reset like groupings. The screen shot I provided before is still prevalent even with production build 9.0. https://ibb.co/vQQTKJ1

Is there a ticket out there for this?

Please assist.
Thanks.
Rob

[MartinParticipant]

Hello Rob,

Could you, please provide us a working jsfiddle example, so we can reproduce this behavior?
As I mentioned above, as a workaround, you could use the expandgroup or expandallgroups methods of the grid after you call the render method.
You could keep information of which groups are expanded before resizing the window using the getgroup method.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts