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

Answer 2

Don't bind the model using viewbag. Heres how you could it from the server.

 @(Html.Kendo().DropDownListFor(x => x.FromOpportunity)
          .Name("OpportunityDDL")                 
          .DataTextField("OpportunityName")              
          .DataValueField("OpportunityId")                         
          .DataSource(source => {
              source.Read(read =>
               {
                   read.Action("GetOpportunityListByAccount", "CrmIntegration")
                      .Data("OnAdditionalData");
               })
                . ServerFiltering(true);
          })             
          .HtmlAttributes( new { style = "margin-left:13px; width: 275px;" })

Controller This is kind've pseudo coded but basically return a Json list

List<OpportunityViewModel> oppVMList = new List<OpportunityViewModel>();
        var oppList = new OrderManager().GetOpportunitiesByAccount(Id); 

        foreach (var op in oppList)
        {
            OpportunityViewModel opvm = new OpportunityViewModel();
            opvm.OpportunityId = op.OpportunityId;
            opvm.OpportunityName = op.OpportunityName;

            oppVMList.Add(opvm);
        }

    return Json(oppVMList , JsonRequestBehavior.AllowGet);

And to refresh the ddl

 var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
        opportunity.dataSource.read({ Id: advertiserId });

your parameter name must be Id

ANy questions just ask :)

Here's my JS function for OnAdditionalData, basically it goes to this function to get the parameter before reading the controller method GetOpportunityListByAccount

function OnAdditionalData() {

    var dataItem = $("#Advertisers").data("kendoMultiSelect").value();

    return {
        //call would not work when expecting a Guid, 
        //now it expects a string            
        Id: "" + dataItem
    };
}

Answer 3

I assume you are looking how to create cascading DropDownList. I would suggest you to use the approach covered here.