在另一个 kendo 拆分器中管理调整 kendo 拆分器的大小

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");

在另一个 kendo 拆分器中管理调整 kendo 拆分器的大小

Manage resizing kendo splitter within another kendo splitter

css

jquery

resize

kendo-splitter