ValueChanged event sample

[Erick]

Hi,

Currently i upgraded to Blazor prev8 with Syncfusion Blazor component version 45

my code break in Numeric Textbox where i need to get the value when user change it

any example for it?

thx,

erick

[Gopi Govindasamy]

Hi Erick,  

Greetings from Syncfusion support. 

We have checked your requirement for “get the changes value from numeric textbox”. We suspect that the event name which you used seems incorrect, kindly use ValueChange event instead of ValueChanged event to get changed value.  

We have provided two-way binding for value property, so you can get the value directly when change in numeric textbox. We have prepared sample and code snippet for your reference.  

Change event bind 

 

@using Syncfusion.EJ2.Blazor 

@using Syncfusion.EJ2.Blazor.Inputs 

 

<h4>Numeric TextBox</h4> 

 

<EjsNumericTextBox TValue="int?"> 

    <NumericTextBoxEvents TValue="int?" ValueChange="OnChange"></NumericTextBoxEvents> 

</EjsNumericTextBox> 

 

<div> 

    <h6>ChangeValue: @ChangeValue</h6> 

</div> 

 

@code{ 

 

    public int? ChangeValue { get; set; } 

 

    public void OnChange(ChangeEventArgs args) 

    { 

        this.ChangeValue = (int)args.Value; 

    } 

} 

 

(Or)  Without change event(two-way binding): 

 

<EjsNumericTextBox TValue="int?" @bind-Value="@ChangeValue"></EjsNumericTextBox> 

 

 

<div> 

    <h6>ChangeValue: @ChangeValue</h6> 

</div> 

 

@code{ 

 

    public int? ChangeValue { get; set; } 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/146811/ze/BlazorApp12125547676  

To know more about Numeric TextBox component, please refer the below documentation link  

https://ej2.syncfusion.com/blazor/documentation/numerictextbox/data-binding/?no-cache=1#two-way-data-binding 

Regards, 

Gopi G. 

[Erick]

Hi Gopi,

Yes...you have "Events" now in every components..

and your solution works

thx,

erick

[Gopi Govindasamy]

Hi Erick, 

Thanks for your update.  

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 

Regards, 

Gopi G. 

[john]

I am super ready to throw down $1000 for this library, but as a dev with over 10 years of experience. Blazor is ridiculously esoteric to learn, and trying to accomplish what I need even with Syncfusion doesn't seem to be possible.

All I want to be able to do is use a TextBox and be able to retrieve the value of it when it changes. Telerik seems to be the only vendor that supports it https://docs.telerik.com/blazor-ui/knowledge-base/value-changed-validation-model but their control library sucks. They don't have a masked input.

This does not work <SfTextBox  ValueChange="model.OnZipCodeTextBoxChanged"></SfTextBox>

[Sureshkumar P]

Hi john, 

 

Thanks for your update.  

 

Based on your shared information, we suspect that you cannot get the component value in change event. We can get the value from argument as like below screen shot.  

 

Kindly check the code example. 

<SfTextBox ID="login" ValueChange="ChangeMethod" /> 

 

@code{ 

    public void ChangeMethod(ChangedEventArgs args) 

    { 

        Console.WriteLine(args.Value); 

    } 

 

} 

 

 

Please find the screen shot. 

 

 

We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox-1926295713  

 

Also, We suspect that you want to change the textbox component border color based on editform validation. We suggest displaying the TextBox component with border based on the error and success validation, we can achieve it by using CssClass property as mentioned in the below code example. 

 

@page "/" 

 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.Buttons 

@using System.ComponentModel.DataAnnotations; 

 

<div class="row"> 

    <div style="width:100%;margin:20px;"> 

        <EditForm EditContext="@editContext"> 

            <DataAnnotationsValidator /> 

            <div class="form-group"> 

 

                <SfTextBox Placeholder="Test Property" FloatLabelType='@FloatLabelType.Always' @bind-Value="model.TestProperty" CssClass="@cssClass" Blur="TestPropertyBlurEvent"></SfTextBox> 

                <ValidationMessage For="() => model.TestProperty" /> 

            </div> 

            <SfButton IsPrimary="true" HtmlAttributes="@(new Dictionary<string, object> { { "type", "submit" } })">Save</SfButton> 

        </EditForm> 

    </div> 

</div> 

@code{ 

    private void click() 

    { 

        cssClass = "cssclasschag"; 

    } 

    private Test model; 

    private EditContext editContext; 

    private string cssClass { get; set; } 

    protected override void OnInitialized() 

    { 

        model = new Test(); 

        editContext = new EditContext(model); 

    } 

    public class Test 

    { 

        [Required] 

        public string TestProperty { get; set; } 

    } 

    public void TestPropertyBlurEvent(FocusOutEventArgs args) 

    { 

        if (!editContext.Validate()) 

        { 

            cssClass = "e-error"; 

        } 

        else 

        { 

            cssClass = "e-success"; 

        } 

        StateHasChanged(); 

    } 

} 

Also, we have logged this as our feature request. We will include this feature any one of our upcoming release. We appreciate your patience until then. 

 

You can track the status of the requested requirement from the below feedback link.  

https://www.syncfusion.com/feedback/13085  

 

If we misunderstood your requirement. please revert us with detailed description about your requirement with image or video representation. That will help us to provide exact solution as earlier as possible.  

 

Regards, 

Sureshkumar P