MVC MultiSelect / Virtualization error read pagination on filter

4 posts, 0 answers
  1. Cyril
    Cyril avatar
    5 posts
    Member since:
    Jan 2014

    Posted 12 Jul Link to this post

    Hello,

    When values are already selected, the read filter no longer locates on page 1.
    This only happens when values are selected, I get the impression that the read with filter remains on the same page as the read after ValueMapper.

    EditorFor

    @using Newtonsoft.Json;
    @model IEnumerable<int>
    @{
        Layout = ViewBag.Layout ?? "_bootstrap.cshtml";
        ViewData.TemplateInfo.HtmlFieldPrefix = ViewData.TemplateInfo.HtmlFieldPrefix.Replace(ViewData.ModelMetadata.PropertyName, "").Trim('.');
        var propertyName = ViewData["name"] == null ? ViewData.ModelMetadata.PropertyName : ViewData["name"].ToString();
     
        var editorHtmlAttributes = Html.GetUnobtrusiveValidationAttributes(propertyName, ViewData.ModelMetadata);
        var htmlAttributes = ViewBag.HtmlAttributes;
        if (htmlAttributes != null)
        {
            if (htmlAttributes is IDictionary<string, object>)
            {
                editorHtmlAttributes.Merge((IDictionary<string, object>)htmlAttributes);
            }
            else
            {
                editorHtmlAttributes.Merge(new RouteValueDictionary(htmlAttributes));
            }
        }
        editorHtmlAttributes.Merge("class", "form-control");
     
        var populationParams = JsonConvert.SerializeObject(ViewBag.PopulationParams);
    }
     
    @(Html.Kendo().MultiSelect()
            .Name(propertyName)
            .DataTextField("Text")
            .DataValueField("Value")
            .Filter("contains")
            .Value(Model)
            .HtmlAttributes(editorHtmlAttributes)
            .DataSource(source =>
            {
                source.Custom()
                      .ServerFiltering(true)
                      .ServerPaging(true)
                      .PageSize(80)
                      .Type("aspnetmvc-ajax")
                      .Transport(transport =>
                      {
                          transport.Read("_To", "Population", new { area = "Template", populationParams = populationParams });
                      })
                      .Schema(schema =>
                      {
                          schema.Data("Data")
                                .Total("Total");
                      });
            })
            .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper" + propertyName))
            .Events(e =>
            {
                e.DataBound("onDataBound" + propertyName).Change("onDataBound" + propertyName);
            })
    )
    <div id="count-@(propertyName)" class="text-right">
     
    </div>
    <script>
        var cookieIds = "templateemailable-@(propertyName)";
     
        function valueMapper@(propertyName)(options) {
     
            $.cookie(cookieIds, JSON.stringify(options.value), { path: '/' });
     
            $.ajax({
                url: "@Url.Action("_ToValueMapper", "Population", new { area = "Template", populationParams = populationParams })&cookieIds=" + cookieIds,
                type: "GET",
                success: function (data) {
                    options.success(data);
                }
            })
        }
     
        function onDataBound@(propertyName)(e) {
            $("#count-@(propertyName)").html(e.sender.value().length);
        }
    </script>
     
    @Html.ValidationMessage(ViewData.ModelMetadata, new { name = ViewData["name"] })
    @if (!string.IsNullOrEmpty(ViewData.ModelMetadata.Description))
    {
        <p class="help-block">@Html.Raw(ViewData.ModelMetadata.Description.Localize())</p>
    }

     

    Controler

    public virtual ActionResult _To([DataSourceRequest] DataSourceRequest request, string populationParams)
    {
        var result = (new ToDataSource()).GetSelectListItems(null, populationParams);
     
        return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }
    public virtual ActionResult _ToValueMapper(string populationParams, string cookieIds)
    {
        var values = new List<string>();
        if (Request.Cookies[cookieIds] != null)
        {
            values = Server.UrlDecode(Request.Cookies[cookieIds].Value).JsonToObject<IEnumerable<string>>().ToList();
            Request.Cookies[cookieIds].Expires = DateTime.Now.AddDays(-1);
        }
     
        var indices = new List<int>();
     
        if (values != null && values.Any())
        {
            var list = values.ToList();
     
            var source = (new ToDataSource()).GetSelectListItems(null, populationParams);
     
            var index = 0;
            foreach (var item in source)
            {
                if (list.Contains(item.Value))
                {
                    indices.Add(index);
     
                    list.Remove(item.Value);
                    if (!list.Any())
                        return Json(indices, JsonRequestBehavior.AllowGet);
                }
     
                index += 1;
            }
        }
     
        return Json(indices, JsonRequestBehavior.AllowGet);
    }

     

    Thank you for your help

  2. Misho
    Admin
    Misho avatar
    160 posts

    Posted 14 Jul Link to this post

    Hi,

    I've tried to replicate the behavior you are reporting by creating a sample project but no avail.
    Here is a video showing my test: https://www.screencast.com/t/XnjAPHYMh
    Could you please elaborate a bit and modify the attached project as well as provide the reproduction steps so that the issue could be observed ans successfully replicated on our side?

    Thank you in advance.

    Best Regards,
    Misho
    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. Cyril
    Cyril avatar
    5 posts
    Member since:
    Jan 2014

    Posted 17 Jul in reply to Misho Link to this post

    Hello Misho,

    Thank you very much for your very complete answer.

    I added my implementation to your test project, it works correctly. 
    I then looked for the differences between our 2 projects, my project is on version 2016.3.1028 while the test project is on version 2017.2.504. 
    I downgraded the test project to version 2016.3.1028 and refound the bug even on your implementation.
    (I can not provide you the updated project via the forum because of the size limitation, can I transfer it to you by any other means?)

    Updating the version of Kendo can prove to be a heavy workload. Is it possible to run the multiselect virtualization correctly on this version? combobox virtualization works fine.

    Best

  4. Misho
    Admin
    Misho avatar
    160 posts

    Posted 19 Jul Link to this post

    Hello Cyril,

    In general we do not support and recommend applying single fixes to old versions because of the possible impact to other scenarios that are not fully tested. In addition we recommend to use the latest officially released version where the fixes have been passed the whole testing life-cycle as well as include the latest browsers dependencies. That's why I cannot guarantee an easy hotfix to this scenario could be provided. However I encourage you to open a separate support ticket where you could attach your isolated sample and provide the relevant information that is necessary to replicate the problem on our side, so we could investigate whether a workaround could be applied to the scenario.

    Best Regards,
    Misho
    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.
Back to Top