add or remove a splitter pane

5 posts, 0 answers
  1. Atiyeh
    Atiyeh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 06 Aug 2013 Link to this post

    Hi,
    How I can remove a pane and change the size of the neighbor pane to 100% at the same time ( for example by pressing a button in a page) ?

    this in my code :
    kendoSplitter: { orientation: 'horizontal', panes: [{ resizable: true, collapsible: false, max:'90%', min:'33%' , size: '70%' }, { resizable: true, collapsible: false, max:'67%', min:'10%',size: '30%' }] }

    I want to change it to  :
    kendoSplitter: { orientation: 'horizontal', panes: [{ resizable: true, collapsible: false, max:'90%', min:'33%' , size: '100%' }] }


    by clinking a button in the page .


    thank you in advance ,
    Atiyeh
     
  2. Ryan
    Ryan avatar
    60 posts
    Member since:
    Mar 2012

    Posted 06 Aug 2013 Link to this post

    This will allow you to keep toggling the size of A between 70 and 100%.  Live example: http://jsfiddle.net/LX484/

    HTML:
    <div id="log">
        <button id="toggle">Toggle A's size</button>
    </div>
    <div class="k-content">
        <div class="a">A</div>
        <div class="b">B</div>
    </div>
    JS:
    $(function () {
        setupSplitters();
        $('#toggle').click(function () {
            var splitter = $('.k-content').data('kendoSplitter');
            var curSize = splitter.size('.a');
            splitter.size('.a', curSize === '100%' ? '70%': '100%');
        });
    });
     
    function setupSplitters() {
        $('.k-content').kendoSplitter({
            orientation: 'horizontal',
            panes: [
            // A
            {
                resizable: true, collapsible: false, max:'90%', min:'33%' , size: '70%'
            },
            // B
            {
                resizable: true, collapsible: false, max:'67%', min:'10%',size: '30%'
            }]
        });
    }


  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Aug 2013 Link to this post

    Hello,

    The public API to add and remove Splitter panes has been implemented recently and is already documented:

    http://docs.kendoui.com/api/web/splitter#methods-append

    http://docs.kendoui.com/api/web/splitter#methods-insertAfter

    http://docs.kendoui.com/api/web/splitter#methods-insertBefore

    http://docs.kendoui.com/api/web/splitter#methods-remove

    You can try the new functionality in the current internal build.

    For older Kendo UI versions a possible approach is to:

    1. Destroy the Splitter instance
    2. Remove all splitbars from the DOM
    3. Add or remove pane <div>s from the DOM
    4. Recreate the Splitter instance with new pane settings

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. tankblergh
    tankblergh avatar
    2 posts
    Member since:
    Jun 2013

    Posted 16 Aug 2013 Link to this post

    Hi!

    Can you tell me where to get the internal build with the new methods?
    I've downloaded the latest version and it seems that the latest methods are not included in the kendo.web.min.js file. 
    Thanks!
  6. tankblergh
    tankblergh avatar
    2 posts
    Member since:
    Jun 2013

    Posted 16 Aug 2013 Link to this post

    Your example worked fine, but in my project the panes did not resize at all. 
    However, I had min and max values defined for the kendosplitter, and when I removed them this solution worked for my project as well.
    I think that's a bit strange since none of the pane sizes I tried exceeded the man/min values that were defined.
    It seems that you just can't use them in this setting?

    EDIT: This was a a bit hasty, it seems that I can use those parameters after all. Please disregard this post.
Back to Top
Kendo UI is VS 2017 Ready