Unable to set values if Virtual = true

[Fred]

Here's how I set up the Multiselect

@(Html.Kendo().MultiSelect()
    .Name("mslClientCode")
    .Placeholder("Select Clients...")
    .DataTextField("Client6Digit")
    .DataValueField("ClientId")
    .Virtual(true)
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read =>
        {
           read.Action("GetClientList", "Controller");
        })
       .ServerFiltering(false);
    })
)

 

I also so have some codes to auto select when user hit tabs key

var selectItem = function (ms) {
    var dataItem = ms.dataSource.view()[0];
    var value = ms.value();
    if (dataItem) {
        value.push(dataItem.ClientId);
        ms.value(value);
    }
}
$("#mslClientCode").data("kendoMultiSelect").input.on("keydown", function (e) {
    if (e.keyCode === 9) {
        selectItem($("#mslClientCode").data("kendoMultiSelect"));
    }
});

 

Due to a large list of data items, virtual is set to true. But it seems like doing so will result in an error "Cannot read property 'item' of undefined" whenever user tabs to autoselect first row in the option list. Not using virtual causes some delay in loading the list.

What should I do?

 

Also is there a better way to format code block? Copy and paste my codes into the "Format Code Block" doesn't indent the codes as I want it to, if not messing it up.

[Dimitar]

Hello Fred,

I am attaching an ASP.NET MVC solution, where the minimum widget and DataSource configuration for the virtualization to work with the MultiSelect is demonstrated.

Data virtualization is achieved by using the DataSource paging functionality for retrieving only specific pages from the dataset. This requires the proper configuration of ServerPaging. In addition to this, to achieve UI virtualization, the item and container heights have to be configured. You can find additional details and examples in the following Virtualization article.

For better formatting of the code block, you can specify the language form the respective select menu in the "Format Code Block" tool.

Regards,
Dimitar
Progress Telerik

[Fred]

Thanks, but I'm still having the issue and I cant figure out why ... And I selected the language while pasting my codes but that didn't fix the indentation issue unless I manually edit line by line.

The sample solution works fine when I added my codes to select first row by tabbing.

 

@(Html.Kendo().MultiSelect()
                .Name("mslClientCode")
                .Placeholder("Select Clients...")
                .DataTextField("Client6Digit")
                .DataValueField("ClientId")
                .AutoBind(false)
                .Filter(FilterType.Contains)
                .Height(520)
                .DataSource(source =>
                {
                    source.Custom()
                       .ServerFiltering(true)
                       .ServerPaging(true)
                       .PageSize(80)
                       .Type("aspnetmvc-ajax")
                       .Transport(transport => {
                           transport.Read("GetClientListVirtual", "RevenueBudgetTool");
                       })
                       .Schema(schema => { schema.Data("Data").Total("Total"); });
                })
                .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
            )

 

$(document).ready(function () {
var selectItem = function (ms) {
                var dataItem = ms.dataSource.view()[0];
                var value = ms.value();
                if (dataItem) {
                    value.push(dataItem.ClientId);
                    ms.value(value);
                }
            }
            $("#mslClientCode").data("kendoMultiSelect").input.on("keydown", function (e) {
                if (e.keyCode === 9) {
                    selectItem($("#mslClientCode").data("kendoMultiSelect"));
                }
            });
});


        function valueMapper(options) {
            $.ajax({
                url: "@Url.Action("Clients_ValueMapper", "RevenueBudgetTool")",
                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;
        }

 

[HttpPost]
        public ActionResult GetClientListVirtual([DataSourceRequest] DataSourceRequest request) {
            return Json(GetClientList().ToDataSourceResult(request));
        }
        List<TinyClient> GetClientList() {
            ClientCRUD crud = new ClientCRUD();
            List<TinyClient> list = crud.GetClient6DigitOnly(CurrentUserName).OrderBy(x => x.Client6Digit).ToList();
            return list;
        }
        public ActionResult Clients_ValueMapper(int[] values) {
            var indices = new List<int>();
            if (values != null && values.Any()) {
                var index = 0;
                foreach (var client in GetClientList()) {
                    if (values.Contains(client.ClientId)) { indices.Add(index); }
                    index += 1;
                }
            }
            return Json(indices, JsonRequestBehavior.AllowGet);
        }

 

s

[Fred]

Basically after the debugger hit ms.value(value);, valueMapper never gets called, and I got the same error "Cannot read property 'item' of undefined"

[Fred]

I even tried pasting the exact same codes (client and controller) to my project but still got the same exact error. The only difference I see is the Kendo.MVC version: mine is 2016.1.412.545 (runtime version: v4.0.30319), and the sample solution is 2017.2.504.545 (runtime version: v4.0.30319). I'm not sure if that causes any issue

[Dimitar]

Hello Fred,

I would suggest to open a separate support thread in the ticketing system. In it, you can provide a sample project, where the described issue can be reproduces. We will then be able to examine it locally and assist you to resolve the case.

Regards,
Dimitar
Progress Telerik

[Fred]

I updated the Kendo.MVC and now it is working. 

Thanks.