When I assign an Id to a FormGroup in TelerikForm, it's value can be seen in code, but neither the attribute nor it's value get rendered.
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; }
}
}
I often have the scenario where I need to switch from the autogenerated formitem to a templated version. Mostly because I need a different editor
For example:
<FormItem Field="@nameof(KeyValuesViewModel.Workplace)" LabelText="Workplace" EditorType="@FormEditorType.TextBox"/>I create something like this:
<FormItem>
<Template>
<label for="WorkplaceInput">Workplace</label>
<TelerikMaskedTextBox Id="WorkplaceInput" Mask="aa aaaaaa" Enabled=@WorkplaceEnabled OnChange="OnWorkplaceChanged" @ref=@WorkplaceTextBoxRef />
<TelerikValidationMessage For="@(() => KeyValuesViewModel.Workplace)" />
</Template>
</FormItem>
It would speed up things if I just could use the "light bulb" and convert it. Instead coding it manually, copy, paste, edit the copied version. Over and over again.
https://docs.telerik.com/blazor-ui/components/form/formitems/formitemstemplate
Render defined Form items inside a FormItemsTemplate Example
Line 22 has @nameof(Person.Id) which generates an error, should be without the @ as shown below.
<TelerikFormItemRenderer Item="@( formItems.First(x => x.Field == nameof(Person.Id)) )" />
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>
Hi,
I came across some unusual behaviour
I wanted to hide the default form submit button so I could put it elsewhere on the page but once I had an empty FormButton element on the page I was unable to print any more
<FormButtons></FormButtons>a solution to my problem was to put an empty span in the element
<FormButtons><span></span></FormButtons>
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.
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; }
}
}
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>
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
---
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.