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>
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"/>
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.
Hi,
It would be nice to have an OnUpdateDebounce for TelerikForm's OnUpdate.
I am currently using a form to filter information with an API call that is shown in a grid.
It would be nice to reduce the number of calls and with larger data we sometime get an earlier query returned after a later one resulting in showing the results for a search of 'T' instead of 'Tom'
I would like to use manually declared and autogenerated fields together.
I believe this currently exists for the Grid
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; }
}
Virtually all web apps nowadays have support for masked inputs. Not quite sure why Telerik Blazor does not, but requesting it, since I can't really go live without it.
Ideally it should also work using data annotations on the model class using [DataType(DataType.Password)]. This way I don't have to specify the form fields and can just rely on the auto-generated form (like I am doing now). I have a lot of forms that have passwords, so it would be annoying to have to specify the fields for all of them.
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.
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
---
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; }
}
}