CODEWITHSUNDEEP
resizekendo-uisplitter
CipherDarkness
CipherDarkness

Reputation: 214

Kendo UI Splitter resize

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.

Upvotes: 1

Views: 7946

Answers (3)

Shai
Shai

Reputation: 3872

You should put your resize code in the activate event handler, not the select event handler, which fires after the animation has endede as well. Then you can remove the setTimeout altogether:

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

Upvotes: 0

Hannele
Hannele

Reputation: 9666

You can use the activate event for the TabStrip:

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    $(e.contentElement).find('.k-splitter').trigger('resize');
  }
});

It's possible there are drawbacks where animation is concerned, but it seems less messy than mucking with setTimeout.

Upvotes: 0

Burke Holland
Burke Holland

Reputation: 2337

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/

Upvotes: 3

Related Questions