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)
            .Filter("contains")
            .DataTextField("ProductName")
            .Placeholder("Select product...")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetProductsAjax", "Home");
                })
                .ServerFiltering(false);
            })
        )
    

See Also

In this article
Not finding the help you need? Improve this article