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

Posted 2021-04-12

我在页面上有两个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>

答案

我使用以下解决方案解决了我的问题。

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

另一答案

但是，我已经找到了修复右侧面板宽度的方法。我已更新了代码段。检查下面。

谢谢

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

以上是关于管理在另一个kendo分割器中调整kendo分割器的大小的主要内容，如果未能解决你的问题，请参考以下文章

在 kendo-ui 网格中显示/隐藏列后，有啥方法可以自动调整网格列宽？

Kendo Grid按行数自动调整大小

css 调整列kendo的大小

如何根据 Kendo-Angular2-grid 中的数据自动调整网格列的大小？

单击 Kendo UI 按钮调用服务器端 MVC 操作

如何通过平移、旋转和/或缩放调整来匹配两个分割蒙版