change the value when lost focus

[Handi]

Hi Syncfusion support,

What I'm trying to do is to change the value of SfNumericTextBox when lostfocus, how can I do that ?

Below is the example code :

@page "/numerictextboxfeatures"

@using Syncfusion.Blazor.Inputs

<h2>Numeric TextBox</h2>

<br/>

<div id = "ControlRegion">

<div class="control-section">

    <div class="col-lg-12 control-section">

        <div class="content-wrapper">

            <div class="control-label">

                Custom Value (the value will doubled when lost focus)

            </div>

            <SfNumericTextBox @ref="textbox"

                              TValue="decimal" 

                              Format="n0" 

                              EnableRtl="true"

                              @bind-Value="CustomValue"

                              Min="0"

                              Max="9999999999"

                              />

        </div>

    </div>

</div>

</div>

<style>

    .content-wrapper {

        width: 35%;

        margin: 0 auto;

        min-width: 185px;

    }

    .e-float-input.e-numeric.e-input-group {

        margin-top: 40px;

    }

    .control-label {

        padding: 24px 0px 10px 0px;

        font-size: 12px;

    }

</style>

<br/>

<div>

  <h3>Selected Features:</h3>

    <ul class="ulstyle">

      <li class="list"> Numeric TextBox Samples - Custom Format</li>

<li class="list"> Theme - Bootstrap v4</li>

    </ul>

</div>

<br/>

<style>

    .ulstyle {

        margin: 0px;

        padding-left: 20px;

        display: inline-block;

    }

    .list {

    float: left;

    line-height: 20px;

    margin: 10px;

    min-width: 350px;

    }

</style>

@code {

    decimal _customvalue = 0;

    decimal CustomValue { get { return _customvalue; }

        set

        {

            _customvalue = value * 2;

        }

    }

    SfNumericTextBox<decimal> textbox { get; set; }

}

[Sevvandhi Nagulan]

Hi Handi, 

Greetings from Syncfusion support. 

We checked the reported requirement. If you update the value in the component focus out, the change event will be triggered multiple times. Can you please share the exact details and the purpose of the requirement to proceed further? 

Regards, 

Sevvandhi N 

[Handi]

Hi Sevvandhi,

What I'm trying to do is to change / revise what user input to UI :

For example :

1 Box = 24 Pieces

I have 2 textbox, 1 textbox for Boxes and another one for Pieces ... If user input 48 Pieces, the system must be revise to 2 Boxes and 0 Pieces.

Is there anyway to do it properly ?

Thanks.

Regards,

Handi Rusli

[Sevvandhi Nagulan]

Hi Handi, 

 

We can achieve the requested requirement by using the change event, but you cannot update the value when modifying the numeric text box itself. Because it causes the change event to trigger infinite times since change event triggers for every value change. For example, if you enter a value 48 in the second textbox, the corresponding value can be reflected in the first textbox and the value 0 cannot be updated in the second textbox. Refer to the below code, 

 

 

public void onChange1(Syncfusion.Blazor.Inputs.ChangeEventArgs args) 

        { 

            CustomValue1 = CustomValue * 24; 

        } 

        public void onChange2(Syncfusion.Blazor.Inputs.ChangeEventArgs args) 

        { 

            CustomValue = CustomValue1 / 24; 

        } 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2-705128852 

 

             

Regards, 

Sevvandhi N 

 

[Handi]

Hi Sevvandhi,

That's OK, I have workaround for this matter, I'm not change the user input ... but, I create "translation" of user input as a text beside of SfNumericBox.

Thank you anyway.

Regards,

Handi Rusli

[Sevvandhi Nagulan]

Hi Handi, 

 

We are glad to know that the reported issue has been resolved. Please let us know if you need any other further assistance. 

 

 

Regards, 

Sevvandhi N