Splitter rendering is glitchy

3 posts, 0 answers
  1. Felix
    Felix avatar
    1 posts
    Member since:
    Dec 2011

    Posted 29 Dec 2011 Link to this post

    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?
  3. John
    John avatar
    7 posts
    Member since:
    Jul 2011

    Posted 26 Jan 2012 Link to this post

    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.
  5. Ramon
    Ramon avatar
    1 posts
    Member since:
    Dec 2011

    Posted 24 Feb 2012 Link to this post

    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.
Back to Top