New to Telerik UI for ASP.NET MVCStart 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.

  1. Create the Read and ValueMapper 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;
    }
  2. 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"))
    )

See Also

In this article
See Also
Not finding the help you need?
Contact Support