Управление изменением размера разделителя кендо в другом разделителе кендо

Question

У меня есть два сплиттера Kendo на странице. Один сплиттер Kendo находится внутри другого сплиттера Kendo. Мой вопрос заключается в том, как прекратить изменение размера дочернего разделителя Kendo, когда размер родительского разделителя Kendo изменяется. Это необычное поведение, но мне нужно, чтобы оно работало.

Смотрите, когда я пытаюсь изменить размер первого разделителя, второй разделитель также автоматически изменяет размер. Как я могу остановить его изменение размера? кто-нибудь может пожалуйста?

$("#vertical").kendoSplitter({
    orientation: "horizontal",
        panes: [
            { collapsible: true, resizable: true, size: "100px" },
            { collapsible: true },
            { collapsible: true, resizable: true, size: "100px" }
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true },
        { collapsible: true },
       
    ]
});

html
{
    overflow: hidden;
    font: 12px sans-serif;
}

html,
body,
#vertical
{
    height: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
}

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script>

<div id="vertical">
    <div>
       1
    </div>
    <div id="middlePane">
        <div id="horizontal" style="height: 100%">
            <div>
               2
                <input type="text" class="k-textbox" />
            </div>
            <div>
              3
            </div>
          
        </div>
    </div>
</div>

Answer 1

Однако у меня есть способ исправить ширину правой панели. Я обновил фрагмент кода. проверьте ниже.

Спасибо

$("#vertical").kendoSplitter({
    orientation: "horizontal",
        panes: [
            { collapsible: true, resizable: true, size: "50px" },
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true},
        { collapsible: true}
    ]
});
var splitter = $("#horizontal").getKendoSplitter();
splitter.size("#three", 400 + "px");

html
{
    overflow: hidden;
    font: 12px sans-serif;
}

html,
body,
#vertical
{
    height: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
}

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script>

<div id="vertical">
    <div id="one">
       1
    </div>
    <div id="middlePane">
        <div id="horizontal" style="height: 100%">
            <div id="two">
               2
                <input type="text" class="k-textbox" />
            </div>
            <div id="three">
              3
            </div>
          
        </div>
    </div>
</div>

Answer 2

Я решил свою проблему, используя следующее решение.

var splitter = $("#horizontal").data("kendoSplitter");
splitter.options.panes[0].size = "200px";
splitter.size("#right-bottom-pane", "200px");