Cascading dropdownlists disable when empty

[Software]

Lets say I have three dropdown lists that are cascading. The way my data works, sometimes when you select something ​dropdown #2, the​n dropdown#3 will not have any items in it, because none of them match the value in dropdown #2.

Is it possible to make it so that the third list remains disabled if there are no items in it after selecting from the second list? Right now it becomes enabled because dropdown #2 has a selected value, but then when you click on it, it's empty. 

 

I am using AngularJS, if this makes any difference.

 

[Boyan Dimitrov]

Hello Richard,

My suggestion would be using the dataBound event of the third DropDownList in order to determine whether it is empty. If so you can disable the DropDownList widget by calling the enable method with false parameter. 

As a side note - to check whether the DropDownList is empty you can call the data method of the DataSource. 

Regards,
Boyan Dimitrov
Telerik

 

 

[Summit Insights]

Using the latest kendo ui, it appears that a cascaded dropdownlist will report incorrect datasource.data() length after being filtered.

Ie if I have this code below, the data length of the cascaded ddl '#scenarios' will always report its original first pass data length rather than it's newly filtered length: So if the filtered length is 0 it will still report 2

 I have tried using the cascade event and the dataBound event, but both report the original length. 

 Is there a way around this?

var ranges = $('#ranges').kendoDropDownList({
    dataTextField: 'SettingName',
    dataValueField: 'SettingName',
    dataSource: {
        type: "json",
        data: [{ "SettingName": "Snack Foods" }, { "SettingName": "Cat Food" }]
    }
}).data('kendoDropDownList');
var scenarios = $('#scenarios').kendoDropDownList({
    dataSource: {
        type: "json",
        data: [{"SettingName":"Snack Foods","ScenarioName":"Test1"},{"SettingName":"Snack Foods","ScenarioName":"Range A"}]
    },
    cascadeFrom: 'ranges',
    dataTextField: 'ScenarioName',
    dataValueField: 'ScenarioName',
    dataBound: function () {
        var ts = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
        //this.dataSource.data().length is always 2 (incorrectly)
        if (!this.dataSource.data().length) {
            ts.disable(ts.tabGroup.children().eq(0));
        } else {
            ts.enable(ts.tabGroup.children().eq(0));
        }
    }
});
$("#tabstrip").kendoTabStrip({
    animation: {
        open: {
            effects: "fadeIn"
        }
    }
});

[Boyan Dimitrov]

Hello Ron,

 

I would like to clarify that there is a difference between Kendo UI DataSource view and data. The view returns the data items which correspond to the current filter configuration. Compare with the data method, which will return data items from all pages, if local data binding and paging are used ( in this case the data method will return all items even if a filter is applied). 

 

So in this case I would suggest to use the view method in order to check length of the current items after filtering is applied to the data source. 

 

Regards,
Boyan Dimitrov
Telerik