Splitter panes defined with data attributes

[Kevin]

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.

[Dimo]

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

[luca]

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?

[Dimo]

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