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.

   Razor

        public IActionResult Index()
        {
            return View(new ProductViewModel
            {
                ProductID = 4,
                ProductName = "ProductName4"
            });
        }
   
        [HttpPost]
        public IActionResult ProductsVirtualization_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetProducts().ToDataSourceResult(request));
        }
   
        public IActionResult 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);
        }
   
        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"))
    )

Razor

   <kendo-autocomplete for="ProductName" style="width:100%"
            dataTextField="ProductName"
            filter="FilterType.Contains">
            <datasource type="DataSourceTagHelperType.Custom" custom-type="aspnetmvc-ajax" page-size="80" server-filtering="true" server-paging="true">
                <schema data="Data" total="Total"></schema>
                <transport>
                    <read url="@Url.Action("ProductsVirtualization_Read", "Home")"/>
                </transport>
            </datasource>
            <virtual item-height="26" value-mapper="valueMapper" />
    </kendo-autocomplete>
    

Html

    <script>
        function valueMapper(options) {
            $.ajax({
                url: "@Url.Action("Products_ValueMapper", "Home")",
                data: convertValues(options.value),
                success: function (data) {
                    options.success(data);
                }
            });
        }

        function convertValues(value) {
            var data = {};

            value = $.isArray(value) ? value : [value];

            for (var idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }

            return data;
        }
    </script>

See Also

• Virtualization by the AutoComplete HtmlHelper for ASP.NET Core (Demo)
• Server-Side API