Virtualization

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

If the AutoBind option of the MultiSelect is set to false, the MultiSelect will not be able to display the preselected items until it is focused.

  1. Create the Read and ValueMapper actions.

    public ActionResult Index()
    {
        return View(new ProductViewModel
        {
            SelectedOrders = new int[] { 1, 3 }
        });
    }
    
    [HttpPost]
    public ActionResult OrdersVirtualization_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(GetOrders().ToDataSourceResult(request));
    }
    
    public ActionResult Orders_ValueMapper(int[] values)
    {
        var indices = new List<int>();
    
        if (values != null && values.Any())
        {
            var index = 0;
    
            foreach (var order in GetOrders())
            {
                if (values.Contains(order.OrderID))
                {
                    indices.Add(index);
                }
    
                index += 1;
            }
        }
    
        return Json(indices, JsonRequestBehavior.AllowGet);
    }
    
    private static List<Order> GetOrders()
    {
        var orders = Enumerable.Range(0, 2000).Select(i => new Order
        {
            OrderID = i,
            OrderName = "OrderName" + i
        });
    
        return orders.ToList();
    }
    
  2. Add the MultiSelect to the view and configure it to use virtualization.

        @model MvcApplication1.Models.ProductViewModel
    
        @(Html.Kendo().MultiSelectFor(m => m.SelectedOrders)
            .Filter("contains")
            .DataValueField("OrderID")
            .DataTextField("OrderName")
            .DataSource(source =>
            {
                source.Custom()
                    .ServerFiltering(true)
                    .ServerPaging(true)
                    .PageSize(80)
                    .Type("aspnetmvc-ajax")
                    .Transport(transport =>
                    {
                        transport.Read("OrdersVirtualization_Read", "Home");
                    })
                    .Schema(schema =>
                    {
                        schema.Data("Data")
                                .Total("Total");
                    });
            })
            .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
        )
    
        <script>
            function valueMapper(options) {
                $.ajax({
                    url: "@Url.Action("Orders_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().MultiSelectFor(m => m.SelectedOrders)
                .Filter("contains")
                .DataValueField("OrderID")
                .DataTextField("OrderName")
                .DataSource(source =>
                {
                    source.Custom()
                        .ServerFiltering(true)
                        .ServerPaging(true)
                        .PageSize(80)
                        .Type("aspnetmvc-ajax")
                        .Transport(transport =>
                        {
                            transport.Read("OrdersVirtualization_Read", "Home");
                        })
                        .Schema(schema =>
                        {
                            schema.Data("Data")
                                    .Total("Total");
                        });
                })
                .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
            )
    
            <script>
                function valueMapper(options) {
                    $.ajax({
                        url: "@Url.Action("Orders_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

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