[Solved] Treeview disappears when in splitter on a tabstrip

[Jay]

I'm working on an app that has a tab strip with three tabs. The first tab has a tree view and a nested tab strip, both in a splitter. The second tab has just a nested tab strip. the third tab has a tree view and a nested tab strip, both in a splitter.

The problem is that the tree view disappears (hides behind the nested tab strip as far as I can tell), when you switch between tab 1 and tab 3.

Steps to duplicate the problem

• Run the app
• Switch to tab 3
• Notice tree view is mia.
• switch to tab 1
• Expand a node in the tree
• switch to tab 3
• notice tree view is there
• switch back to tab 1
• notice tree view 1 is now mia
• switch back to tab 3
• expand a node in its tree view
• switch back to tab 1
• repeat...

Its like the second pane looses its position and slides over the top of the first pane.

I've tried this in IE 8 & 9, as well as Chrome & FF. The above steps describe IE 8... I haven't found in Chrome & FF how to get the 2nd tree view to show. Dragging the splitter only seems to work, in this scenario, in IE. The min & max values on the splitter seem to be ignored in this scenario!

Any thoughts?

Thanks
Jay

[Petur Subev]

Hi Jay,

Thank you for sending the sample project. Basically the Splitter is not recalculating the space he should use when you switch tabs.
To fix this you can use the resize method provided by its API. So you can hook a handler to the OnSelect event of the main TabStrip and execute the following handler - which will take care of re-sizing the splitter inside of the tab content.
 

<script type="text/javascript">
    function onSelectOfTab(e) {
        setTimeout(function () {
            var splitter = $('.t-splitter', e.contentElement).data("tSplitter");
            splitter && splitter.resize();
        }, 10);
    }
</script>

Kind regards,
Petur Subev
the Telerik team