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.
Hello everyone,
This is now possible with a FormItemsTemplate and two <FormItem> tags for the same model property.
<label><TelerikCheckBox @bind-Value="@ShowFirstNameTemplate" /> Show FormItem Template for FirstName</label>
<TelerikForm Model="@Employee"
Width="600px">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
<TelerikValidationSummary />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name" Id="FirstNameNormal"></FormItem>
<FormItem Field="@nameof(Person.FirstName)" Id="FirstNameWithTemplate">
<Template>
First Name with Template
<br />
<div style="padding:.2em;background:yellow">
<TelerikTextBox @bind-Value="@Employee.FirstName" />
</div>
</Template>
</FormItem>
</FormItems>
<FormItemsTemplate Context="formContext">
@{
var formItems = formContext.Items.Cast<IFormItem>().ToList();
}
@if (ShowFirstNameTemplate)
{
<TelerikFormItemRenderer Item="@( formItems.First(x => x.Id == "FirstNameWithTemplate") )" />
}
else
{
<TelerikFormItemRenderer Item="@( formItems.First(x => x.Id == "FirstNameNormal") )" />
}
</FormItemsTemplate>
</TelerikForm>
@code {
private Person Employee = new Person();
private bool ShowFirstNameTemplate { get; set; }
protected override void OnInitialized()
{
Employee = new Person()
{
FirstName = "John",
LastName = "Doe",
BirthDate = DateTime.Today.AddYears(-30)
};
base.OnInitialized();
}
public class Person
{
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public DateTime BirthDate { get; set; } = DateTime.Today;
}
}
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hello Bernd,
If in the general case, you need to modify certain editors to MaskedTextBoxes you can create a reusable template (or a few of these) and pass it to the FormItem's Template parameter. Here is a knowledge-based article that showcases the concept. The sample code is for the Grid, however, the same is applicable to all components that expose customizations through RenderFragments.
Let me know if the knowledge-based article helps you achieve the desired behavior and if you have any further questions.
Regards,
Svetoslav Dimitrov
Progress Telerik
Hello Bernd,
If I understood you correctly, you would like to use Visual Studio Intellisense to change the default editor of a form item. I would like to ask for your feedback on how would you suggest the interface would look. For example, in the provided code snippet you would like to use the MaskTextBox editor, however, VS is not aware of the data types. In case we introduce changing the Editor through Intellisense, in the popup you will see all available editors like NumericTextBox, DateInput, DatePicker, and DateTimePicker. This will make the popup huge.
The solution I can see is that you use the EditorType parameter, available for the FormItem tag. This parameter allows you to change the default editor without the need for a Template.
Regards,
Svetoslav Dimitrov
Progress Telerik