Splitter rendering is glitchy

[Felix]

I found that if the splitter is initialized while it's not being rendered, it won't be rendered correctly.

 An easy way to reproduce this is to create tabstrip which contains 2 tabs. (Normal page and splitter)

<ul>

    <li class="k-state-active">Page Contains Splitter</li>

    <li>Normal</li>

</ul>

<div>

    <div class="hsplitter">

        <div>Content 1</div>

        <div>Content 2</div>

    </div>

</div>

<div>

    This is normal page

</div>

When the splitter is initialized when it's splitter page is shown, it's fine. But, not the other way around.

Is there any workaround this?

[John]

Re-ordering the initialization of the TabStrip and Splitter widgets in your code will resolve the behaviour you're seeing. Generally-speaking, you should initialize a nested widget prior to initializing its parent. For example:

// nested/child widget

$(".splitter").kendoSplitter({

    // ...

});

  

// parent widget

$(".tabStrip").kendoTabStrip({

   // ...

});

Note: I've posted a jsFiddle here that replicates your code but with the behaviour resolved.

[Ramon]

Hi there...

I have the same problem and you are correct... inverting the initialization solves the issue... but what if the content of the second tab is loaded via ajax (contentUrls) like this:

<div id="tabControl" class="wkMainTab" style="height:500px;">

    <ul>

        <li class="k-state-active">Alumnos</li>

        <li>Tutores</li>

    </ul>

</div>

and 

$("#tabControl").kendoTabStrip({

    animation : {

        open : {

            effects: "fadeIn"

        }

    },

    contentUrls: [

        null,

        "app_tutores"  

    ],

});

and when I get "app_tutores" I receive the html and javascript to build the splitter... then I have the same issue =(
Is there a way to trigger a "redraw" or something like that?

Thanks.
Ramón.