Highlighting rows of invalid cells dynamically

Tags: #<Tag:0x00007f8b1d6acc00>
#1

Hi, We have a requirement for highlighting rows if it contains an invalid cell. Say we have a cell which requires a number but it gets text, then that whole row needs to be highlighted. Currently im able to highlight one particular cell, would be helpful if you can suggest a way to highlight the whole row. Thansk

#2

Hi @eandrew4738

Generally, in Hadsontable validator runs per cell. So if you’d like to highlight more cells I recommend attaching a custom className via afterValidate hook. Did you already try that?

#3

Do you have an example code that i can take a look at. Thanks.

#4

Sure. Here you go https://jsfiddle.net/oehLp548/2/

And to alter the cell that is red, you can overwrite the CSS of the .handsontable .htInvalid class.

1 Like
#5

Thanks you so much.

#6

If you dont mind, do you have any suggestions or examples.

  1. To load a table faster coz i have 5000+ datas and currently the table takes aroound 5+ seconds to load. The way im doing is creating an empty data and then loading the table with the tables i get from an API. If you have better idea it would be useful

  2. To Have a search bar outside the table along with page pagination.

  3. Any way to filter(from button event outside the table) rows that have validation error and rows that are valid.

#7

Generally, 5000 cells should not cause a 5-second delay. It could be caused by

  • heavy logic on the front-end
  • delayed comeback from the server
  1. To Have a search bar outside the table along with page pagination.

Pagination should be done on the server, as currently, we do not have such a mechanism. A search bar outside the table can be found here https://handsontable.com/docs/javascript-data-grid/searching-values/

  1. Any way to filter(from button event outside the table) rows that have validation error and rows that are valid.

I can also suggest using the afterValidate hook. Then you store the !isValid index of a row in an array and then run the hideRows() method from the hiddenRows plugin.

#8