The FormItemBuilder exposes an EditorTemplateView method which allows a view to represent the item and provides the entire modal to the view.

As the elements available to forms are limited to those hard coded by Telerik and whilst extension methods can be employed to expand this limitation slightly, the ability to create a context specific view would be ideal

The current implementation looks like this

Html.Kendo().Form<Model>()
    .Items(items =>
    {
        items.AddGroup("Test", 1, 10)
            .Items(i =>
                {
                    i.Add().Field(x => x.Username)
                    i.Add().Field(x => x.Password).EditorTemplateView(Html.Partial("MyView"))
                }
            );
    })

In this example, the entire model is provided into MyView. 

I suggest adding an EditorTemplateFor that uses the lamda expression provided in the Field() method such as

Html.Kendo().Form<Model>()
    .Items(items =>
    {
        items.AddGroup("Test", 1, 10)
            .Items(i =>
                {
                    i.Add().Field(x => x.Username)
                    i.Add().Field(x => x.Password).EditorTemplateViewFor(Html.Partial("MyView"))
                }
            );
    })

### Bug report

When loading an editor through a partial View using EditorTemplateView(await Html.PartialAsync("PartialViewName")), the following error occurs:

The 'await' operator can only be used within an async lambda expression. Consider marking this lambda expression with the 'async' modifier.

### Reproduction of the problem

@(Html.Kendo().Form<UserViewModel>()
     .Name("myForm")
     .Items(items =>
     {
         items.Add().Field(f => f.Username).EditorTemplateView(await Html.PartialAsync("PartialViewName"));
      })
)

### Expected/desired behavior

The EditorTemplateView() must accept Html.PartialAsync("PartialViewName").

### Environment

* **Telerik UI for ASP.NET Core version: 2024.4.1112
* **Browser: [all]

Overview

Expose EditorTemplateId and EditorTemplateView TagHelper attributes in the Form TagHelper.

Current behavior

Currently, the Telerik UI for ASP.NET Core Form TagHelper does not expose EditorTemplateId and EditorTemplateView TagHelper attributes. In comparison to its HTML Helper counterpart:

@(Html.Kendo().Form<FormItemsViewModels>()
    .Name("exampleForm")
    .FormData(Model.Form)
    .HtmlAttributes(new { action = "Items", method = "POST" })
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(vs => vs.Enable(true));
    })
    .Items(items =>
    {
        items.AddGroup()
            .Label("Registration Form")
            .Items(i =>
            {
               i.Add()
                     .Field(f => f.TextBox)
                     .Label(l => l.Text("TextBox:"))
                     .EditorTemplateId("myTemplate");

                i.Add()
                     .Field(f => f.TextBox)
                     .Label(l => l.Text("TextBox:"))
                     .EditorTemplateView(Html.Partial("_ExportCalculationForm", Model.Form));
            });
    })
)

Expected/desired behavior

It would be beneficial if such configurations were to be exposed for the TagHelper Form as well

<kendo-form name="exampleForm"  method="POST" asp-action="Items" form-data="Model.Form">
    <validatable validate-on-blur="true" validation-summary="true" />
    <form-items>
        <form-item type="group">
            <item-label text="Registration Form" />
            <form-items>
                
                <form-item field="TextBox" editor-template-id="myTemplate">
                    <item-label text="TextBox:" />
                </form-item>

                <form-item field="TextBox" editor-template-view='Html.Partial("_ExportCalculationForm", Model.Form)'>
                    <item-label text="TextBox:" />
                </form-item>

            </form-items>
        </form-item>
    </form-items>
</kendo-form>

Environment

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

Bug report

The form is not serialized correctly when declared in the Template component

Reproduction of the problem

1. Open the following Telerik REPL.
2. Notice that the Form component declared in the Template is not serializing its options correctly.

Current behavior

The Form is not serialized correctly when declared in the Template component.

Expected/desired behavior

The Form should be serialized correctly when declared in the Template component.

Environment

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

Overview

Currently, the Telerik UI for ASP.NET Core Form wrappers does not expose an overload for passing Template Component via the ButtonsTemplate API configuration. In comparison to its ASP.NET MVC counterpart. E.g:

** HtmlHelper **
@(Html.Kendo().Form()
        .Name("form")
        .ButtonsTemplate(Html.Kendo().Template().AddHtml("<button>Submit</button>"))
)

** TagHelper **
<kendo-form name="formExample" action="Index" method="POST">
    <buttons-template>
        <kendo-button name="test">
            Some Test
        </kendo-button>
    </buttons-template>
</kendo-form>

It would be beneficial if the configuration accepts a Template Component overload similar to the ButtonsTemplate API in the MVC wrappers.

Current behavior

The Form Core wrappers do not expose a Template component option for the Buttons Template.

Expected/desired behavior

The Form Core wrappers should expose a Template component option for the Buttons Template.

Environment

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

Bug report

Using a UI for ASP.NET MVC/Core Form, if a boolean property is defined as required with the [Required] attribute, and the Hint() option is not defined, the Form does not validate the checkbox.

Reproduction of the problem

Please visit the following Live demo, and submit the form.

Current behavior

The form will submit without validating the checkbox.

Expected/desired behavior

The Required attribute should be evaluated for validation.

Environment

• Kendo UI version: 2023.2.606
• jQuery version: All Supported Versions
• Browser: all

Bug report

Form TagHelper does not expose a ValidationSummary tag.

Current behavior

The Form TagHelper's exposes only a validation-summary attribute instead of a validation-summary tag which prevents adding options such as: Container, Enable, Template, and more.

In comparison to the HTML Helper .ValidationSummary() API configuration which allows the following:

        .Validatable(v =>
        {
            v.ValidationSummary(validationSummary => {
                validationSummary.Enable(true);
                validationSummary.TemplateId("someTemplate");
                validationSummary.Container("myContainer");
            });
        })

Expected/desired behavior

It would be a good idea to consider altering the current validation-summary attribute into a standalone tag helper. However, this will inevitably lead to a breaking change.

Environment

• Kendo UI version: 2023.2.829
• jQuery version: x.y
• Browser: [all]

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.