# 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).

```Razor HtmlHelper
    @(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:

```C#
        [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.

```Razor HtmlHelper
    @(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](https://docs.telerik.com/kendo-ui/api/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.

```Razor HtmlHelper
    @(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:

```JavaScript
function filterProducts() {
    return kendo.ui.ComboBox.requestData($("#ComboBox"));
}
```

The returned data has the following shape:

```JavaScript
{ 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:

```JavaScript
function filterProducts() {
    return {
        categoryId: $("#Category").val()
    };
}
```

## Custom Editor

You can implement custom editor by using the editor option as a function as follows:

```Razor HtmlHelper
    @(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>
```

## See Also

* [Items Demo of the Form HtmlHelper for ASP.NET MVC](https://demos.telerik.com/aspnet-mvc/form/items)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/form)