jQWidgets Forums

jQuery UI Widgets Forums Grid Grid Flicker On Resize

This topic contains 2 replies, has 2 voices, and was last updated by  webappdev21 7 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Grid Flicker On Resize #95879

    webappdev21
    Participant

    Hello,

    I have an application where I ideally need to have a jqxGrid with the following combination of properties:

    virtualmode = true (need to support serverside paging / filtering / sorting)
    autoheight = false (need a fixed height for the grid to work with the rest of the page layout)
    width = 100% (want the grid to take up as much horizontal space as it can but never cause the page to scroll horizontally)
    pageable = true

    This all works and behaves fine in FireFox 52.3, however in current versions of other browsers (IE11, Edge, Chrome) the grid suffers from an intense flicker anytime the browser window is resized, thus causing the grid to change width. It doesn’t do this when not in virtualmode (pulling all records back, doing client side paging/filtering/sorting). It also doesn’t do it in virtualmode if autoheight is turned on, or if the width is set to a fixed value instead of 100%. It just seems to be that exact combination of attributes, which is unfortunately what I need.

    The easiest way to see the behavior I’m describing is to visit your example for virtualmode here: http://jsfiddle.net/jqwidgets/j8JUh/ and change autoheight to false and width to 100%. Then when you resize the browser such that the width of the grid changes you will see the flicker except for in FireFox.

    Just wondering if there was any kind of trick or workaround you could think of that would allow me to use the grid in this way and avoid the flicker. Or if it would be something you would consider looking into on your end.

    Thanks in advance,

    B

    Grid Flicker On Resize #95880

    Peter Stoev
    Keymaster

    If you experience such behavior, then probably these exact properties require additional rendering which results in slower performance which cause the flicker. What you can do is to set the Grid’s width to a fixed value and update the value after the resize finished.

    Grid Flicker On Resize #95881

    webappdev21
    Participant

    Thank you for the idea.

    Adding something like this:

    $(window).resize(function() {
    						clearTimeout(self._gridWidthTimeout);
    						self._gridWidthTimeout = setTimeout(function() {
    							self._grid.jqxGrid({
    								width : self._element.width()
    							});
    						}, 300);
    
    					});

    where self._element is the parent div containing the grid, I was able to at least substantially lessen the effect. So it is better. But the effectiveness still depends on the timeout duration value vs. the rate at which the window is being resized because the flicker still happens any time the table width is changed. So at best I get a single flicker right at the end after the grid width changes. So maybe a follow-up question would be why the flicker occurs in browsers other than FF when the grid width is changed (even a single time) if virtualmode = true and autoheight = false.

    Thanks again.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.