Unplanned
Last Updated: 28 Oct 2021 11:53 by DEV
DEV
Created on: 28 Oct 2021 11:53
Category: Form
Type: Bug Report
0
MultiSelect in Form throws JS error when using jQuery 3.6.0

Bug report

When a Telerik UI for ASP.NET Core MultiSelect is used in a Form, a JS error is thrown:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at S.fn.init.find (jquery.min.js:2)
    at new S.fn.init (jquery.min.js:2)
    at S (jquery.min.js:2)
    at Object.data ((index):24)
    at init.setup (kendo.all.js:6596)
    at init.read (kendo.all.js:6574)

The issue occurs when using jQuery 3.6.0, but is absent with jQuery v 1.12.4

Reproduction of the problem

@(Html.Kendo().Form<FormViewModel>()
        .Name("exampleForm")
        .HtmlAttributes(new { action = "Items", method = "POST" })
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(true));
        })
        .Items(items =>
        {
               items.Add()
                        .Field(f => f.MultiSelect)
                        .Label(l => l.Text("MultiSelect:"))
                        .Editor(e =>
                        {
                            e.MultiSelect()
                                .HtmlAttributes(new { })
                                .Placeholder("Select...")
                                .DataTextField("ProductName")
                                .DataValueField("ProductID")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("Items_GetProducts", "Form");
                                    })
                                    .ServerFiltering(true);
                                });
                        });
             })
    )
    public class FormViewModel
    {
        public List<ProductViewModel> MultiSelect { get; set; }
    }

Runnable sample available in ticket 1540812

Expected/desired behavior

JavaScript error should not be thrown.

Environment

  • Kendo UI version: 2021.3.914
  • jQuery version: 3.6.0
  • Browser: [all]
0 comments