Currently, you can split the TelerikForm into multiple columns via the Columns parameter. These columns will have equal widths. I would like to have the ability to define custom width per column.
<AdminEdit>
You can use the following code snippet as a workaround with some considerations:
- The k-grid-cols-2 class is a dynamic one. The "2" segment maps to the number of the columns defined via the Columns parameter exposed for the <TelerikForm>
- If there are more/less than two columns, you should change the values for the grid-template-columns accordingly.
<style>
.non-equal-columns .k-form-layout.k-grid-cols-2 {
grid-template-columns: 71% 28.5%;
}
</style>
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@person" ColumnSpacing="25px" Columns="2" Class="non-equal-columns">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormGroup LabelText="Personal Information" ColumnSpacing="15px">
<FormItem LabelText="First Name" Field="@nameof(Person.FirstName)"></FormItem>
<FormItem LabelText="Last Name" Field="@nameof(Person.LastName)"></FormItem>
<FormItem LabelText="Age" Field="@nameof(Person.Age)"></FormItem>
<FormItem LabelText="Email" Field="@nameof(Person.Email)"></FormItem>
</FormGroup>
<FormGroup LabelText="Employee Information" Columns="2" ColumnSpacing="15px">
<FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
<FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
</FormGroup>
</FormItems>
</TelerikForm>
@code {
public Person person { get; set; } = new Person();
public class Person
{
[Required(ErrorMessage = "The First name is required")]
public string FirstName { get; set; }
[Required(ErrorMessage = "The Last name is required")]
public string LastName { get; set; }
[Range(18, 120, ErrorMessage = "The age should be between 18 and 120")]
public int Age { get; set; }
[Required]
[EmailAddress(ErrorMessage = "Enter a valid email")]
public string Email { get; set; }
[Required]
public string CompanyName { get; set; }
[MaxLength(25, ErrorMessage = "The position can be maximum 25 characters long")]
public string Position { get; set; }
}
}</AdminEdit>
Currently, the input components in Telerik UI for Blazor use JavaScript to set the value, instead of the value parameter. This is done so that features like Placeholder, Format, and others are available.
This comes at the cost of delayed rendering of the preset value of the input components.
There is no AriaDescribedBy parameter on the Upload when it's inside a Form. I'd like to be able to associate some elements to further describe some validation messages/hints, but there is no parameter exposing that.
For reference, the Angular FormField component associates the underlying control and its visible messages by assigning the aria-describedby attribute to the focusable element.
My Nullable DateOnly field shows as 1/1/2001 - I would expect it to be a more sensible default. The problem applies to all autogenerated DatePickers (like the Grid's filter DatePicker and the Form). The same issue is applicable to the TimeOnly struct.
===ADMIN EDIT===
In the interim, as a viable workaround, you can utilize the FormItem Template and declare a TelerikDatePicker like this:
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@PersonModel">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormItem>
<Template>
<label for="country">Date of Birth:</label>
<TelerikDatePicker @bind-Value="@PersonModel.DOB" Width="200px" />
</Template>
</FormItem>
</FormItems>
</TelerikForm>
@code {
private Person PersonModel { get; set; } = new Person() { DOB = null };
public class Person
{
[Display(Name = "Date of Birth")]
public DateOnly? DOB { get; set; }
}
}
Recently a readonly attribute has been added to a number of input fields. This was a great addition. Thank you!
Would it be possible to add this attribute to Telerik Form?
Example:
<FormItem Enabled="false" ReadOnly="true"/>
Currently, when the AutoGenerated form items are used, the data attributes such as Password and Email are ignored. Model sample:
public class LoginModel
{
[Required, EmailAddress, Display(Name = "Email Address")]
public string EmailAddress { get; set; }
[Required, Phone, Display(Name = "Phone Number")]
public string PhoneNumber { get; set; }
}
Would be greate if we could expose ValidateOn to FormItem's. That way we could put:
<FormItem ValidateOn="ValidationEvent.Change" />Rather than needing to specify a template, which feels a little unnecessary. If the datatype for the FormItem uses a field that doesn't use ValidateOn, it can simply be ignored, but for things like strings, numbers etc this would be useful.
Also a top level ValidateOn in the TelerikForm component could be useful, so you can set it once for the form, then maybe override it more granularly.
I would like to change the location of the Form Buttons. Instead of having them at the bottom of the form, I would like them to be at the top of the form.
Please allow customizing of the Form Buttons position.
===========
ADMIN EDIT
===========
If you want to position the Form Buttons on top of the Form you can try the following approach - use FormItemTemplate and place the desired buttons in it. For example:
@using System.ComponentModel.DataAnnotations
<TelerikForm EditContext="@theEditContext" OnValidSubmit="@OnValidSubmitHandler" Width="200px">
<FormItems>
<FormItem>
<Template>
<TelerikButton ButtonType="@ButtonType.Submit" Primary="true">Submit</TelerikButton>
<TelerikButton ButtonType="@ButtonType.Button" OnClick="@ClearButton">Clear</TelerikButton>
</Template>
</FormItem>
<FormItem Field="FirstName"></FormItem>
<FormItem Field="LastName"></FormItem>
<FormItem Field="DOB"></FormItem>
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
@code {
private void ClearButton()
{
person = new Person();
CreatedEditContext(person);
}
void CreatedEditContext(Person model)
{
theEditContext = new EditContext(model);
theEditContext.AddDataAnnotationsValidation();
}
Person person { get; set; } = new Person();
EditContext theEditContext { get; set; }
protected override async Task OnInitializedAsync()
{
person = new Person();
CreatedEditContext(person);
}
async Task OnValidSubmitHandler()
{
Console.WriteLine($"SAVING {person.FirstName} {person.LastName} who was born on {person.DOB}");
}
public class Person
{
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
public DateTime DOB { get; set; }
}
}
Currently, the Form component does not provide indexer support, or binding to an item of collection. For reference of the feature, you could observe the following documentation of the WPF suite:
https://docs.telerik.com/devtools/wpf/controls/radpropertygrid/features/indexer-support