Splitter panes defined with data attributes

4 posts, 0 answers
  1. Kevin
    Kevin avatar
    1 posts
    Member since:
    Apr 2012

    Posted 16 Jan 2013 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. luca
    luca avatar
    3 posts
    Member since:
    Jan 2013

    Posted 20 Jan 2013 Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Jan 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready