Completed
Last Updated: 25 Sep 2024 11:05 by ADMIN
Bernd
Created on: 17 Jun 2023 09:01
Category: Form
Type: Feature Request
0
Add a way to convert a formitem to its templated version

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.

4 comments
ADMIN
Dimo
Posted on: 25 Sep 2024 11:05

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.

ADMIN
Svetoslav Dimitrov
Posted on: 03 Jul 2023 07:56

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

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Bernd
Posted on: 26 Jun 2023 10:02
Dear Svetoslav ,
thank you for your reply.

This "template generator" is only needed if I have to customize the form item. Which is very often the case. E.g. using a not supported editor type, needing more detailed access to the input or layout.

If you can't determine the editor type of the form item, just use a textbox. I customize the template anyways. For me it you don't have to put rocket sience intelligence into this generator.

Thinking about it. In most cases I need the masked textbox and an additional text showing the description for the entered value. The mask is used to have the same screen representation as the ERP system uses and the additional text is the name or description of the ERP object (employee, item, workplace, sales org, ...)

If I can solve this without using a template in the form the "template generator" would be obsolete.
ADMIN
Svetoslav Dimitrov
Posted on: 26 Jun 2023 05:49

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

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.