How do I select the length of a kendoDropDownList

Question

I have 2 kendo dropdowns Status and SubStatus. SubStatus gets populated based on what was selected for Status. I want to add the functionality that in case when the SubStatus Datasource returns only 1 subStatus, that sub-status should be selected by default. The current functionality selects a blank no matter how many subStatuses are in SubStatus dropdown. I was going to implement this by having adding a function called setDefaultSubStatus in change event. Below is the code:

var Status = $("#Status").kendoDropDownList({
        dataTextField: "DisplayValue",
        dataValueField: "Id",
        valuePrimitive: true,
        optionLabel: " ",
        autoBind: false,
        dataSource: intakeView.viewModel.StatusDataSource,
        change: function (e) {

            intakeView.viewModel.SubStatusesDataSource.read();
            setDefaultSubStatus();

        }

    });


function setDefaultSubStatus() {
        var dropDown = $("#appointmentSubStatus").data("kendoDropDownList");
        var len = dropDown.dataSource.data().length;
        alert(len);

//Not complete and need help here.

    };

How I plan on implementing this: I was going to implement this by checking the length of the dropdown by the above statement. If the length = 1 , then I should do something like : $("#appointmentSubStatus").data('kendoDropDownList').value(1). Is there any better way ?

My issue: For some reason the value of len is coming up as what it was before changing. So lets say on pageload there was 1 substatus in the dropdown. When I change the Status where there are 6 substatus it would show len's value as 1. And when I switch to a status which has only 2 substatus it would show len's value as 6. always picking up the previous value. Any idea why this would be happening ? Thanks a lot for you help! :)

Answer 1

You can use the dataBound event on the SubStatus dropdown: http://docs.telerik.com/KENDO-UI/api/javascript/ui/dropdownlist#events-dataBound

This event is triggered when a new datasource is bound to the dropdown list. At that time you can check the length of the data and then set the value.

dataBound: function(e) {
  if (e.sender.dataSource.data().length == 1){
    var val = e.sender.dataSource.data()[0].Id;
    e.sender.value(val);
  }
}

DEMO