Jquery 剑道拆分器窗格大小调整问题

我使用剑道UI框架进行了如下布局：

现在，单击位于顶部窗格的按钮后，我希望左窗格与树列表一起展开到右窗格。我试过这样的方法：

<script>
  $(document).ready(function () {


    $("#horizontal").click(function (e) {


    });


var service = "//demos.telerik.com/kendo-ui/service";

$("#treelist").kendoTreeList({
    dataSource: {
        transport: {
            read: {
                url: service + "/EmployeeDirectory/All",
                dataType: "jsonp"
            }
        },
        schema: {
            model: {
                id: "EmployeeID",
                parentId: "ReportsTo",
                fields: {
                    ReportsTo: { field: "ReportsTo", nullable: true },
                    EmployeeID: { field: "EmployeeId", type: "number" },
                    Extension: { field: "Extension", type: "number" }
                },
                expanded: true
            }
        }
    },
    height: 540,
    filterable: false,

    sortable: false,
    columns: [
        {
            field: "FirstName", title: "First Name", width: 260

        },
        { field: "LastName", title: "Last Name", width: 280 },
        { field: "Position"}
        //{ field: "Phone", width: 200 },
        //{ field: "Extension", width: 140 },
        //{ field: "Address" }
    ]
});
});
$(function () {
    $("#vertical").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: true, size: "60px" },
            { collapsible: false },
            { collapsible: false, resizable: true, size: "10%" }
        ]
    });
    //---------------------------------------------------------------------------------------


 var leftPane = $("#treelist");
 var splitterElement= $("#horizontal").kendoSplitter({
        panes: [
            { collapsible: true, size: "100px" },
            { collapsible: true },
            { collapsible: true, resizable: true, size: "20%" }
        ]
 });
 $("#mybutton").click(function (e) {
     var splitter = splitterElement.data("kendoSplitter");
     splitter[leftPane.width() > 0 ? "collapse" : "expand"](leftPane);        
 });




    //------------------------------------------------------------------------------------------

        var menu = $("#menu").kendoContextMenu({
        target: "#treelist",
        filter: "tr",
        select: function (e) {
            // Do something on select
        }
    });

        $("#mybutton").click(function () {


    });//func end




    $('tbody').prepend('<tr role="row" data-uid="3c1a7d2d-a511-4569-b3d0-1da615f717ed" aria-expanded="true" class="k-treelist-group">'+'<td><input type="text" class="k-textbox" value"checknow" id="check-all" /><label for="check-all"></label></td>' +'<td><input type="text" class="k-textbox" value"checknow" id="check-all" /><label for="check-all"></label></td>'+'<td><input type="text" class="k-textbox" value"checknow" id="check-all" /><label for="check-all"></label></td></tr>');

$（文档）.ready（函数（）{
$（“#水平”）。单击（功能（e）{
});
var service=“//demos.telerik.com/kendo ui/service”；
$（“#树状图”）.Kendotrelist({
数据源：{
运输：{
阅读：{
url:service+“/EmployeeDirectory/All”，
数据类型：“jsonp”
}
},
模式：{
型号：{
id:“雇员id”，
parentId:“ReportsTo”，
字段：{
ReportsTo:{字段：“ReportsTo”，可为空：true}，
EmployeeID:{字段：“EmployeeID”，类型：“number”}，
扩展名：{字段：“扩展名”，类型：“编号”}
},
是的
}
}
},
身高：540，
可过滤：false，
可排序：false，
栏目：[
{
字段：“名字”，标题：“名字”，宽度：260
},
{字段：“姓氏”，标题：“姓氏”，宽度：280}，
{字段：“位置”}
//{字段：“电话”，宽度：200}，
//{字段：“扩展”，宽度：140}，
//{字段：“地址”}
]
});
});
$（函数（）{
$（“#垂直”）.kendospliter({
方向：“垂直”，
窗格：[
{可折叠：true，大小：“60px”}，
{可折叠：false}，
{可折叠：false，可调整大小：true，大小：“10%”
]
});
//---------------------------------------------------------------------------------------
var leftPane=$（“#树列表”）；
var splitterElement=$（“#水平”）.kendospliter({
窗格：[
{可折叠：true，大小：“100px”}，
{可折叠：true}，
{可折叠：true，可调整大小：true，大小：“20%”
]
});
$（“#我的按钮”）。单击（功能（e）{
var splitter=splitterElement.data（“kendoSplitter”）；
拆分器[leftPane.width（）>0？“折叠”：“展开”]（leftPane）；
});
//------------------------------------------------------------------------------------------
var menu=$（“#menu”）.kendoContextMenu({
目标：“#树人”，
过滤器：“tr”，
选择：功能（e）{
//选择做某事
}
});
$（“#我的按钮”）。单击（函数（）{
})；//func end
$（'tbody'）。前缀（“”+“”+“”+“”）；

以下是单击该按钮后发生的情况：

---

Nvm，我自己找到了解决方案。。。 我有Pane.resize（）方法来实现它