BindTo SelectList then AJAX to repopulate

[Scott]

I have the following RAZOR code:

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

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

and the following jQuery:

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


What I would like to do is initially bind the 2nd dropdownlist to the SelectList in my ViewBag, then bind it from the server if the first dropdown changes value.

The initial BindTo is working fine, but the jQuery .dataSource.read isn't doing anything.  I suspect I need to attach a dataSource to the dropdown in the jQuery somehow, but I'm not sure how.

How do I accomplish this?

[Daniel]

Hello Scott,

You should set a new dataSource configured for remote binding with the setDataSource method in order to achieve this e.g.

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

    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList");
    var url = settings.getAssociatedWithIdsUrl + "?associatedWithType=" + dataItem.Text;
    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url
            }
        }
    });
    associatedWithIdsDropDown.setDataSource(remoteDataSource);
}

Regards,
Daniel
Telerik