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. Image for the cookie policy date

Dinamically update class of EdiTemplate controls in Gridview.

I want to have red bordering around fields that the user has not filled-in yet, and update the border to green as the user has filled-in data on the in-line edit/add of grid row.

I have tried so by adding a script to add and remove a class on the onclick, onkeyup, and onpaste events (depending on the controller). 


  1. The assigned classes get reset upon clicking out of the control, so the CSS class I assign gets removed. I think an event is overwriting the classes for the parent spans.
  2. I can't load the script upon going on edit/add mode. I tried running the script and passing Ids in the OnGridActionComplete "Add" action, but was not successful.

Is there a different way of doing this? I originally thought I could use the native validation controls, but couldn't find something to make it dynamic to update the bordering as the user types. It doesn't have to be a JavaScript solution, but ideally I'd want to have something I can call on multiple sections of the website, even outside a grid.

Some of the controls my grid has are: 
  • SfTextBox
  • SfDatePicker
  • SfDropDownList

1 Reply

NP Naveen Palanivel Syncfusion Team March 23, 2023 06:00 PM UTC

Hi Enrique,

Greetings from Syncfusion support.

We reviewed your query and found that when you click the "update" button, the values in the edit template are not present, which causes the "e-error" class not to be applied. So you attempted to accomplish this in JavaScript. Please confirm that this is the problem you are experiencing. We also attached the Ug Documentation for more reference

Link : Column Validation in Blazor DataGrid Component | Syncfusion

If this is not your requirement, please provide the following information to assist us in further validating the issue at our end.

  1. Share us the entire Grid code snippet along with model class.
  2. Share us the video demonstration of the issue
  3. Please share a video demo of your exact requirement, along with a detailed explanation
  4. If possible share us an simple issue reproduceable sample

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Naveen Palanivel

Live Chat Icon For mobile
Up arrow icon