add or remove a splitter pane

[Atiyeh]

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
 

[Ryan]

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%'
        }]
    });
}

[Dimo]

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

[tankblergh]

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!

[tankblergh]

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.