kendo ui splitter switch orientation

Question

Just wanted to share a solution to a short problem I encountered to one of my recent projects here.

The situation is the next: In a kendo UI based web project you want to use the splitter functionality with the next basic configuration:

HTML

<div id="mySplitter">
    <div id="primaryItemPane">

    </div>
    <div id="secundaryItemPane">

    </div>
</div>

JS

$("#mySplitter").kendoSplitter({
                orientation: "vertical",
                panes: [
                    { collapsible: false, size: "50%", contentUrl: "/urlToPane" },
                    { collapsible: false, size: "50%", contentUrl: "/urlToPane" },
                ]
            });

Now lets say you want to change "toggle" the orientation and be able to re-use that toggle as much as you want.

The main problem is that Kendo UI doesn't provide built in functions to switch the orientation and maintain the underlying existing panes.

I will provide the answer below myself, but other working solutions or more efficient ways are welcome.

score 2 · Accepted Answer · answered Jun 27 '17 at 09:24

As stated in the question I will post my own solution here.

This page already gave me a good headstart, but some solutions didnt work for me or didnt provide concrete code for the described solution.

So I got into debugging via Chrome and came up with the following solution:

orderbasedSwitchOrientation: function () {
        //get the existing working splitter
        var splitter = $("#mySplitter").data("kendoSplitter");

        //remove the DOM splitbar elements and remove all splitter styling
        splitter.element
            .children(".k-splitbar").remove()
            .end()
            .children(".k-pane").css({ width: "", height: "", top: "", left: "" });

        //destroy the splitter link to the DOM
        splitter.destroy();

        //Switch the orientation of the destroyed splitter object
        splitter.orientation = splitter.options.orientation = (splitter.orientation == "vertical" ? "horizontal" : "vertical");

        //re-initialize the splitter with the newly switched orientation
        $("#mySplitter").kendoSplitter({
            orientation: splitter.orientation
        });
    }

I think this approach since you never fully make the splitter object null in JS, but you completely remove the link to the DOM and reset the DOM set it open to be re-bound to the Splitter.

As stated above, if anyone has better solutions please provide them

Greetings

kendo ui splitter switch orientation

HTML

JS

1 Answers1