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:
<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.
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
---