Listgrid performance issues

[acarur01]

We are currently looking at improving performance of our applications and one of the issues that came up was that in some older machines (Windows XP) with IE8, the server request is not being sent until a period of time. The theory is that the browser is waiting for all the components to be drawn before it sends the fetch request. As a result, we see "No Items to load" for a few seconds before the data is loaded. The proposed fix was the delay the showing of the listgrid until after we've called fetch.

My current issue is that our product pre-renders the create script of a single page...meaning we have something like:

function(bm){return isc.VStack.create({ID:bm.getId("LoginGrid_vCentering"),name:"LoginGrid_vCentering",vPolicy:"fill",hPolicy:"fill",$cwname:"LoginGrid_vCentering",title:" ",showResizeBar:false,height:"100%",width:"100%",align:"center",defaultLayoutAlign:"center",members:
[isc.DynamicForm.create({width:240,ID:bm.getId("LoginGrid"),name:"LoginGrid",title:"&nbsp;",numCols:2,titleSuffix:"&nbsp;",rightTitlePrefix:"&nbsp;",requiredTitleSuffix:"*<\/B>",requiredRightTitleSuffix:"*<\/B>",requiredRightTitlePrefix:"<B> ",colWidths:["90","150"],titleOrientation:"left",cellPadding:2,fields:
[{title:"&nbsp;",width:600,height:300,src:"\/cwf\/r\/cwf\/Login.gif?v=1321459648547en-xx",align:"center"

We also have other logic to call show() on the element that has been returned from that function. Naturally, calling show() on a layout which contains a listgrid as a parent will also show the listgrid.

So my first question, is there any way to defer the showing of the listgrid based on our logic? Something like when layout.show() is called, to let it know not to call show() on the listgrid? Or do I need to keep track of all layouts with a listgrid as a child and suppress the call to the layout's show() until after fetch is called?

[Isomorphic]

The best performance comes from parallelizing fetch and rendering. You can do this by calling ListGrid.fetchData() before the ListGrid is drawn, setting a 0-millsecond timer to exit the thread (which allows the request to actually leave the browser), then calling draw() when the timer goes off. This way the components are drawing while the fetch is in progress.

In particular, it's not just the ListGrid that you want to avoid drawing until data fetches have occurred - it's all components (for the most benefit).

To do this, create() but do not draw (autoDraw:false) all components, make manual calls to fetchData() on which components will be fetching, set a timer, then tell the top component to draw.

[acarur01]

Ok. So pretty much my second option that I posted "Or do I need to keep track of all layouts with a listgrid as a child and suppress the call to the layout's show() until after fetch is called?"

I was hoping there would be an easier way to do it since I can have multiple layouts in a page, each containing a listgrid that need to fetch data.

[Isomorphic]

To clarify, you just need to defer rendering for the top-level container, not every layout component. If you meant that you have multiple top-level components, then yes, defer rendering for all of those.