Model Binding

You can implement model binding in the MultiSelect with both local data and remote data.

The Value() setting takes precedence over the values of the Selected property in cases where a SelectListItem is:

• Passed as a collection through the BindTo() configuration method.
• Has the value set either from the MultiSelectFor HtmlHelper or the Value() configuration method.

Local Data

Local data is the data that is available on the client when the MultiSelect is initialized.

1. Pass the data to the view through the view model.

   Razor

    public ActionResult Index()
    {
        return View(new ProductViewModel
        {
            Orders = GetOrders(),
            SelectedOrders = new int[] { 1, 3 }
        });
    }
   
    private static List<Order> GetOrders()
    {
        var orders = Enumerable.Range(0, 2000).Select(i => new Order
        {
            OrderID = i,
            OrderName = "OrderName" + i
        });
   
        return orders.ToList();
    }

2. Add the MultiSelect to the view and bind it to a property of the view model.

   Razor

       @model Application1.Models.ProductViewModel
   
       @(Html.Kendo().MultiSelectFor(m => m.SelectedOrders)
           .DataValueField("OrderID")
           .DataTextField("OrderName")
           .BindTo(Model.Orders)
       )

Remote Data

You can configure the MultiSelect to get its data from a remote source by making an AJAX request.

1. Create an action that returns the data as a JSON result.

   Razor

    public ActionResult Index()
    {
        return View(new ProductViewModel
        {
            SelectedOrders = new int[] { 1, 3 }
        });
    }
    
    public JsonResult GetOrdersAjax()
    {
        var orders = Enumerable.Range(0, 2000).Select(i => new Order
        {
            OrderID = i,
            OrderName = "OrderName" + i
        });
   
        return Json(orders.ToList(), JsonRequestBehavior.AllowGet);
    }
    

2. Add the MultiSelect to the view and configure its DataSource to use remote data.

   Razor

       @model Application1.Models.ProductViewModel
   
       @(Html.Kendo().MultiSelectFor(m => m.SelectedOrders)
           .Filter(FilterType.Contains)
           .DataValueField("OrderID")
           .DataTextField("OrderName")
           .DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action("GetOrdersAjax", "Home");
               })
               .ServerFiltering(false);
           })
       )

See Also

• Server-Side API