Ajax Binding

The MultiColumnComboBox provides support for remote data binding by using a DataSource configuration object. You can configure the MultiColumnComboBox 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.

   public IActionResult Index()
   {
       return View();
   }
   
   public JsonResult GetProductsAjax()
   {
       var products = Enumerable.Range(0, 500).Select(i => new ProductViewModel
       {
           ProductID = i,
           ProductName = "ProductName" + i
       });
   
       return Json(products);
   }
   

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

       @model MvcApplication1.Models.ProductViewModel
   
       @(Html.Kendo().MultiColumnComboBox()
           .Name("multicolumncombobox")
           .Filter("contains")
           .DataTextField("ProductName")
           .DataValueField("ProductID")
           .Placeholder("Select product...")
           .Columns(columns =>
           {
               columns.Add().Field("ProductName").Title("Product Name").Width("200px")
               columns.Add().Field("ProductID").Title("Product ID").Width("200px");
           })
           .DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action("GetProductsAjax", "Home");
               })
               .ServerFiltering(false);
           })
       )
   

       <kendo-multicolumncombobox name="products" filter="FilterType.Contains"
                           placeholder="Select product"
                           datatextfield="ProductName"
                           datavaluefield="ProductID" >
           <multicolumncombobox-columns>
               <column field="ProductName" title="Name" width="200px">
               </column>
               <column field="ProductID" title="ID" width="200px">
               </column>
           </multicolumncombobox-columns>
           <datasource type="DataSourceTagHelperType.Ajax" server-operation="false">
               <transport>
                   <read url="@Url.Action("GetProductsAjax", "Home")" />
               </transport>
           </datasource>
       </kendo-multicolumncombobox>
   

See Also

• Local Data Binding
• Server-Side API