Expose EditorTemplateId and EditorTemplateView TagHelper attributes in the Form TagHelper.
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));
});
})
)
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>
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.
The Form Core wrappers do not expose a Template component option for the Buttons Template.
The Form Core wrappers should expose a Template component option for the Buttons Template.
The form is not serialized correctly when declared in the Template component
The Form is not serialized correctly when declared in the Template component.
The Form should be serialized correctly when declared in the Template component.
Form TagHelper does not expose a ValidationSummary tag.
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");
});
})
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.
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.
Please visit the following Live demo, and submit the form.
The form will submit without validating the checkbox.
The Required attribute should be evaluated for validation.
The Form TagHelper does not provide support for hidden fields, similar to the HtmlHelper.
The Form TagHelper does not allow similar built-in configuration:
.Items(i =>
{
i.Add()
.Field(f => f.UserID)
.Editor(editor => editor.Hidden());
})
The Form TagHelper should support hidden inputs.
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>
### 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 => {...});
})
)
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
@(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
JavaScript error should not be thrown.
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.
RadioGroup Validation fails always when Component is bound to Model
All the inputs of the RadioGroup Component get the data-val-required property and validation always fails
The RadioGroup's Validation should succeed, if one of the options is selected
.Items(items => { items.Add() .Field(f => f.Type) .Label(l => l.Text("Type:")) .Editor(e => { e.Upload() } }
Provide built-in integration of RadioButton / RadioGroup in the Form
i.e. : .Editor(e =>Form with MultiSelect editor does not submit selected values in the MultiSelect.