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 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>

   JS

   <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