We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ValueChanged event sample

Thread ID:

Created:

Updated:

Platform:

Replies:

146811 Aug 21,2019 04:02 AM UTC May 22,2020 08:08 AM UTC Blazor 5
loading
Tags: Numeric Textbox
Erick
Asked On August 21, 2019 04:02 AM UTC

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 [Syncfusion]
Replied On August 21, 2019 09:56 AM UTC

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; } 
} 


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


Regards, 
Gopi G. 


Erick
Replied On August 21, 2019 10:50 AM UTC

Hi Gopi,

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

and your solution works

thx,
erick

Gopi Govindasamy [Syncfusion]
Replied On August 21, 2019 12:38 PM UTC

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
Replied On May 22, 2020 02:24 AM UTC

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 [Syncfusion]
Replied On May 22, 2020 08:08 AM UTC

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.  
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon