New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Virtualization
You can configure an AutoComplete to use virtualization.
The value to which the AutoComplete will be bound on the server can only be of a primitive type or an enum value.
-
Create the
Read
andValueMapper
actions.C#public ActionResult Index() { return View(new ProductViewModel { ProductID = 4, ProductName = "ProductName4" }); } [HttpPost] public ActionResult ProductsVirtualization_Read([DataSourceRequest] DataSourceRequest request) { return Json(GetProducts().ToDataSourceResult(request)); } public ActionResult Products_ValueMapper(int[] values) { var indices = new List<int>(); if (values != null && values.Any()) { var index = 0; foreach (var product in GetProducts()) { if (values.Contains(product.ProductID)) { indices.Add(index); } index += 1; } } return Json(indices, JsonRequestBehavior.AllowGet); } private static IEnumerable<ProductViewModel> GetProducts() { var products = Enumerable.Range(0, 2000).Select(i => new ProductViewModel { ProductID = i, ProductName = "ProductName" + i }); return products; }
-
Add the AutoComplete to the view and configure it to use virtualization.
Razor@model MvcApplication1.Models.ProductViewModel @(Html.Kendo().AutoCompleteFor(m => m.ProductName) .Filter("contains") .DataTextField("ProductName") .DataSource(source => { source.Custom() .ServerFiltering(true) .ServerPaging(true) .PageSize(80) .Type("aspnetmvc-ajax") .Transport(transport => { transport.Read("ProductsVirtualization_Read", "Home"); }) .Schema(schema => { schema.Data("Data") .Total("Total"); }); }) .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper")) )