Unable to set values if Virtual = true

7 posts, 1 answers
  1. Fred
    Fred avatar
    9 posts
    Member since:
    Apr 2012

    Posted 22 Aug Link to this post

    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.

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 24 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Fred
    Fred avatar
    9 posts
    Member since:
    Apr 2012

    Posted 28 Aug in reply to Dimitar Link to this post

    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

  4. Fred
    Fred avatar
    9 posts
    Member since:
    Apr 2012

    Posted 28 Aug in reply to Fred Link to this post

    Basically after the debugger hit ms.value(value);, valueMapper never gets called, and I got the same error "Cannot read property 'item' of undefined"
  5. Fred
    Fred avatar
    9 posts
    Member since:
    Apr 2012

    Posted 28 Aug Link to this post

    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
  6. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 30 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Fred
    Fred avatar
    9 posts
    Member since:
    Apr 2012

    Posted 30 Aug in reply to Dimitar Link to this post

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

    Thanks.

Back to Top