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

Possible to flip/reorder panes

2 Answers 74 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Kjell asked on 08 Mar 2016, 03:24 PM
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 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 10 Mar 2016, 08:58 AM
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:
@(Html.Kendo().Splitter()
        .Name("Splitter")
        .Orientation(SplitterOrientation.Horizontal)
        .Panes(p => {
            p.Add().Collapsible(true).HtmlAttributes(new { id = "leftPane" }).Content("left pane");
            p.Add().Collapsible(true).HtmlAttributes(new { id = "rightPane" }).Content("right pane");
        }
   )
)
 
@(Html.Kendo().Button()
        .Name("SwitchBtn")
        .Content("Switch Panes")
        .Events(e => e.Click("switchPanes")))
 
<script>
    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();
 
        splitter.remove(splitter.element.children(".k-pane").first());
 
        // 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);
        newPane.html(firstPaneHtml);
    }
</script>

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.

Regards,
Ianko
Telerik
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
0
Kjell
Top achievements
Rank 1
answered on 10 Mar 2016, 06:46 PM
works great, thank you
Tags
Splitter
Asked by
Kjell
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Kjell
Top achievements
Rank 1
Share this question
or