This is a migrated thread and some comments may be shown as answers.

Splitter panes defined with data attributes

3 Answers 184 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 16 Jan 2013, 06:49 PM
I'm just getting started with a Kendo UI evaluation and am trying to define a splitter using data attributes (vs. the jquery .kendoSplitter() approach), but can't find examples of how to define the panes this way.  I'm trying to set up simple 2-panes, 50/50 split.

Thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Jan 2013, 12:48 PM
Hi Kevin,

You can use MVVM like this:

<div data-role="splitter" data-orientation="horizontal" data-panes="[{size:'60%'},{size:'40%'}]">
    <div id="pane1">Pane 1</div>
    <div id="pane2">Pane 2</div>
</div>


kendo.ui.Splitter.fn.options.panes = [];
 
kendo.bind( .....arguments....here..... );

Setting options.panes before kendo.bind() will allow you to define pane options declaratively. This will be supported out-of-the-box in next versions.

If you will be creating only a Splitter, you don't need a ViewModel in the bind() method's arguments. For more information about MVVM, please refer to:

http://docs.kendoui.com/getting-started/framework/mvvm/overview

http://demos.kendoui.com/web/mvvm/widgets.html

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
luca
Top achievements
Rank 1
answered on 20 Jan 2013, 07:42 PM
Hi,
I have defined the splitter panes  with data attributes as showed in Dimo's example. My aim is to dinamically create, after button click, a splitter pane div  and then initialized the splitter. I need collapsible panes which are not by the default.
kendo.ui.Splitter.fn.options.panes=[];
  $("#button").click(function () {
  $('<div> </div>').appendTo("#splitter");
  kendo.ui.Splitter.fn.options.panes.push({collapsible:'true', size: '100px'});
  kendo.bind(document.body.children);
  });

This code works only on first click. On following clicks the div and panes list are correctly updated but not the splitter.
Alternatively there is any way to set collapsible panes as default?
0
Dimo
Telerik team
answered on 21 Jan 2013, 12:39 PM
Hello Luca,

You can't create a new Splitter over an existing one (i.e. by using the same originating <div> element). The current widget instance must be destroyed first and the splitbars should be removed from the DOM.

On a side note, your account information shows that you are using Kendo UI GPL and a trial license at the same time. Since this is not allowed, I suppose you are have given up using GPL? Please elaborate on your customer standing. If needed, you can open a support ticket to do that.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Splitter
Asked by
Kevin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
luca
Top achievements
Rank 1
Share this question
or