How to avoid flicker when auto refreshing the grid?

[novascapeParticipant]

I’m evaluating jqxGrid and so far it is perfect. My requirement is to have the grid automatically refreshed every 15 seconds or so. The grid is bound against a JSON ASP.NET MVC controller method in virtual mode with paging.

However, every time the grid is refreshed, it flickers once, but the flicker is quite noticeable and distracting if a user is busy reading the items displayed in the grid.

THe grid is auto refreshed with this call: $(“#jqxgrid”).jqxGrid(‘updatebounddata’);

Question: Is there any way to avoid that flicker effect when the grid is refreshed? When the virtualmode turned off the refresh is smooth without flicker, but I guess I cannot get server side paging and sorting without virtual mode?

Thanks in advance

[DimitarParticipant]

Hello novascape,

If you only need to update the values of the cells, you may pass “cells” as a parameter to updatebounddata. In this case, there would be no flickering. For an example, please refer to the demo Refresh Data.

Best Regards,
Dimitar

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

[novascapeParticipant]

Thank you Dimitar, that is brilliant and works perfectly!

Can I please ask another related question… I do not want the auto refresh action to interfere with user initiated refresh actions from clicking on headers for sorting or when clicking to go to another page. This indeed causes “already open data readers…” type errors in the backend.

Are there any events in the grid that will allow me to a) disable and then b) re-enable the automated refresh timer during refresh actions explicitly triggered by the user?

Thanks again

[novascapeParticipant]

Perhaps I should just be checking the following grid setting when the automated timer fires and if it returns True then the timer event should just skip the auto refresh:

var isupdating = $(‘#jqxGrid’).jqxGrid(‘updating’);

I will try this…

[novascapeParticipant]

I think I have found the solution that seems to work:

1/ Set a busy flag in the following events: filter(), sort(), onpagechanged()
2/ Reset the busy flag in the following event: rendergridrows()
3/ When the automated timer fires it will not execute a grid refresh if the busy flag is set

I have tested the above and it seems to work well.

Please do let me know if there is a better way to do this.

Thanks

[Author]

Posts