Kendo dropdownlist does not re-render when datasource is refreshed in MVC application

I have an MVC application with a razon page and 2 kendo dropdownlists. This is the definition of the first dropdownlist:

@(Html.Kendo().DropDownList()
    .Name("TaxYearDropDown")
    .DataTextField("TaxYear")
    .DataValueField("TaxYear")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("CheckListGetTaxYears", "Case")
                .Data("additionalData")
                .Type(HttpVerbs.Post);
        });
    })
    .HtmlAttributes(new { style = "width:100px;" })
    .SelectedIndex(0)
    .Events(e => e
        .Change("onChangeTaxYearDropDown")
    )
)

And this is the javascript function onChangeTaxYearDropDown:

function onChangeTaxYearDropDown(e) {

    $("#SBLDropDown").data("kendoDropDownList").dataSource.read();

}

This is how the second dropdown is defined:

@(Html.Kendo().DropDownList()
    .Name("SBLDropDown")
    .DataTextField("S_B_L")
    .DataValueField("S_B_L")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("CheckListGetSBL", "Case")
                .Data("additionalDataSBLDropDown")
                .Type(HttpVerbs.Post);
        })
        .ServerFiltering(true);
    })
    .SelectedIndex(0)
    .Events(e => e
        .Change("onChangeSBLDropDown")
    )
)

And this is the code in the javascript function onChangeSBLDropDown:

function onChangeSBLDropDown() {

    var FileNum = "@Model.FileNum";
    var Suffix = "@Model.Suffix";

    var TaxYear = $('#TaxYearDropDown').data("kendoDropDownList").value();
    var SBL = $('#SBLDropDown').data("kendoDropDownList").value();

    if (SBL != " ") {
        var obj = {
            FileNum: FileNum,
            Suffix: Suffix,
            TaxYear: TaxYear,
            SBL: SBL
        }

        $.ajax(
        {
            type: "POST", //HTTP POST Method
            url: "/Case/GetCheckList", // Controller/Action
            data: JSON.stringify(obj),
            traditional: false,
            cache: false,
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                LoadCheckList(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Error retrieving checklist "); alert("Error: " + errorThrown);
            }
        });
    }

}

When the page is first loaded, this is what the dropdowns look like:

And when I click the arrow on the S/B/L dropdown, this is what I see:

This is all correct, and if I click on the 1/24/1-20 option, that value becomes the selected value and that value is passed to the controller to retrieve additional data.

When I click on the 1/24/1-20 option, this is what the dropdowns look like:

As you can see, there is data populating the date fields. This is all correct.

The issue I am having is when I select a new value from the TaxYear dropdown, I expect the S/B/L dropdown to show with the first item selected, which is "Select an S/B/L". Instead, it is showing "1/24/1-20" as the selected value.

I know the controller is being called to refresh the sbl dropdown datasource because I have a breakpoint set in the controller. I then trace the code and have verified that the list is being returned to the view.

The only thing that I can think of would be that the kendo dropdownlist looks at the current datasource and then it looks at the new datasource and if they are the same (which is possible in my case) the dropdown list does not get re-rendered.

Is this how the kendo dropdownlist works and if so, can I for the dropdown to redraw somehow?

Any suggestions are greatly appreciated.

The datasource should be updated with the new data, which you can confirm my dropping it down. What won't have changed is the selected item. If the item previously selected is still in the new datasource then nothing will change. If the item is no longer in the datasource I expect it will go blank.

What you need to do is put the dropdown selection back to index zero after the updated datasource has been applied. The easiest way I can think of is to add a handler for the dataBound event which fires when the dropdown list has read the datasource and bound it to its view:

.DataBound("onDataBoundSBLDropDown")

In that handler you can use the select() method to set it to index 0:

function onDataBoundSBLDropDown() {
    $("#SBLDropDown").data("kendoDropDownList").select(0);
    onChangeSBLDropDown();
}

Note that the select() method does not trigger the change event which is why I added a call to onChangeSBLDropDown() in that function above.

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/select

A side effect of this is going to be a call to your onChangeSBLDropDown() when it renders for the first time. It is therefore possible that this line will fail if TaxYearDropDown is still instantiating:

var TaxYear = $('#TaxYearDropDown').data("kendoDropDownList").value();

I shall leave that to you to resolve if it happens. Either cater for it in the onChangeSBLDropDown() function or perhaps use a boolean variable to not call it from onDataBoundSBLDropDown() the first time that event occurs. For example:

firstTime = true;
function onDataBoundSBLDropDown() {
    $("#SBLDropDown").data("kendoDropDownList").select(0);
    if (firstTime) {
        firstTime = false;
    } else {
        onChangeSBLDropDown();
    }
}