【问题标题】:Kendo Splitter: How to change "collapsible: false" property of splitter to "collapsible: true" on click of buttonKendo Splitter:如何在单击按钮时将拆分器的“collapsible:false”属性更改为“collapsible:true”
【发布时间】:2015-08-17 20:21:03
【问题描述】:

我们能否强制 Kendo 在单击按钮时将拆分器的“collapsible: false”属性更改为“collapsible: true”??

加载时,如果 Splitter 属性“collapsible”设置为“false”,则用户无法将其折叠回来..

如果我设置属性“collapsible:false”但是在运行时单击按钮时将属性更改为“collapsible:true”然后折叠然后将其设置回来到“可折叠:假”???

这是我的代码:

HTML

<p>
    <button id="collapsePane" type="button" class="k-button">Collapse left pane</button>
    <button id="expandPane" type="button" class="k-button">Expand left pane</button>
</p>
<div id="splitter">
    <div id="left">Left column</div>
    <div>Main content</div>
</div>

JS

var splitterElement = $("#splitter").kendoSplitter({
    panes: [{
        size: "15%",
        resizable: true,
        collapsible: false,
    }, {
        size: "85%",
        resizable: true,
    }]
});


var splitter = splitterElement.data("kendoSplitter");

$("#collapsePane").click(function (e) {
    var splitter = $("#splitter").data("kendoSplitter");
    $("#left").collapsible(true);  /*How to change this property?*/
    splitter.collapse("#left");
});

$("#expandPane").click(function (e) {
    var splitter = $("#splitter").data("kendoSplitter");
    splitter.expand("#left");
});

这是我的代码演示的链接:http://jsfiddle.net/hxtxokoq

如果您需要任何其他详细信息,请提出建议并告诉我。

提前致谢!

【问题讨论】:

  • 这是你想要做的吗? jsfiddle.net/4w7k3gz3/1
  • 不,实际上我想要的是,在加载拆分器时,将 collapsible 属性设置为“false”,然后如果你想展开或折叠,你将无法做到这一点...所以我想..其中一种方法是在运行时通过单击“按钮”将可折叠属性设置回“真”
  • 请参考这个小提琴:jsfiddle.net/hxtxokoq

标签: javascript jquery html kendo-ui kendo-splitter


【解决方案1】:

尝试改变你的 $("#left").collapsible(true);到:

splitter.options.panes[0].collapsible = true;

更新 jsfiddle:http://jsfiddle.net/4w7k3gz3/3/

编辑:这是用于寻找解决方案的文档:http://docs.telerik.com/kendo-ui/web/splitter/overview#change-pane-settings-after-initialization

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-11
    • 2023-03-13
    • 2019-07-15
    相关资源
    最近更新 更多