Cascading dropdownlists disable when empty

4 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Jan 2015

    Posted 14 Aug 2015 Link to this post

    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.

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 18 Oct 2015 in reply to Boyan Dimitrov Link to this post

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

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Oct 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready