Manage resizing kendo splitter within another kendo splitter

Question

I have two Kendo splitters on a page. One Kendo splitter is inside of the another Kendo splitter. My question is how to stop resizing child Kendo splitter, when parent Kendo splitter is resized. Its kind of unusual behavior, but I will need to make it working.

See, when I try to resize the first splitter, the second splitter is also resizing automatically. How can I stop it resizing? can anyone please?

$("#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

However, I have got the way to fix the right panel width. I have updated the code snippet. check below.

thanks

$("#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

I have solved my issue using following solution.

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