When I updated to the latest version I noticed that the FormItems in AuthorizedViews were moved to the bottom of the form, Quick example:
<TelerikForm>
<FormItems>
<AuthorizeView>
<Authorized>
<FormItem Field="First"/>
</Authorized>
</AuthorizeView>
<FormItem Field="Second"/>
</FormItems>
</TelerikForm>will end up like
<TelerikForm>
<FormItems>
<FormItem Field="Second"/>
<FormItem Field="First"/>
</FormItems>
</TelerikForm>
Here is a TelerikForm with a FormItem (1) for a boolean field. Another FormItem (2) should render, depending on the boolean field (1). This does not work with a TelerikForm, but works with a standard EditForm.
The workaround for a TelerikForm is to use a FormItem Template with a TelerikCheckBox. This is demonstrated below as well.
<EditForm Model="@_data">
<label>Condition 1 (InputCheckbox):</label>
<InputCheckbox @bind-Value="@_data.Value1" />
<br />
@if (_data.Value1)
{
<label>Result 2</label>
<InputCheckbox DisplayName="Result 2:" @bind-Value="@_data.Value2"></InputCheckbox>
}
</EditForm>
<h1>TelerikForm</h1>
<TelerikForm Model="@_data">
<FormItems>
<FormItem LabelText="Condition 1 (FormItem):" Field="@nameof(_data.Value1)"></FormItem>
<FormItem>
<Template>
<label for="x">Condition 1 (TelerikCheckBox):</label>
<br />
<TelerikCheckBox Id="x" @bind-Value="_data.Value1" />
</Template>
</FormItem>
@if (_data.Value1)
{
<FormItem LabelText="Result 2:" Field="@nameof(_data.Value2)"></FormItem>
}
</FormItems>
</TelerikForm>
@code {
private ExampleDto _data { get; set; } = new ExampleDto();
public class ExampleDto
{
public string TextValue { get; set; }
public bool Value1 { get; set; }
public bool Value2 { get; set; }
}
}
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>
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 FormItem Template 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; }
}
}
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"/>
Telerik TextBox for string is nice but what about something like [DataType(DataType.MultilineText)] for TextArea?
Forms should really come with Text Area. It seems like a good one to do next.
Blazor Form Overview | Telerik UI for Blazor
---
ADMIN EDIT
An idea is that perhaps other data type annotations could be used - perhaps Date, DateTime, TIme can switch different date/time pickers, Html can generate the HTML editor, Password can set a textbox with the Password type
---
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; }
}
}
The Validation does not trigger when I load my model from an async method.
<AdminEdit>
A workaround for the time being:
@inject HttpClient http
@using System.ComponentModel.DataAnnotations
<TelerikForm @ref="@EditForm"
Model="@TheCatFactTelerik"
ValidationMessageType="@FormValidationMessageType.None">
<FormValidation>
<ValidationSummary />
</FormValidation>
<FormItems>
<FormItem Field="fact">
</FormItem>
</FormItems>
<FormButtons>
<TelerikButton ButtonType="ButtonType.Submit" Primary="true">Apply</TelerikButton>
</FormButtons>
</TelerikForm>
@code {
public TelerikForm EditForm { get; set; }
public CatFact TheCatFactTelerik = new CatFact();
public EditContext editContext { get; set; }
protected async override Task OnInitializedAsync()
{
TheCatFactTelerik = await http.GetFromJsonAsync<CatFact>("https://catfact.ninja/fact");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
EditForm.EditContext.AddDataAnnotationsValidation();
}
public class CatFact
{
[Required(ErrorMessage = "Required Error Text")]
[MinLength(10, ErrorMessage = "Min Length 10")]
public string fact { get; set; }
public int length { get; set; }
}
}</AdminEdit>
As per the current component configuration, when the EditContext changes, the Form descendants are not disposed and recreated. Thus when the change occurs, you need to explicitly add any validation (be that DataAnnotationsValidation or custom one).
This request serves for indicating research on how the Form behavior could be improved upon changing the EditContext.
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 need a way to use TelerikForms and make it responsive for various display sizes.
Here is what I'm trying to accomplish: I have a TelerikForm with 5 columns. it looks nice horizontally on the screen, but I need it to respond to screen size and start stacking vertically when the screen is shrunk.