Kendo Splitter inside Kendo TabStrip with MVVM init

I have a page with a Kendo splitter inside a Kendo tabstrip and they are instantiated using the kendo.init method. There are two tabs and the splitter control is in the second tab. When I click on the second tab, the splitter control has not been initialised correctly. The splitter’s divider is not the correct height.

I have put together a sample page that demonstrates this behaviour:

HTML:

<div id="testContainer">
    <div 
        id="testTabStrip"
        data-role="tabstrip">
        <ul>
            <li class="k-state-active">Tab1</li>
            <li>Tab2</li>
        </ul>
        <div>
            <div id="tab1-content">
                Tab One Content
            </div>
        </div>
        <div>
            <div id="tab2-content">
                <div data-role="splitter"
                    data-panes="[
                        { collapsible: true, size: '300px' },
                        { collapsible: true }
                    ]" 
                    style="min-height:700px">
                    <div id="Left-Pane">
                        Left Pane Content
                    </div>
                    <div id="Right-Pane">
                        Right Pane Content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function() {
    kendo.init($('#testContainer'));
    $('#testTabStrip').bind('select', function (e) {
        setTimeout(function () {
            $(e.contentElement).find(".k-splitter").each(function () {
                $(this).data("kendoSplitter").trigger("resize");
            },300);
        });
    });
});

Here is a fiddle of the above code: http://jsfiddle.net/codeowl/2nq5z/3/

You can see in this example that I have tried to implement a workaround I found on the Web to trigger the resize event of the splitter on the select event of the tabstrip. However, this has not worked.

How can I resolve this issue?

Thanks for your time,

Regards,

Scott

Kendo TabStrip with KendoGrid inside using JavaScript for Events handling

I have simple page with Kendo TabStrip inside <div id=main-view class=k-content> @(Html.Kendo().TabStrip() .Name(main-view-tabstrip) .Items(tabstrip => { tabstrip.Add().Text(My Notices

Kendo Grid Ajax inside Kendo TabStrip Ajax (LoadContentForm) not displaying content

I want to put an Ajax Kendo Grid inside an Ajax Kendo TabStrip, but the grid never displays any of its values. (Even if the FireBug console indicates that the values have been correctly get…) Is thi

Nested kendo panel on a Kendo Tabstrip not Rendering

I have a kendo tabstrip which load 3 tab. the first tab loads a kendo panelbar the code is like this @(Html.Kendo().TabStrip() .Name(tabstrip) .Items(tabstrip => { tabstrip.Add().Text(Transacti

Kendo grid inside splitter next page

Here’s my layout. I’m using a Kendo splitter control. The left pane contains a menu and the right is the main content. Some of the content pages contain kendo grids that can contain several pages of d

JSON data not binding to a kendo tabstrip

My Controller returns 10 set of records.I have converted that data to JSON. But when I am trying to bind that JSON data to a kendo tabstrip in a view part it displays [object object]. The alert window

Nested Kendo UI Tabstrip

I’m developing a ASP.NET MVC5 project and I’m using Telerik Kendo UI. Main panel has a kendo treeview on left side into a nav with options. When any option is clicked, ajax action is dispatched and th

Kendo Tabstrip loading Grid with .Content works, .LoadContentFrom doesn’t

I have a tabstrip loading a grid in 2 different tabs (the same grid, the same data). @(Html.Kendo().TabStrip() .Name(tabstrip) .Items(tabstrip => { tabstrip.Add().Text(Cycle Summary) .Content(

Kendo UI Scroll not working for kendo treeview in kendo splitter

Scrollbar not working in kendo splliter which has content kendo treeview bind . In Kendo splitter i kept content kendo treeview after expanding kendo treeview scroll is not working and treeview data i

Manually select tabstrip in Kendo ui mobile

I am using Kendo ui mobile. I am opening a modal view when a tabstrip item is selected as shown in the screenshot (Show Modal.png). In the select method of kendo ui mobile tabstrip I am preventing th

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.

Answers

The approach to resizing has changed in the 2014 Q1 release; you should no longer call widget.trigger(“resize”). Instead, use kendo.resize(); also, you should bind to the activate event so e.contentElement is visible when your handler is called; that way you don’t need the setTimeout:

$(document).ready(function () {
    kendo.init($('#testContainer'));
    var tabStrip = $('#testTabStrip').data("kendoTabStrip");

    tabStrip.bind('activate', function (e) {
        kendo.resize($(e.contentElement));
    });
});

(updated demo)