Kendo UI ComboBox 3 Way Cascade Parent Enables Grandchild

Vote count:

0

I have three Kendo ComboBoxes setup to load remote data (non-server filtering) in a pretty standard way. But for some reason, when I select the top parent, both child and grandchild are enabled. The child filters correctly, but the grandchild shows all records. When I select a child, the grandchild then filters correctly.

Then, if I clear the parent, the child and grandchild boxes disable as they should. However, when I select the top parent again everything acts as it should, i.e. only the child is enabled (not the grandchild).

Something strange is happening, but I can't figure out what it is. Any ideas?

Here's the markup:

<input id="replenishmentCustomerEditor" name="CustomerID" required data-kendo-combo-box data-k-options="customerOptions">
<input id="replenishmentLocationEditor" name="LocationID" required data-kendo-combo-box data-k-options="locationOptions">
<input id="replenishmentAssetEditor" name="AssetID" required data-kendo-combo-box data-k-options="assetOptions">

Here's the code:

$scope.customerOptions = {
    optionLabel: " ",
    dataTextField: "Name",
    dataValueField: "CustomerID",
    valuePrimitive: true,
    suggest: true,
    autoBind: false,
    change: function (e) {
        if (!this.value() || this.select() == -1) {
            this.value(null);
            setTimeout(function () { $("#replenishmentLocationEditor").attr('disabled', 'disabled'); }, 10);
            setTimeout(function () { $("#replenishmentAssetEditor").attr('disabled', 'disabled'); }, 10);
        }
    },
    dataSource: { transport: { read: { type: "GET", beforeSend:     gridService.setAuthHeader, url: '/api/Customer/List', cache: false } } }
};

$scope.locationOptions = {
    optionLabel: " ",
    dataTextField: "NameAddress",
    dataValueField: "LocationID",
    cascadeFrom: "replenishmentCustomerEditor",
    cascadeFromField: "CustomerID",
    valuePrimitive: true,
    suggest: true,
    autoBind: false,
    change: function (e) {
        if (!this.value() || this.select() == -1) {
            this.value(null);
            setTimeout(function () { $("#replenishmentAssetEditor").attr('disabled', 'disabled'); }, 10);
        }
    },
    dataSource: { transport: { read: { type: "GET", beforeSend: gridService.setAuthHeader, url: '/api/Location/List', cache: false } } }
};

$scope.assetOptions = {
    optionLabel: " ",
    dataTextField: "Number",
    dataValueField: "AssetID",
    cascadeFrom: "replenishmentLocationEditor",
    cascadeFromField: "LocationID",
    valuePrimitive: true,
    suggest: true,
    autoBind: false,
    change: function (e) {
        if (!this.value() || this.select() == -1) {
            this.value(null);
        }
    },
    dataSource: { transport: { read: { type: "GET", beforeSend: gridService.setAuthHeader, url: '/api/Asset/List', cache: false } } }
};

asked 45 secs ago

Nitro

6

Kendo UI ComboBox 3 Way Cascade Parent Enables Grandchild