New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.

  1. 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);
  2. Add the AutoComplete to the view and configure its DataSource to use remote data.

    @model MvcApplication1.Models.ProductViewModel

    @(Html.Kendo().AutoCompleteFor(m => m.ProductName)
        .Placeholder("Select product...")
        .DataSource(source =>
            source.Read(read =>
                read.Action("GetProductsAjax", "Home");
    <kendo-autocomplete for="products" style="width:100%"
            placeholder="Select product..."
            <datasource type="DataSourceTagHelperType.Custom" server-filtering="false">
                    <read url="@Url.Action("GetProductsAjax", "Home")" />

See Also

In this article