Kendo UI Splitter resize

Question

I have a Tabstrip, where one of the Tabs contains a Splitter. The problem is that the Splitter doesn't appear normally when I click the tab - the left pane has zero size, and the right pane is blank. If I expand the left pane, it shows normally.

I found this problem here too: Kendo UI Forum

So I used the code provided:

$("#tabstrip").kendoTabStrip({
animation: false,
select: function(e) {
    setTimeout(function() {
        $(e.contentElement).find(".k-splitter").each(function() {
            $(this).data("kendoSplitter").trigger("resize");
        });
    });
}
});

And for some past kendo release it worked even with animation:true!

However, after I started to use the Q3 beta, and now the full Q3, the above code ONLY works if I put an alert("") before the trigger command! With the alert it works fine, without it I get the old messed up results again.

My current code is:

$("#tabstrip").kendoTabStrip({
    animation : {
        open : {
            duration : 200,
            effects : "fadeIn"
        }
    },
    select : function(e) {
        setTimeout(function() {
            $(e.contentElement).find(".k-splitter").each(function() {
                $(this).show(500, function() {
                    alert("");
                    $(this).data("kendoSplitter").trigger("resize");
                });
            });
        });
    }
});

$("#splitter").kendoSplitter({
    panes : [
        {
            collapsible : true,
            size : "17%",
            scrollable: false
        },
        {
            collapsible : false,
            resizable: false,
            scrollable: false
        },
        {
            collapsible : true,
            size : "20%",
            scrollable: false
        },
    ],
});         

Am I forgetting something? The whole thing with the alert("") doesn't really makes sense, and of course I don't want an alert every time I select the tab.

PS: If I put animation:false, then the code works without the alert(""), but I want to keep the animation as it is.

Answer 1

Give the setTimeout function a duration (second parameter) longer than that of your animation.

$("#tabstrip").kendoTabStrip({
    animation : {
        open : {
            duration : 200,
            effects : "fadeIn"
        }
    },
    select: function(e) {
        setTimeout(function() {
            $(e.contentElement).find(".k-splitter").each(function() {
                $(this).data("kendoSplitter").trigger("resize");
            });
        }, 300);
    }          
});

Here is example fiddle:

http://jsfiddle.net/FLLJv/53/