This is a migrated thread and some comments may be shown as answers.

Cascading dropdownlists disable when empty

3 Answers 591 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Software
Top achievements
Rank 1
Software asked on 14 Aug 2015, 10:33 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 18 Aug 2015, 02:29 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Summit Insights
Top achievements
Rank 1
answered on 19 Oct 2015, 12:38 AM

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"
        }
    }
});

0
Boyan Dimitrov
Telerik team
answered on 20 Oct 2015, 02:48 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Software
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Summit Insights
Top achievements
Rank 1
Share this question
or