SlickGrid overlay issue in Jquery UI Tabs ?

[StudentForever]

Hi

I am using jquery UI tabs in an ASP.Net MVC application. In the first tab, I have slick grid. I am using a remote model to bind the data.

When I perform virtual scrolling, switch to another tab and switch back to the one which has slickgrid, its empty and scroll is set to top instead of the prev position. I am only making ajax calls after the initial page load for all my interactions.

Note: The tab switched do not cause any ajax requests.

I tried setting breakpoints in bunch of events (click, scroll, render etc.) but I could not figure out what is causing this weird behavior when I switch back & forth between tabs. Any thoughts ?

Thanks for your time.

[StudentForever]

There seems to be an overlay issue when slickgrid is inside a jquery ui tab. I am not sure how to fix it.

To reproduce the isse, Please try this JSFiddle link : http://jsfiddle.net/DENmT/

Please scroll the grid in Tab1 and switch to Tab2. When we switch back to Tab 1. The grid is empty. This seems to happen in chrome and IE, not an issue in firefox !

Posted the same question on stackoverflow as well: http://stackoverflow.com/questions/7310888/slickgrid-overlay-issue-in-jquery-ui-tabs

Please let me know if I'm missing something.

Thanks for your time.

[StudentForever]

Solved it with the hint from : #88

Used the off-left technique to hide inactive tabs.

[saurshaz]

thanks @StudentForever