Validate rows and highlight the invalid cells in slickGrid

Question

I want to validate a row on click of Save. This question is already discussed with the following solution. I see that rows are invalid and the failures array has the invalid entries but cells are not highlighted.

Following is the my code:

function save(){
  grid.validate();
}
//Validate only on Save
grid.validate = function() {

    var rowFailures = {}

    for (r in data) {
       if(r == 'getItemMetadata'){continue;}

      var failures = validateColumns({item: data[r], row: r})
      if(failures.length > 0){
          rowFailures[r] = failures;
      }
    }

    if(Object.keys(rowFailures).length > 0){
      grid.onValidationError.notify({"rowFailures": rowFailures}, new Slick.EventData())
    }
}
//Validation Error invoked
grid.onValidationError.subscribe(function(e, args) {
console.log("Validation error");
        if(args.rowFailures){
         var rowsIndexValues = Object.keys(args.rowFailures);
         for(i in rowsIndexValues) {
            var rowFailures = args.rowFailures[rowsIndexValues[i]]

            for(j in rowFailures){
              var failure = rowFailures[j];
//scroll first failure into view
              if(0 == i){grid.scrollRowIntoView(failure.rowIndex)}
              grid.flashCell(failure.rowIndex, failure.columnIndex, 500);//Makes no difference!
            }
        }
        }
});
//Changes the background color for the failed cells
data.getItemMetadata = function(row) {
    var failures = validateColumns({row: row, item: data[row]})

    if(failures.length > 0){

     var obj = {};
     var metadata = {"columns": obj}
     //Its iterating through these failures
     for(f in failures){
       //Changes the background color of the cell
       obj[failures[f].column.id] = {"formatter": function(row, cell, value, m, item){return '<div style="background: #FFCCCC" title="This field is //invalid">'+failures[f].item[failures[f].column.field]+'</div>'}}
     }
     return metadata;
    }
return {}
}

Please provide a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). It will make things easier for those trying to help you and increase your chances of quickly getting a solution to your problem. — Constantin Groß, Oct 09 '19 at 16:45
How about just testing one feature at a time? For example, test ```grid.flashCell```on a fixed row and column, triggered by a button, just to make sure ti works. Try setting the column formatter through the metadata for a fixed row and column. Note also that you can return an object from a formatter with classes to add or remove, see http://6pac.github.io/SlickGrid/examples/example2-formatters.html — Ben McIntyre, Oct 10 '19 at 09:09
Yes i tried using the approach that you mentioned but the highlight is not working. i have posted for that issue here https://stackoverflow.com/questions/58342437/slickgrid-cells-are-not-highlighted — asha ganapathy, Oct 11 '19 at 13:50

score 0 · Accepted Answer · answered Aug 26 '20 at 13:33

I was able to achieve this using the following code

dataView.getItemMetadata = metadata(dataView.getItemMetadata);    
    function metadata(old_metadata_provider) {
      return function (row) {
        
        var item = this.getItem(row);
        var ret = (old_metadata_provider(row) || {});            
        if (item) {
            ret.cssClasses = (ret.cssClasses || '');
            
              var failures = //check for some condition
              if(failures.length > 0){  
                    return {
                      cssClasses: 'validationError'
                  };
              }
          }
          
      }

You should also take a look at [setCellCssStyles](https://github.com/6pac/SlickGrid/wiki/Slick.Grid#setCellCssStyles), it's easier to use compare to the metadata and it also has less impact, you can see a quick demo in this other SO [answer](https://stackoverflow.com/a/48429477/1212166), I use this technique myself to change background color of cell that I haven't saved yet (like a batch editing). — ghiscoding, Aug 26 '20 at 18:25

Validate rows and highlight the invalid cells in slickGrid

1 Answers1