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

Answer 1

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