Blazor Form Items Overview
You can customize the default editors by using instances of the FormItem tag. Those instances should be in the FormItems collection.
In this article:
FormItem Parameters
Each custom editor is expressed through the FormItem tag. You can define a collection of those editors in the FormItems tag that is a child of the TelerikForm tag. You can find some code examples below.
The FormItem tag exposes the following parameters which you can use to customize the editors:
LabelText-string- defines the label for the associated editor. This parameter provides more compact syntax for the<label for="myEditorId">HTML tag.Id-string- maps to theidHTML attribute of the<input>tag.Hint-string- defines a hint for the user on the place of the validation message. If a validation error occurs the hint will be replaced by the corresponding validation message.Enabled-bool- whether the editor is enabled. Defaults totrue. If it is not specifically defined in theFormItemmarkup, it will take its value from the[Editable]data annotation attribute of the item.Field-string- the name of the field in the model that the editor will render for as a string (case-sensitive). You can set its as a plain string (Field="SomeField") or to have .NET extract the field name from the model for flat models (Field=@nameof(MyModelClass.SomeFIeld)). If you are using its Template to provide a custom editor, theFieldparameter is not required.FieldType-string- the data type of theField. This parameter should be provided if the type of the property in the model can not be extracted using reflection, for example it is anobjectand you would like to render aNumericTextBox.ColSpan-int- defines thecolspanattribute. This parameter is applicable when the FormItems are divided in multiple columns in a single group. See the FormGroups article for an example.Class-string- adds a custom CSS class to thek-form-fielddiv tag.Template-RenderFragment- allows you to change the default editor altogether. For more information see the Template article.
Example
How to use and configure FormItem instances
@* Provide a hint and change the Label of the editors *@
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Person.Id)" Enabled="false" LabelText="Id"></FormItem>
<FormItem Field="@nameof(Person.FirstName)" LabelText="First name" Hint="Enter your first name"></FormItem>
<FormItem Field="@nameof(Person.LastName)" LabelText="Last name" Hint="Enter your last name" ColSpan="2"></FormItem>
<FormItem Field="@nameof(Person.DOB)" LabelText="Date of birth" Hint="Enter your Date of Birth"></FormItem>
</FormItems>
</TelerikForm>
@code {
public Person person = new Person();
public class Person
{
public int Id { get; set; } = 10;
public string FirstName { get; set; } = "John";
public string LastName { get; set; } = "Doe";
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
}
}
Add Form Fields to Autogenerated Ones
To combine manually defined with autogenerated fields, use an instance of the FormAutoGeneratedItems tag inside the FormItems collection.
Basic configuration of the Hybrid Form.
@* Use the FormAutoGeneratedItems tag inside the FormItems to control the autogenerated fields position. *@
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@person">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Person.Id)" Enabled="false" LabelText="Id"></FormItem>
<FormItem Field="@nameof(Person.FirstName)" LabelText="First name" Hint="Enter your first name"></FormItem>
<FormAutoGeneratedItems></FormAutoGeneratedItems>
</FormItems>
</TelerikForm>
@code {
public Person person = new Person();
public class Person
{
public int Id { get; set; } = 10;
public string FirstName { get; set; } = "John";
public string LastName { get; set; } = "Doe";
public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
}
}