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.

       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.

    @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"))
    )

    <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 MVC (Demo)
• Server-Side API