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]

Bug report

The Form TagHelper does not provide support for hidden fields, similar to the HtmlHelper.

Reproduction of the problem

The Form TagHelper does not allow similar built-in configuration:

.Items(i =>
            {
            i.Add()
                .Field(f => f.UserID)
                .Editor(editor => editor.Hidden());
            })

Expected/desired behavior

The Form TagHelper should support hidden inputs.

Workaround

Similar result can be achieved by setting the editor-handler attribute, creating a hidden input and setting an empty label:

<form-items>
    <form-item field="UserID" editor-handler="hiddenEditor" >
        <item-label text=" " />
    </form-item>
</form-items>

<script>
    function hiddenEditor(container, options) {
        $('<input type="hidden" data-bind="value: ' + options.field + '" name="' + options.field + '"/>')
            .appendTo(container);
    }
</script>

Environment

• Kendo UI version: 2022.3.913
• Browser: [all]

### Bug report

When the DropDownTree control is added as a Form editor through the Editor() method, there is an ArgumentNullException "Value cannot be null. (Parameter 'key')".

### Reproduction of the problem

Attached is a demo that replicates the issue.

If the DropDownTree is defined outside of the Form, it is bound to the Model property as expected.

### Expected/desired behavior

The DropDownTree editor should bind to the Model property in the Form.

### Environment

* **Kendo UI version: 2022.1.412
* **jQuery version: 1.12.4
* **Browser:** [all]

At moment the Form Group does not support the HtmlAttributes() method. Is it possible to implement?

For example:

@(Html.Kendo().Form<Model>()
  .Name("exampleForm")
  ...
  .Items(items =>
  {
    items.AddGroup()
      .HtmlAttributes(...)
      .Items(i => {...});
  })
)

Add support for hidden fields. There could be an alternative way of adding them to the Items collection, e.g.

.AddHidden()

Consider the cases when the hidden field is bound to a model field and when it isn't bound to the model. The latter could be a scenario involving antiForgeryTokens: 

<input type="hidden" name="__RequestVerificationToken" value="token" />

In both cases you should be able to set the value of the hidden field programmatically and submit it with the form.

The Kendo Form should include native ListBox editor support including joining and swapping items between two ListBox's using ConnectWith.

To use a ListBox in the Kendo Form currently requires a custom editor which is overly complex.

Bug report

RadioGroup Validation fails always when Component is bound to Model

Reproduction of the problem

1. Define a FormViewModel and set its data annotation to [Required]
2. Initialize a Form and pass it the FormViewModel
3. In the Form:

• set up Validation
• define an Item that uses the RadioGroup Editor

4. Run the application choose a RadioGroup option and submit the Form

Current behavior

All the inputs of the RadioGroup Component get the data-val-required property and validation always fails

Expected/desired behavior

The RadioGroup's Validation should succeed, if one of the options is selected

Environment

• Kendo UI version: 2021.1.330
• Browser: [all ]

Provide built-in integration of RadioButton / RadioGroup in the Form

Form with MultiSelect editor does not submit selected values in the MultiSelect.