continous triggers of refresh event

[argo]

I have a function I'm calling when the grid event "refresh" is triggered. I have two grids, each of them is on a different jQuery tab. Sometimes when I switch between the tabs (including a tab that doesn't have a grid), it will result in the pqGrid refresh event on one of the grids being called non-stop, almost like it's in a loop. It'll keep doing this until I click another tab, then go back to the grid, at which time the loop will usually (but not always) stop.

I've analyzed the event object being passed to the refresh event and it is the exact same object every time, the only thing that changes is the timeStamp value. The event type passed in is "pqgridrefresh", and the event target is always the <div> DOM element that contains the grid.

Can you suggest some troubleshooting steps that will help me determine what is causing the non-stop event triggers? Maybe something I can write to the console from within the refresh event function that will tell me what is triggering the event?

[paramvir]

Does the code in your refresh event trigger the refresh of grid again? you could see it by commenting the code in your refresh event.

You could put a breakpoint in the refresh event and see the stack trace while using pqgrid.dev.js to find out the origin of the loop.

[argo]

Hmm, the code in my refresh trigger does make a change to some DOM elements that are within the cells of the grid. The code renders a small sparkline chart in the cells, but it doesn't explicitly call the grid refresh event.

Here's literally what I'm doing.  I'm using the render function on a column to return a <span> element. That <span> element will be turned into the sparkline after the grid is drawn. So whenever the grid refreshes (i.e. column sort), I call the function that renders the charts. This works fine most of the time, but about 10-20% of the time when I switch between tabs the grid refresh event suddenly gets stuck in the loop.

So the general follow-up question: Is it possible that changing a DOM element in the grid after the grid is already drawn can cause the grid's refresh event to fire?

[argo]

UPDATE:

I just observed it happening without any user interaction. I had the page open, viewing the grid with the sparkline charts in each row. The mouse wasn't even moving, and after about 10 seconds of inactivity the refresh event started triggering in a loop.

[paramvir]

Did you try to comment the code from your refresh event? What were the results?

Have you been using fluid layout i.e. width/ height in %age or auto. It seems that sparkline charts trigger window.resize and that in turn causes refresh of the grid -> refresh event -> repeats the render cycle.

you could break the loop by setting autoSizeInterval option ( undocumented ) to a very large number.

e.g., autoSizeInterval : 999999 // time interval in milliseconds.

[argo]

Yes, commenting out my sparkline rendering code does stop the loop, so it definitely has something to do with the sparkline rendering.

Grid height is set to 100%-3 and grid width is set to auto. I have a column width specified on every column in pixels. I've tried that setup with flexWidth true and false. Doesn't matter what flexWidth is, the loop still happens. It's just so odd that this issue isn't 100% repeatable. Most of the time everything works and the charts render without any issue, but if I switch between tabs enough I can definitely get it to happen.

Can you elaborate a bit on what the autoSizeInterval option does?

Another thought...is it possible to stop the grid from responding to the window.resize event, or at least stop it from triggering the refresh event due to a window.resize? I'm not sure of the implications of doing that, which is why I ask.

Thanks for the support too!

[paramvir]

Yes, commenting out my sparkline rendering code does stop the loop, so it definitely has something to do with the sparkline rendering.

Could you please post the code written in refresh event.

Grid height is set to 100%-3 and grid width is set to auto. I have a column width specified on every column in pixels. I've tried that setup with flexWidth true and false. Doesn't matter what flexWidth is, the loop still happens.

Issue would happen as long as either height or width is in % or 'auto'

Can you elaborate a bit on what the autoSizeInterval option does?

Another thought...is it possible to stop the grid from responding to the window.resize event, or at least stop it from triggering the refresh event due to a window.resize? I'm not sure of the implications of doing that, which is why I ask.

autoSizeInterval is time interval in milliseconds between window resize event and the refresh of grid view. Increasing this interval to a large number would effectively stop grid refresh upon window resize tradeoff being that grid won't auto resize upon window resize and it would cease to be a fluid layout.

[argo]

Sure thing.

The column HTML is a span element that is pre-caculated. Here's an example column value:

Code: [Select]

<span class="sparklines" sparktype="pie" sparkwidth="22" sparkheight="22" sparkslicecolors="[#00dd00,#ff0000,#eeee00,#777777]" sparkborderwidth="0" values="0,1,1,4"></span>
In the grid definition, I have the following:

Code: [Select]

refresh:function(event,ui) {
   setTimeout(function() {
      $('#datatable .sparklines').sparkline('html',{enableTagOptions:true,disableHiddenCheck:true});
   },200);
}
I'm was using the setTimeout function so that the table will display faster for the user, then the charts show up a split second later. Without the setTimeout the table takes longer to display. I tried it without the setTimeout() at all and the problem appears to be less frequent, but I can still get it stuck in a refresh loop if I poke at it long enough.

If this continues, I'll try to setup a static size for height and width (rather than % or auto) and see if that fixes it. Although of course I'd prefer not to build my own size management code. I'd rather use the work you put into the grid to have it auto size 

I'll try the autoSizeInterval too if things aren't working out...I prefer not to use an undocumented feature unless I absolutely have to.

Any other thoughts are welcomed, this issue is driving me a little nuts.

BTW, I'm only seeing this on IE8 so far (my minimum supported platform). I haven't been able to recreate it on Chrome or IE10.

[paramvir]

argo

Is it possible for you to send a small but complete test case (along with charts) with reproducible issue. I would check what's causing the issue in IE8 with charts and whether there is any possible workaround.

[argo]

Thanks for the offer. I know that would help troubleshoot but it would be a big task to do that. This app is huge and the page won't run without the core framework which relies on server side code as well. I'm putting off a solution to this for a few weeks so I can move on to other parts of the app. I plan to circle back and address the issue a little later and see what I can come up with. I'll post again when I get to it, whether I find a solution or not. Your support is very much appreciated.