Ajax Binding
The AutoComplete provides support for remote data binding by using a DataSource
configuration object. You can configure the AutoComplete to get its data from a remote source by making an AJAX request.
-
Create an action that returns the data as a JSON result.
public IActionResult Index() { return View(new ProductViewModel { ProductID = 4, ProductName = "ProductName4" }); } public JsonResult GetProductsAjax() { var products = Enumerable.Range(0, 500).Select(i => new ProductViewModel { ProductID = i, ProductName = "ProductName" + i }); return Json(products); }
-
Add the AutoComplete to the view and configure its DataSource to use remote data.
@model MvcApplication1.Models.ProductViewModel @(Html.Kendo().AutoCompleteFor(m => m.ProductName) .Filter("contains") .DataTextField("ProductName") .Placeholder("Select product...") .DataSource(source => { source.Read(read => { read.Action("GetProductsAjax", "Home"); }) .ServerFiltering(false); }) )