Virtualization

You can configure a ComboBox that is bound to a model field to use virtualization.

The value type to which the ComboBox will be bound on the server can only be 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 ComboBox to the view and configure it to use virtualization.

        @model MvcApplication1.Models.ProductViewModel
    
        @(Html.Kendo().ComboBoxFor(m => m.ProductID)
            .Filter("contains")
            .DataTextField("ProductName")
            .DataValueField("ProductID")
            .Placeholder("Select product...")
            .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>
    
        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
        Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.ProductViewModel>" %>
    
        <%: Html.Kendo().ComboBoxFor(m => m.ProductID)
                .Filter("contains")
                .DataTextField("ProductName")
                .DataValueField("ProductID")
                .Placeholder("Select product...")
                .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>
        %>
    
  3. If the AutoBind option of the ComboBox is set to false and you need the ComboBox to display the model value as selected, set the Text configuration option by passing the field set as DataTextField to the Text option.

    @model MvcApplication1.Models.ProductViewModel

    @(Html.Kendo().ComboBoxFor(m => m.ProductID)
        .AutoBind(false)
        .Text(Model.ProductName)
        .DataTextField("ProductName")
        // Additional configuration.
    )
    <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
    Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.ProductViewModel>" %>

    <%: Html.Kendo().ComboBoxFor(m => m.ProductID)
        .AutoBind(false)
        .Text(Model.ProductName)
        .DataTextField("ProductName")
        // Additional configuration.
    %>

See Also

In this article
Not finding the help you need? Improve this article