Splitter within Tab not sizing properly.

[Mark]

Hi.

I'm trying to use the Splitter in a div contained within a TabStrip.

I'm guessing it's because the div is not visible at the point when I call

$('#x-splitter ').kendoSplitter();

but when the splitter is eventually displayed (i.e. when the tab is selected) the first pane is 0-width. As soon as the window is resized it jumps to the correct size.

Is there any way I can tell the splitter to refresh when it's first displayed?

Any help much appreciated!

Mark

[Alex Gyoshev]

Hello Mark,

You need to trigger a resize of the splitter once its container is being resized (or, in this case, shown):

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

});

The following jsFiddle demonstrates the approach.

All the best,
Alex Gyoshev
the Telerik team

[Mark]

Works perfectly, thank you!

[Gary]

Are we going to need to have workarounds like this in the future or is Kendo going to be changed to handle these sorts of things going forward? Needless to say (but I'll say it anyway), it's a waste of developer effort to need to discover this post to make things work as expected.

[Michel]

The provided solution works fine only if the tab's animation property is set to false. But in my case I want to have the animation enabled. Is there any workaround for this issue?

[Lee]

Thanks...I found this solution in this post necessary to implement the Splitter

[Arabinda]

I have load view in edit mode within a tab and tab strip within a window. But controller method does not call the controller second time when I edit another record.

function ShowEdit(e) {
        var dialog = $("#clientEditWindow");
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        clientId = dataItem.id;
        dialog.kendoWindow({
            title: "Edit Client",

            actions: ["Refresh", "Minimize", "Maximize", "Close"],
            visible: false,
            open: onOpen,
            refresh: function () { this.center(); }
        }).data("kendoWindow").center().open();
    }
    function onOpen(e) {
        alert(clientId);
       // e.preventDefault();
        $("#tabstrip").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            },
            contentLoad: onContentLoad,
            contentUrls: ['@Url.Action(MVC.Client.EditClient(0))'.replace('/0', '/' + clientId), '@Url.Action(MVC.ClientLocation.ClientLocationList())']
         });
    }

EditClient() does not call second time. Any help?

[Nathan]

I realize this thread is old, but thought I would still post the answer to Michel's question in case someone else runs across this. If your tabs use the animation, you have to wait for the animation to finish before executing the resize code so you use setTimeout for that.
Something like this:

activate: function () {
  setTimeout(function () {
     //resize code goes here
  }, 120);

Of course the length of time you need in the setTimeout depends on your animation length. In my case the animation duration is 100, so I used 120 for duration.

Hope this helps anyone else trying to get resizing to work in complex scenarios; in my case it's a grid to size from within a splitter within a tab within a splitter... ;) It can work it just takes determination! lol