Converting RadzenTextBox to Uppercase

Radzen Studio Blazor Server
1

Is it possible to automatically convert the text to be uppercase when losing focus on a radzentextbox field via code? Or always have the text be uppercase when being input?

2

Hi @dmarsh12,

You can use the Change event of the textbox to convert the property it is bound to upper-case.

<RadzenTextBox @bind-Value=@value Change=@OnChange />

@code {
    string value;

    void OnChange(string value)
    {
        this.value = value.ToUpper();
    }
}
4

Yes, this I can definitely do but I was hoping for a more "generic" way of doing it. I don't want to have to hardcode all of my properties just to be capitalized. Is there any other ways for going about this?

5

No. This is as generic as it gets.

6

Couldn't it have a property in the component to make it easier?

<RadzenTextBox @bind-Value="model.property" MaxLength="70" TextTransform="Uppercase" />

TextTransformEnum.Uppercase
TextTransformEnum.Lowercase
TextTransformEnum.Capitalize

And this property would also affect the component's style in the interface.

Value and style would be affected.

7

the text transform is purely cosmetic whereas I would need it to bind as uppercase

8

Will Radzen have an implementation on the text components to link the value as uppercase?

10

Found a simple way:

Just add "oninput="this.value=this.value.toUpperCase()" to your control.

Example:
"<RadzenTextBox oninput="this.value=this.value.toUpperCase()" @bind-Value="data.SkuVariantCodePrefix" @bind-MaxLength="_skuVariantMaxSizeCategory" Name="SkuVariantCodePrefix" />"

2 Likes