Scrollbar missing with autorowheight set to true

[bfrenchParticipant]

Hello, I’m experiencing an issue with using autorowheight, paging, and virtual mode. I’m not sure if these are all related, but it seems like I can mostly reproduce this when using these settings together. Also it seems to be an issue in Chrome (I’m currently on ver 38.0.2107.2 beta-m) and IE, but not FireFox.

I have a JSFiddle that recreates the issue: Example

If I use the pager, then typically the scrollbar will appear at some point (often I have to page forward, then page back), but often times I can tell there are more rows displayed in the grid but I can’t scroll to them. Any ideas what I’m doing wrong?

[bfrenchParticipant]

Also when running in IE 11, once I get the scrollbar to appear by paging forward then paging back, when I try to drag the scroll bar it does not move.

[Peter StoevKeymaster]

Hi bfrench,

Thank you for the feedback. I would suggest you to turn off autorowheight when you turn on virtualmode. The data in virtual mode is loaded on demand and when autorowheight is turned on, the calculation of the row’s height cannot be done because the data is loaded on demand :).

Best Regards,
Peter Stoev

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

[bfrenchParticipant]

Thanks for the response Peter.

That does make sense. In my example above I was using a local data set, but in my actual implementation my data adapter is set to a remote data source. So every page change request is making a server side call to get the data for that page. I’m following the example in the PHP server side paging/sorting/filtering page.

I’m assuming I need virtual mode set to true in order to support the server side processing, correct? If so, is there a way for me to have server side processing and autorowheight?

[bfrenchParticipant]

Just after I sent my last post, I did think of an idea as a work around. This does work, however, it might not be the best way to fix this issue.

I added event handlers for bindingcomplete and pagechanged and reset the autorowheight and rowsheight values in those methods:

grid.on(‘bindingcomplete’, function () {
grid.jqxGrid({ autorowheight: true, rowsheight: 33 });
}).on(“pagechanged”, function (evt) {
grid.jqxGrid({ autorowheight: false, rowsheight: 32 });
});

It seems as though I needed to update both properties in order to get it working properly. There is a brief moment where the scrollbar changes in size on the page change, but it does work.

I would be interested in hearing if anyone has a better idea, though!

[Mallikarjun BaddurParticipant]

Hi,

Any update on this? We also have same problem.

The provided workaround also not working for me.

Please provide any workaround for this as this is a major issue for our customers who are browsing in chrome.

Thanks,
Mallikarjun

[Peter StoevKeymaster]

Hi Mallikarjun,

If you use virtualmode, don’t set autorowheight to true because it will do nothing in this load-on-demand mode.

Best Regards,
Peter Stoev

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

[Mallikarjun BaddurParticipant]

Hi Peter,

We cannot remove ‘autorowheight’ property since the data in the grid need to be wrapped.

Functionality is working fine with Firefox browser but not with Chrome and IE11.

Is there any other way to wrap column data in virtual paging grids?

Please assist us.

Thanks,
Mallikarjun

[Peter StoevKeymaster]

Hi Mallikarjun,

No, there is not.

Best Regards,
Peter Stoev

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

[Mallikarjun BaddurParticipant]

Hi Peter,

Working in one browser and not in another means this should be considered as bug. Functionality should be consistent across the browsers.

Please provide any workaround for this issue as this is important for us.

Thanks,
Mallikarjun

[Author]

Posts