kendo ui treelist扩展事件阻止扩展

Question

I have configured 3 kendo ui treelists in a single view. I am trying to expand the one tree list from other's expand event. When the expand method is called from the current treeviews event, its expanding the specified treelist but preventing the expand of current treelist. Below is the code block for the same. Can somebody throw some light on where I going wrong:

Html:

     <div id="products"></div>
     <div id="suppliers"></div>
     <div id="categories"></div>

JS:

    var data = [{"ProductID": 1,"ProductName": "Chai","ParentID": null,
    "UnitPrice": 18,"QuantityPerUnit": "10 boxes x 20 bags",
    "UnitsInStock":39,"UnitsOnOrder": },"ProductID":2,"ProductName":"Chang",
    "ParentID": null,"UnitPrice": 19,"QuantityPerUnit": 
    "24 - 12 oz bottles","UnitsInStock": 17,"UnitsOnOrder": 40},
    {"ProductID": 3,"ProductName": "Aniseed Syrup","ParentID": null,
    "UnitPrice": 10,"QuantityPerUnit": "12 - 550 ml bottles",
    "UnitsInStock": 13,"UnitsOnOrder": 70},{"ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning","ParentID": 1,                                                                                                                               "UnitPrice": 22,"QuantityPerUnit": "48 - 6 oz jars","UnitsInStock": 53,
     "UnitsOnOrder": 0},{"ProductID": 5,
     "ProductName": "Chef Anton's Gumbo Mix","ParentID": 2,
     "UnitPrice": 21.35,"QuantityPerUnit": "36 boxes","UnitsInStock": 0,
     "UnitsOnOrder": 0},{"ProductID": 6,
     "ProductName": "Grandma's  Boysenberry Spread","ParentID": 1,
     "UnitPrice": 25,"QuantityPerUnit": "12 - 8 oz jars",
     "UnitsInStock": 120,"UnitsOnOrder": 0},{"ProductID": 7,
     "ProductName": "Uncle Bob's Organic Dried Pears",
     "ParentID": 5,"UnitPrice": 30,"QuantityPerUnit": "12 - 1 lb pkgs.",
     "UnitsInStock": 15,"UnitsOnOrder": 0},{"ProductID": 8,
     "ProductName": "Northwoods Cranberry Sauce","ParentID": 6,
     "UnitPrice": 40,"QuantityPerUnit": "12 - 12 oz jars",
     "UnitsInStock": 6,"UnitsOnOrder": 0},{"ProductID": 9,
     "ProductName": "Mishi Kobe Niku","ParentID": 3,
     "UnitPrice": 97,"QuantityPerUnit": "18 - 500 g pkgs.",
     "UnitsInStock": 29,"UnitsOnOrder": 0},{"ProductID": 10,
     "ProductName": "Ikura","ParentID": 1,"UnitPrice": 31,
     "QuantityPerUnit": "12 - 200 ml jars","UnitsInStock": 31,
     "UnitsOnOrder": 0}];

    var dataSource = new kendo.data.TreeListDataSource({
        data: products,
        schema: {
            model: {
            id: "ProductID",
            parentId: "ParentID",
            fields: {
            ProductID: { type: "number", editable: false, nullable: false },
            ParentID: { type: "number", nullable: true },
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            UnitsOnOrder: { type: "number" },
            QuantityPerUnit: { type: "string" }
            }
        }

        }
    });
    $(document).ready(function () {


        // Create the TreeList
        $("#products").kendoTreeList({
        // Declare the TreeList columns
        columns: [

            { field: "ProductName", title: "Name" },
            { field: "UnitPrice", title: "Price" }
        ],
        // Bind the TreeList to the dataSource
        dataSource: dataSource,
        height: 500,
        scrollable:true
        });

        $("#suppliers").kendoTreeList({
            // Declare the TreeList columns
            columns: [
               { field: "QuantityPerUnit", title: "Quantity" },
               { field: "UnitPrice", title: "Unit Price" }
            ],
            // Bind the TreeList to the dataSource
            dataSource: dataSource,
            height: 500,
            scrollable: true
        });

    $("#categories").kendoTreeList({
        // Declare the TreeList columns
        columns: [

            { field: "UnitsInStock", title: "In Stock" },
            { field: "UnitsOnOrder", title: "On Order" }
        ],
        // Bind the TreeList to the dataSource
        dataSource: dataSource,
        height: 500,
        scrollable: true
    });

    var tlProducts = $("#products").data("kendoTreeList");
    var tlSuppliers = $("#suppliers").data("kendoTreeList");
    tlProducts.bind("expand", expandAll);

        function expandAll(e) {
            var index = tlProducts.tbody.find("tr[data-uid='" + e.model.uid + "']")[0].rowIndex;
            var dataItem = tlSuppliers.expand($("#suppliers tbody>tr:eq(" + index + ")"));


        }
    });

Answer 1

For a hacky workaround, put the call to suppliers.expand in a settimeout function. The other list view can't start expanding until the first list view has completed expanding.