Items
The Items configuration options allows you to customize the appearance and behavior of the Form. The Items configuration maps the model fields and through it you can:
- customize the editors
- customize the labels and hints of the editors
- group the editors
Configure Label
The following example shows how to set the Label of an item. Enabling the Optional setting, indicates that the field is optional (not required).
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "Index", method = "POST" })
.Items(items =>
{
items.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
items.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
i.Add()
.Field(f => f.DateOfBirth)
.Label(l => l.Text("Date of Birth:").Optional(true));
})
)Default Value for Label and Title
It is possible to set the (Name Data Annotation)[https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-7.0] of the Field directly in the Model and then it will be automatically set in the Form as the default Label and Title of the Item:
[Display(Name = "User Name")]
public string FirstName { get; set; } Configure Hint
The following example shows how to set the Hint of an item. The hint is displayed below the editor of the field.
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "Index", method = "POST" })
.Items(items =>
{
items.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
items.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
items.Add()
.Field(f => f.Password)
.Label(l => l.Text("Password:"))
.Hint("Hint: enter alphanumeric characters only.");
})
)Configure Editor
With the Editor option you can explicitly configure an editor to be used for a specific field. See the editor configuration option in the client-side API documentation, for a list of the supported editors.
@(Html.Kendo().Form<MyApplication.Models.FormItemsViewModels>()
.Name("exampleForm")
.HtmlAttributes(new { action = "Items", method = "POST" })
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.TextBox)
.Label(l => l.Text("TextBox:"));
i.Add()
.Field(f => f.NumericTextBox)
.Label(l => l.Text("NumericTextBox:"))
.Editor(e =>
{
e.NumericTextBox();
});
i.Add()
.Field(f => f.MaskedTextBox)
.Label(l => l.Text("MaskedTextBox:").Optional(true))
.Editor(e =>
{
e.MaskedTextBox();
});
i.Add()
.Field(f => f.DatePicker)
.Label(l => l.Text("DatePicker:").Optional(true));
i.Add()
.Field(f => f.DateTimePicker)
.Label(l => l.Text("DateTimePicker:").Optional(true))
.Editor(e => e.DateTimePicker()
.HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
.DateInput()
);
i.Add()
.Field(f => f.ComboBox)
.Label(l => l.Text("ComboBox:").Optional(true))
.Editor(e =>
{
e.ComboBox()
.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);
});
});
i.Add()
.Field(f => f.Switch)
.Label(l => l.Text("Switch:"))
.Editor(e =>
{
e.Switch()
.Messages(c => c.Checked("YES").Unchecked("NO"));
});;
});
})
)Use a ComboBox data callback
The Field configuration defines the name of the Form item. When you configure the item with .Field(f => f.ComboBox) and do not set an explicit item ID, the Form uses ComboBox as the editor ID. The #ComboBox jQuery selector therefore targets the ComboBox editor rendered for that Form field. It does not refer to the displayed text, the selected value, or the DataTextField() or DataValueField() configuration.
Use the Data() configuration to pass a JavaScript function that returns additional request data. For example, the following function uses the built-in kendo.ui.ComboBox.requestData helper to send the text entered in the ComboBox:
function filterProducts() {
return kendo.ui.ComboBox.requestData($("#ComboBox"));
}The returned data has the following shape:
{ text: "current filter text" }The parameter names returned by a custom data function must match the parameters expected by the server action. For example, use a custom object when the action expects a different parameter:
function filterProducts() {
return {
categoryId: $("#Category").val()
};
}Custom Editor
You can implement custom editor by using the editor option as a function as follows:
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "Index", method = "POST" })
.Items(items =>
{
items.Add()
.Field(f => f.Description)
.Label(l => l.Text("Description:"))
.EditorTemplateHandler("customTextareaEditor");
})
)
<script>
function customTextareaEditor(container, options) {
$('<textarea class="k-textarea" data-bind="value: ' + options.field + '" name="' + options.field + '"/>')
.appendTo(container);
}
</script>