Kendo Splitter Pane Resize Issue
<p>I have a layout like this using Kendo UI framework : </p>

<p><img src="https://i.stack.imgur.com/GYyZT.png" alt="enter image description here"></p>

<p>Now after clicking the Button situated at top pane, I want the left pane to expand along with treelist to the right pane. I tried something like this : </p>

<pre><code>&lt;script&gt;
  $(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() &gt; 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('&lt;tr role="row" data-uid="3c1a7d2d-a511-4569-b3d0-1da615f717ed" aria-expanded="true" class="k-treelist-group"&gt;'+'&lt;td&gt;&lt;input type="text" class="k-textbox" value"checknow" id="check-all" /&gt;&lt;label for="check-all"&gt;&lt;/label&gt;&lt;/td&gt;' +'&lt;td&gt;&lt;input type="text" class="k-textbox" value"checknow" id="check-all" /&gt;&lt;label for="check-all"&gt;&lt;/label&gt;&lt;/td&gt;'+'&lt;td&gt;&lt;input type="text" class="k-textbox" value"checknow" id="check-all" /&gt;&lt;label for="check-all"&gt;&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;');
</code></pre>

<p>Here is what happens after clicking that button:</p>

<p><img src="https://i.stack.imgur.com/aLs3P.png" alt="enter image description here"></p>