Issue with grouped multi select list when selecting an item

[Jaesoon]

I've found a strange behaviour thats happening when i've got a grouped multi select list (again virtualised as asked in the other thread "Multi select change event not firing") and try to select an item.

 

The grouping function itself seems fine, as i can see the different items are under their respective headers, however when i try to select an item from the drop down list, a completely different item is selected instead of the selected item (most of the time it seems to be reversed, e.g. items 1, 2, 3, 4 showing on grouped list. Select item 1, and item 2 gets selected. Select item 2, item 1 gets selected. Sometimes the correct item is selected).

 

If there is no grouping applied, the selected value is always correct.

[Georgi Krustev]

Hello Jaesoon,

The described behavior is not a known issue and I tried to replicate the problem locally, but to no avail. It seems that the widget selects the proper item on click:

• http://screencast.com/t/5HkbAayCck

Could you send us a repro demo that demonstrates the issue or at least give us a detailed steps list that will help us to replicate the problem locally?

Regards,
Georgi Krustev
Telerik

[Jaesoon]

Hi Georgi,

 

This is how im using the multi select:

@(Html.Kendo().MultiSelectFor(m => m.ItemIds)
      .DataTextField("Description")
      .DataValueField("Id")
      .Filter("contains")
      .Placeholder("Select items...")
      .Events(e => e.Close("onClosed"))
      .DataSource(source =>
      {
          source.Custom()
              .Group(g => g.Add("Category", typeof(string))) ==> There is a property called category which this is grouping on.
              .ServerFiltering(true)
              .ServerPaging(true)
              .PageSize(80)
              .Type("aspnetmvc-ajax")
              .Transport(transport =>
              {
                  transport.Read("GetItems", "Home");
              })
              .Schema(schema =>
              {
                  schema.Data("Data").Total("Total");
              });
      })
      .Virtual(v => v.ItemHeight(26).ValueMapper("itemsValueMapper"))
      .Value(Model.Items)
      )

 

The virtualised list has about 600 items in it with multiple groups. The first group has 2 items in it. When the control is initially loaded, (and the list hasnt been scrolled to load any extra items) try selecting the first item on your list. On my end, it will select the 1st item on the drop down, but show that the 2nd item of that group has been selected. And selecting the 2nd item will will show the 1st item is selected. 

 

It gets tricky when there are more than 2 items in the group. In my case, it seemed completely random, but it seems that the first and last item will definitely have a problem, whereas any items in the middle (of the group) has a chance of selecting the correct item.

 

Another issue i have noticed is while scrolling the list using the mouse wheel, it will jump to the top of the list for no reason at random times. This makes it very frustrating as you think you're scrolling down, but youre always ending up at the top again - until you use your mouse to drag the scrollbar down a bit, then start scrolling with the wheel.

 

I hope you can replicate the issue with the above or find if theres any issue with how im using it.

 

 

Thanks

[Georgi Krustev]

Hello Jaesoon,

Thank you for the additional information. The widget declaration looks absolutely fine and my assumption is that the valueMapper function returns incorrect selected indices.  Is it possible that the selected indices are calculated without considering the grouping? The best way to continue with our investigate is to send us a repro demo. Thus we will be able to review the whole implementation and observe the erroneous behavior locally, which will help us to narrow the problem down much faster.

As to the second issue, we were working on something similar for the Q1 2016 release. Did you have a chance to try the newest official release of Kendo UI (2016.1.112)?

Looking forward to hearing from you.

Regards,
Georgi Krustev
Telerik

[Jaesoon]

Hi Georgi,

 

As your suggestion, I have tried the new Q1 2016 release and it seems to have fixed the second issue (scroll keeps jumping to the top) which is great.

However, the issue with the mis selection of items is still happening.

I'm not sure what the best way would be to send the project for you to test (as i'm using data returned from a controller) but you've mentioned it could be the value mapper that could be causing the problem.

 

I'll post down the javascript codes and controller code for my current implementation - hopefully they will be enough to reproduce on your end. Otherwise i will create a zip file with just the relevant pieces (minus the controller code).

 

The value mapper functions are as follows:

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

 

And the controller side looks like this:

 

[HttpPost]
public ActionResult GetItems([DataSourceRequest] DataSourceRequest request)
{
    var item = GetItemsList();
    if (request.Filters.Any())
    {
        var filterName = request.Filters.FirstOrDefault() as Kendo.Mvc.FilterDescriptor;

        if (filterName != null)
        {
            var itemName = filterName.ConvertedValue.ToString().ToLowerInvariant();

            item = item.Where(n => n.Description.ToLowerInvariant().Contains(itemName));
        }
    }
    return Json(item.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

// Virtualisation
public ActionResult ItemsValueMapper(int[] values)
{
    var indices = new List<int>();

    if (values != null && values.Any())
    {
        var index = 0;

        foreach (var rc in GetItemsList())
        {
            if (values.Contains(rc.Id))
            {
                indices.Add(index);
            }

            index += 1;
        }
    }

    return Json(indices, JsonRequestBehavior.AllowGet);
}

private static IEnumerable<ItemViewModel> GetItemsList()
{
    using (var db = new Entities())
    {
        var itemsList = db.ItemsObject
            .Select(p => new ItemViewModel()
            {
                Id = p.Id,
                Description = p.Description,
                Category = p.Category,
            });

        return itemsList.ToList();
    }
}

 

This is everything that gets used by the Multi select control.

As for the grouping type, i am grouping on a string type field.

 

I hope this is enough to recreate the scenario.

 

Thanks for your help

[Georgi Krustev]

Hello Jaesoon,

Thank you for the additional code snippets. I reviewed the valueMapper implementation and it seems that it does not take into consideration the grouped source. In this case, the calculated index, will be based on the flat data, but the grouped source has different indices.

What you need to do is to group the source before calculate the value index. Basically, you need to ensure that the data structure matches the one that widget uses when value -> index calculation is done.

If you are still experiencing any difficulties with the virtualization implementation, then I will ask you to send us a repro demo. Thus we will see the whole implementation, pinpoint the cause and provide a workaround/tweak much faster.

Regards,
Georgi Krustev
Telerik

[Jaesoon]

Hi Georgi,

 

Thanks for the update, would you be able to show me a sample of grouping being done?

 

I have checked my data source's (on the transport.read method) DataSourceRequest but i cant see any item in the "Groups" list. (it shows i have filters added when i start typing but nothing for groups).

 

Is this where i'm meant to be grouping my data list (in the controller) before returning the collection?

 

 

Thanks

[Alexander Popov]

Hello,

Since a custom DataSource is used, the grouping operations are performed on the client-side by default. Setting the ServerGrouping option to true should give you grouped data. For example: 

source.Custom()
    .Group(g => g.Add("Category", typeof(string))) // ==> There is a property called category which this is grouping on.
    .ServerGrouping(true)
    ...

As Georgi mentioned, sharing a runnable sample project where the issue is isolated would really help us get the entire picture and suggest a suitable approach or a workaround.

Regards,
Alexander Popov
Telerik