Kendo Splitter Pane调整问题

Question

我使用Kendo UI框架有这样的布局：

现在单击位于顶部窗格的Button后，我希望左窗格随着treelist一起展开到右窗格。我试过这样的事情：

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

点击该按钮后会发生以下情况：

Answer 1

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