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
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
4 Answers, 1 is accepted
0
Ryan
Top achievements
Rank 1
answered on 06 Aug 2013, 06:59 PM
This will allow you to keep toggling the size of A between 70 and 100%. Live example: http://jsfiddle.net/LX484/
HTML:
JS:
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
>
$(
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%'
}]
});
}
0
Hello,
Dimo
Telerik
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
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
tankblergh
Top achievements
Rank 1
answered on 16 Aug 2013, 08:41 AM
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!
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!
0
tankblergh
Top achievements
Rank 1
answered on 16 Aug 2013, 01:03 PM
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.
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.