Kendo MVC how do I re-populate a dropdownlist using AJAX after initial SelectList?

Question

I have a Kendo dropdownlist control that I populate via a SelectList on the initial load of the page.

@(Html.Kendo().DropDownListFor(m => m.AssociatedWithType)
    .Events(x => x.Select("CR.TodoAddEditDialog.AssociatedWithSelected"))
    .Value(ViewBag.AssociatedWithTypesId)
    .BindTo(ViewBag.AssociatedWithTypesSelectList)
)

@(Html.Kendo().DropDownListFor(m => m.AssociatedWithId)
   .BindTo(ViewBag.AssociatedWithIdsSelectList)
)

This all works great, but I need to re-load the data when the first dropdown changes value. I have the following javascript:

AssociatedWithSelected: function(e) {
    var dataItem = this.dataItem(e.item.index());

    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList"); 
    var url = settings.getAssociatedWithIdsUrl + "?associatedWithType=" + dataItem.Text;
    associatedWithIdsDropDown.dataSource.read({
        url: url
    });
}

However, nothing is being called.

I suspect it's because I've never defined a dataSource in the dropdownlist, but I don't know how to define one in the MVC portion without using it to initially populate the list.

Any ideas?

Answer 1

I ended up doing this, which seems to work. There is probably a better way using the Kendo binding, but I still haven't figured out how.

AssociatedWithSelected: function(e) {
    var dataItem = this.dataItem(e.item.index());

    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList");

    var url = settings.getAssociatedWithIdsUrl + "?associationType=" + dataItem.Text;
    $.ajax({
        url: url
    })
    .done(function (response) {
        associatedWithIdsDropDown.dataSource.data(response);
    });
}