How disable input to SfNumericTextBox?

[Alexey Kazakevich]

The element in the basic version has buttons for increasing and decreasing the quantity. I don't understand how to disable entering a value into an element. I use a range of numbers from 0 to 5 and don't want to implement value change event handling.

[Berly Christopher]

Hi Alexey, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by setting the readonly attribute to the input element as mentioned in the below code example, 

  

@using Syncfusion.Blazor.Inputs 

<SfNumericTextBox ID="numeric" TValue="int?" CssClass="custom" @bind-Value="@textvalue"> 

    <NumericTextBoxEvents TValue="int?" Created="OnCreate"></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

@code{ 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    public int? textvalue { get; set; } = 5; 

    public void OnCreate() 

    { 

      JsRuntime.InvokeVoidAsync("OnCreated", "numeric"); 

    } 

} 

<style> 

.custom .e-control.e-numerictextbox.e-input{ 

    pointer-events:none; 

} 

</style> 

window.OnCreated = function (id) { 

    document.getElementById(id).setAttribute("readonly", true); 

     

} 

 

  

For your convenience, we have prepared the sample and attached it below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Readonly_numeric_170580741237793  

  

Regards, 

Berly B.C