Possible to flip/reorder panes

3 posts, 0 answers
  1. Kjell
    Kjell avatar
    274 posts
    Member since:
    Jun 2010

    Posted 08 Mar Link to this post

    In a splitter with two panes vertically oriented, is it possible to flip the pane order on the fly?  I want to be able to change the pane order so one is changed from being left to right and vice versa.
  2. Ianko
    Ianko avatar
    1510 posts

    Posted 10 Mar Link to this post

    Hi Kjell,

    When it comes to the pane elements, you should note that they are actual DOM elements. And in order to reorder them you will need to rearrange the DOM inside the Splitter. After that, to append the new DOM elements using the Splitter API.

    Let's assume there is a Splitter that is horizontally oriented (left-to-right panes) and have two panes inside. In order to change the left pane to go to the right you need to: 
    1. Use the Splitter API (http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter) to get the options of the first pane (http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter#configuration-panes);
    2. Get the pane's element and preserve all possible custom attributes and styles (like id, classes, etc.);
    3. Get the pane's HTML;
    4. Remove  the pane by using the remove method (http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter#methods-remove);
    5. Insert a new pane by using insertAfter method with the preserved pane options (http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter#methods-insertAfter);
    6. Restore any custom attributes, styles, etc.;
    7. Restore the HTML content. 

    You should end up with a code similar to this one:
            .Panes(p => {
                p.Add().Collapsible(true).HtmlAttributes(new { id = "leftPane" }).Content("left pane");
                p.Add().Collapsible(true).HtmlAttributes(new { id = "rightPane" }).Content("right pane");
            .Content("Switch Panes")
            .Events(e => e.Click("switchPanes")))
        switchPanes = function (e) {
            var splitter = $("#Splitter").data("kendoSplitter");
            //  save all options
            var firstPaneOptions = splitter.options.panes[0];
            // save id attribute. Based on the situation you may need to
            // apply further styles, classes or any other custom attributes added initially.
            var firstPaneId = splitter.element.children(".k-pane").first().attr("id");
            // save the HTML content
            var firstPaneHtml = splitter.element.children(".k-pane").first().html();
            // Add pane with the preserved options
            var newPane = splitter.insertAfter(firstPaneOptions, ".k-pane:first");
            // restore all custom data (attributes, styles, classes and HTML).
            newPane.attr("id", firstPaneId);

    You can also see in this demo how these method are used with the client-side widget—http://demos.telerik.com/kendo-ui/splitter/api.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
  4. Kjell
    Kjell avatar
    274 posts
    Member since:
    Jun 2010

    Posted 10 Mar in reply to Ianko Link to this post

    works great, thank you
Back to Top