Telerik Forums
UI for Blazor Forum
1 answer
14 views

I have tried and tried to get a TelerikNumericTextBox aligned right.  Honestly, for a numeric text box, this should just be a property on the component.  Crazy.

Anyway, here is what I've tried and have been through all the forums, etc.

CSS

/* Right-align input in TelerikNumericTextBox for this component */
.p21-numerictextbox-right .k-numerictextbox .k-input-inner {
    text-align: right !important;
}

Markup

<TelerikNumericTextBox @ref="P21NumericTextEditorRef"
                       Class=" p21-numerictextbox-right"
                       @bind-Value="_value"
                       Arrows="false"/>

This does not work.  Any thoughts?

Thank you!

Dimo
Telerik team
 answered on 25 Jun 2025
1 answer
15 views

I have the following setup:

    <TelerikForm Model="@Item"
                 OnUpdate="@UpdateHandler"
                 ColumnSpacing="5px">

    <FormItems>
            <FormItem Field="value">
                <Template>
<TelerikNumericTextBox @bind-Value="@Item.Value"
                                           DebounceDelay="0"
                                           Arrows="false"
                                           ValidateOn="ValidationEvent.Change"/>
                </Template>
            </FormItem>
        </FormItems>
        <FormButtons/>
    </TelerikForm>

The value is a nullable thus the field is empty at first. If I start typing with a leading "-" (minus sign) it will validate (field turn red) and call the update method, which is contrary to what I expect due to the ValidateOn Change setting.

Dimo
Telerik team
 answered on 09 Jun 2025
1 answer
78 views

Hi, my goal is validate a form and focus telerik widget with validation errors.  

 

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

 

Thanks

1 answer
127 views

I am trying to increase the number of decimal places that I can type into a cell using the in-cell editor on my TelerikGrid. It defaults to 2. When I try to use an EditorTemplate to pass a TelerikNumericTextBox component with 4 decimal places defined, it doesn't work. Not sure what I'm doing wrong...

See the code snippet below and the example png of what is generated.


<TelerikGrid Data=@SetupData EditMode="@GridEditMode.Incell" Pageable="true" PageSize="15" Height="500px"
             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@OnCancelHandler" ConfirmDelete AutoGenerateColumns Sortable FilterMenuType="FilterMenuType.Menu">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Setup</GridCommandButton>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        <GridAutoGeneratedColumns ColumnWidth="100px"></GridAutoGeneratedColumns>
        <GridColumn Field="@nameof(WelderSetupsModel.MinHeadGauge)">
           <EditorTemplate>
                @{
                    if(true)
                    {
                        var ctx = context as WelderSetupsModel;
                        <TelerikNumericTextBox @bind-Value="@ctx.MinHeadGauge" Decimals="4" />
                    }
           }
            </EditorTemplate>

        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

Samuel
Top achievements
Rank 1
Iron
 answered on 30 Jul 2024
1 answer
375 views

Hello,
I am trying to check some custom validation when a value is adjusted on a TelerikForm. And I am using
EditContext.OnFieldChanged += HandleFieldChanged;

But the value is still the old value,  it looks like the TelerikInputBase is firing the notification before the change is actually applied.

    private protected void TriggerChange(T value)
    {
      if (this.ValidateOn == ValidationEvent.Change)
        this.CascadedEditContext?.NotifyFieldChanged(this.FieldIdentifier);
      this.OnChange.InvokeAsync((object) value);
    }

Is there a better way to be doing this? 
I do not want to have to add the validation check on every input OnChange.


I have also tried OnFormUpdate with the same issue, this is the function I am using where EditContext still has the old values

protected async Task OnFormUpdate(FormUpdateEventArgs args)
{
    if (!IsUpdating)
    {
        IsUpdating = true;
        DataHasChanged = true;
        var type = args.Model.GetType();
        var property = type.GetProperty(args.FieldName);
        if (property != null)
        {
            if (property.GetCustomAttributes(typeof(SkipMessageCheckAttribute), true).FirstOrDefault() is not SkipMessageCheckAttribute)
            {
                await CheckMessagesAsync();
            }
        }
        IsUpdating = false;
    }
    DataIsValid = !EditContext.GetValidationMessages().Any() && Messages.All(m => m.Priority != PageMessagePriority.Error);
}

Thanks,

Matt

Radko
Telerik team
 answered on 02 Jul 2024
0 answers
81 views

 

I'm looking at the demo for NumericTextBox, when I hold mouse button the number only increments once.

i/ is there any plans for a setting to allow the value to keep incrementing/decrementing when the mouse is held down? This would be more useful in some instances rather than clicking hundreds of times. I know you can type but some users want ability to only use mouse.

ii/ related, is there any plans for a setting to control acceleration of how quickly the value increments/decrements based on how long mouse is held for? Eg if mouse is held longer than say 5 seconds then value changes at faster rate.

Cirrus
Top achievements
Rank 1
 asked on 13 May 2024
1 answer
112 views
We use a NumericTextbox for amounts. The "Format" parameter is set to "###,###,###,###,##0.00". It should now be possible to copy already formatted numeric values (with thousands separator) into the textbox. However, this only accepts unformatted numerical values:

100000 <-- works
100000,23 <-- works 
100,000.23 <-- does not work

Depending on the language/culture, the thousands separator changes (either '.' or ',').
As soon as the number contains a thousands separator, the textbox no longer recognises the value as a number and does not accept the value.

Is there a way to achieve this?
Hristian Stefanov
Telerik team
 answered on 02 Apr 2024
1 answer
347 views

I just updated our .NET 8 Blazor webapp from Telerik 5.0.1 to 5.1.1. Now, interacting with any input in a form applies validation classes to all other inputs in the form.  I hope this behavior is unintentional as it could lead to user confusion. I believe this was introduced in the 5.0.1 update which was supposed to fix the issue of validation classes being present on initial render. I could find no other documentation or discussion regarding this.

This behavior can be seen in the Form - Validation demo...

Blazor Form Demos - Validation | Telerik UI for Blazor

Type valid input in the Graduate Grade field and all other fields turn green even though they don't have valid input...

Clicking Submit to show that those fields are not valid.

Hristian Stefanov
Telerik team
 answered on 25 Mar 2024
2 answers
266 views

Hy,

In my application I had to insert the localization with the default Italian language.

I followed the points explained in this link step by step: Blazor Localization - Telerik UI for Blazor

Inside my application I therefore have a Resources folder with the following files inside:
TelerikMessages.resx and TelerikMessages.it-IT.resx (set as default on Program.cs).

My problem is the following: in debug the localization for the DateTimePicker or NumericTextBox components works correctly showing me the date and number formats in Italian with the related translated texts.

However, once I insert my application into a docker container, the localization seems to have no effect, showing both components in English language and format.

My Resources Folder:

However, localization for the Grid component works correctly in both cases.

Attached is the behavior of the date picker in debug mode and inside a docker container.

Can anyone give me a solution without using the Format property of the components but using localization? My application is in Dotnet 8

Thanks.

Marco
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 11 Mar 2024
1 answer
135 views

We modified the code in the InCell Editing demo (Blazor Components Demos and Examples - Telerik UI for Blazor) with the Telerik REPL tool to include an EditorTemplate for the UnitPrice column. If we type in the column quickly and press tab to exit the field the input is cutoff.  ie; we type 155 and the value shown in the grid after the update is 15.  We have recorded a video showing the problem but we are unable to upload here.  

In our own sample application that we built to isolate the problem we saw the same behavior with TelerikTextBoxes and TelerikNumericTextBoxes.

Is this a known problem with a known solution? 

The code used for the EditorTemplate

        <GridColumn Field=@nameof(ProductDto.UnitPriceDisplayFormat="{0:C}" Title="Unit Price" Width="150px" >

            <EditorTemplate>
            @{
            var item = context as ProductDto;
            if (item != null)
            {
                <TelerikNumericTextBox @bind-Value="@item.UnitPrice"/>
            }
            }
            </EditorTemplate>
        </GridColumn>
Hristian Stefanov
Telerik team
 answered on 05 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?