1. Home
  2. Forum
  3. Blazor
  4. SfTextBox CssClass not working

SfTextBox CssClass not working

This is very similar to your sample which works when checking a validation rule for each keystroke oninput. Here, I check only after focus is lost. The CssClass properly changes - I can see it show up as rendered text in

tag, but the border does not change to match.

@page "/busted"

CssClass is: @CssClass

Busted

@code {
string _bindingValue = "";
public string bindingValue
{
get { return _bindingValue; }
set
{
if (value.Length < 3)
CssClass = "e-error";
else
CssClass = "e-success";
_bindingValue = value;
StateHasChanged();
}
}
public string CssClass { get; set; } = "e-success";
}

5 Replies
PM Ponmani Murugaiyan Syncfusion Team May 18, 2020 08:46 AM UTC

Hi Eric, 
 
Greeting from Syncfusion support. 
 
We have validated your reported query. We have prepared sample as per your requirement. Please find the code snippet and sample below for reference.  
 
[Index.razor] 
 
<EditForm Model="@User"> 
    <DataAnnotationsValidator /> 
    <div asp-validation-summary="All" class="text-danger"></div> 
    <div class="form-group"> 
        <SfTextBox Placeholder='Enter value' Blur="onBlur" CssClass="@CssClass" @bind-Value="@User.ID"></SfTextBox> 
        <ValidationMessage For="@(() => User.ID)" /> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
</EditForm> 
 
@code { 
    public string CssClass { get; set; } 
 
    public Customer User = new Customer(); 
 
    public class Customer 
    { 
        [Required(ErrorMessage = "Value is required")] 
 
        public string ID { get; set; } 
 
    } 
    public void onBlur(FocusOutEventArgs args) 
    { 
        if (args.Value.Length <= 0) 
        { 
            CssClass = "e-error"; 
        } 
        else 
        { 
            CssClass = "e-success"; 
        } 
        this.StateHasChanged(); 
    } 
} 
 
 
Kindly check with the above sample. If issue still exists in your end, please get back us with issue reproducing sample, we will assists you further. 
 
Regards, 
Ponmani M 


JE Jeremy August 4, 2020 08:17 AM UTC

Hi Syncfusion,

I was about to create a new forum post but this one is very similar.

There is a big difference between your example and the code from the OP - and that is they default the value of CssClass while you do not, ie

public string CssClass { get; set; } = "e-success";

versus

public string CssClass { get; set; } 

What I have found is that if you define a default value for this property, the binding does not work. Now matter how many times I update the property CssClass (using OnInput as per your sample from https://blazor.syncfusion.com/documentation/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value/) the background colour doesnt change.

Why would I want to default the background colour? Because I want the background colour of my text box to be "e-error" when first loaded, and then to be calculated as the user makes changes. 

So I get the same result as the original question ... if you set a value a default for the CssClass property (or even if you do it in the OnInitializedAsync) then no further changes to the bound property are reflected in the text box.

Thanks,
Jeremy

PM Ponmani Murugaiyan Syncfusion Team August 7, 2020 12:42 PM UTC

Hi Andrey, 

We have confimed the reported issue as bug in our end.  We will include the fix for this issue in one of the upcoming patch release, which is expected to be rolled on August 19, 2020 . You can track the status of this issue using below feedback link. 


We appreciate your patience until then. 

Regards, 
Ponmani M 


JM Juan Montoya August 21, 2020 03:06 PM UTC

This is already fixed update to the latest version.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team August 25, 2020 10:44 AM UTC

Hi Juan,

We are glad to hear that your issue has been resolved. Please let us know if you need any assist regarding this.

Regards,  
Jeyanth. 


Loader.
Up arrow icon