Kendo multi select binding is not working

Question

I am using kendo multiselect control for my MVC application where i am trying to bind multiselect but it's not working. Below is my html code:

@(Html.Kendo().MultiSelect()
    .Name("ajaxTags")
    .Placeholder("Select cities...")
    .AutoBind(false)
    .DataTextField("CityName")
    .DataValueField("CityCode")
    .Filter(FilterType.StartsWith) 
    .BindTo(new SelectList("CityCode","CityName")) 
    .DataSource(source =>
     {
        source.Read(read =>
        {
            read.Action("GetCities", "DutyTravel"); 
        });
        source.ServerFiltering(true);                       
     })
     .HtmlAttributes(new { style = "width: 60%;" })
 )

So, here I am using AutoBind(false) so only when the user expands the, then it makes a server call and gets the data.

And, below is my controller code:

public JsonResult GetCities([DataSourceRequest] DataSourceRequest request)
{    
     List<DutyTravelPerDiemMaster> lstCities = null;
     lstCities = (List<DutyTravelPerDiemMaster>)HttpContext.Session["GetPerdiemList"];
     var lstFilteredCity = from d in lstCities
                               select new
                               {
                                   CityCode = d.CityCode,
                                   CityName = d.CityName
                               };


     return Json(lstFilteredCity.ToList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

In this method, I see that all the city codes and city names are populating, but not showing in the multi-select.

Answer 1

You are trying to do Server and Ajax binding together. Assuming you want to do Ajax binding, remove this line:

.BindTo(new SelectList("CityCode","CityName")) 

Answer 2

according to Teleriks Kendo UI demo it is not required to set the bindTo property. take a look at the piece of code which is a copy and paste from their demo section:

@(Html.Kendo().MultiSelect()
      .Name("products")
      .DataTextField("ProductName")
      .DataValueField("ProductID")
      .Placeholder("Select products...")   
      .AutoBind(false)       
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetProducts", "Home");
          })
          .ServerFiltering(true);
      })
)

for further information just go to: http://demos.telerik.com/aspnet-mvc/multiselect/serverfiltering