Cannot read properties of undefined (reading 'slice') with Multi Select

[Aaron]

I am having trouble getting the multi select to work in a .NET 5 project. I believe the code below is the relevant portion. This is copied directly from the official Telerik demo with a few modifications, and it works in the official Telerik demo project. The problem is that I can't get this code to work in any other project. It seems to be unable to read the data coming from Virtualization_Read. Since this works fine in the demo project, I am thinking it must be something outside of the code shown below, but I have no idea what it could be.

 

 @(Html.Kendo().MultiSelect()
          .Name("orders")
          .DataTextField("text")
          .DataValueField("value")
          .Placeholder("Select addresses...")
          .Height(450)
          .Filter("contains")
          .DataSource(source =>
          {
              source
                  .Ajax()
                  .PageSize(10)
                  .Read("Virtualization_Read", "Home");
          })
          .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
    )
 public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetOrders().ToDataSourceResult(request));
        }
 private List<SelectListItem> GetOrders()
        {
            var list = new List<SelectListItem>();
            list.Add(new SelectListItem() { Text = "Item 1", Value = "1" });
            list.Add(new SelectListItem() { Text = "Item 2", Value = "2" });

            return list;
        }

[Tsvetomir]

Hi Aaron,

Based on the provided information, I suspect that the response of the server-side might have different format compare to what is expected by the Multiselect. Could you capture the Network request with our Fiddler tool and share it?

https://docs.telerik.com/aspnet-core/integration-with-other-telerik-products/capture-issues-with-fiddler-jam

You could substitute any sensitive data, or you could create the widget with dummy data.

Also, ensure that the JSON serialization format for the application is set to Pascal-case:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

 

Regards,
Tsvetomir
Progress Telerik

[Aaron]

Tsvetomir, thank you for your quick response. I was not able to get to this right away, but just I tried your recommendation to set the JSON serialization to Pascal case and that solved the problem. Thank you for your help!

I am now experiencing another slight issue. The "x" button for each multi-select item is overlapping with the text content. Please see the attached image. Is there any known cause for something like this?

[Tsvetomir]

In general, the width of the items of the multiselect should be dynamic - the items' widths should be wide enough to accommodate both - the text and the delete icon. Is there custom CSS that might be added to the items that set their width in pixels or to a fixed width? It would be helpful if you could share the declaration of the MultiSelect along with any JS/CSS that might be affecting it.