add new pane in kendo ui splitter

Question

A want to add new panes to kendo ui spliter dynamically but it seems like it's not working. Even in their website it doen't work: Kendo ui splitter demo (I'm talking about the append pane and insert pane)

Is it possible that they have added a demo of something that doesn't work, or am I missing something?

Answer 1

It's a bug - apparently, the code is not calling the _resize method when it should (in _addPane and remove, as far as I can see).

Seems to be an easy fix though (add this code somewhere before you first create your splitter):

kendo.ui.Splitter.fn._addPane = function (config, idx, paneElement) {
    var that = this;

    if (paneElement.length) {
        that.options.panes.splice(idx, 0, config);
        that._initPane(paneElement, config);

        that._removeSplitBars();

        that.trigger("resize");
        that._resize();
    }

    return paneElement;
};

kendo.ui.Splitter.fn.remove = function (pane) {
    pane = $(pane);

    var that = this;

    if (pane.length) {
        kendo.destroy(pane);
        pane.each(function (idx, element) {
            that.options.panes.splice($(element).index(".k-pane"), 1);
            $(element).remove();
        });

        that._removeSplitBars();

        if (that.options.panes.length) {
            that.trigger("resize");
            that._resize();
        }
    }

    return that;
}

See demo