I am trying to highlight a row upon condition in a table. Am using Jqxgrid and did something in the front-end to highlight:

TypeScript:

carsDataAgain = [
    {
      year: '1967',
      make: 'Pontiac',
      model: 'GTO',
      id: '1002',
    },
];

getCarsData(val: string) {
    //console.log(model);
    if (this.carsDataAgain.find((i) => i.model === val.model)) {
      return 'Matched';
    } else {
      return 'Unmatched';
    }
}

HTML:

<jqxGrid
  [theme]="'material'"
  [width]="getWidth()"
  [source]="hello"
  [columns]="columns"
  [pageable]="true"
  [autoheight]="true"
  [sortable]="true"
  [selectionmode]="'singlerow'"
  [altrows]="true"
  [enabletooltips]="true"
  [editable]="true"
  [filterable]="'true'"
  [columngroups]="columngroups"
  [keyboardnavigation]="'false'"
  enablekeyboarddelete="false"
  [ngClass]="{
    primary: getCarsData(hello) === 'Matched',
    secondary: getCarsData(hello) === 'Unmatched'
  }"
>
</jqxGrid>

In the front-end, I did something as follows using ngClass:

[ngClass]="{
    'primary': getCarsData(hello) === 'Matched',
    'secondary': getCarsData(hello) === 'Unmatched'
}"

So what am doing, passed the data source in the method and checked the returned value to highlight. In my end, am verifying if there's an existing model (GTO) in the carsDataAgain array, then highlight. As there's a matching model, then it should highlight the first row. Here's a sample that I tried so far: Highlight A Row

Is there any other way to implement it or am I missing something here?

CodePudding user response：

There were two main issues with your solution:

1. You were adding the class to the table itself not a specific row
2. Even if that was correct getCarsData was being called ad infinitum because of angular render cycle, you can see that in the console.

I modified your stackblitz to make it work here:

https://stackblitz.com/edit/jqxgrid-editable-njsbfh

basically you create an arrow function and send it to a property called cellclassname when defining the grid columns

  cellclass = (row, column, value, rowData) => {

    if (this.carsDataAgain.find((i) => i.model === rowData.model)) {
      return 'green';
    }
  };
  ...
  columns: any[] = [
  {
      text: 'Year',
      datafield: 'year',
      width: 40,
      cellclassname: this.cellclass,
    },
    { text: 'Id', datafield: 'id', width: 40, cellclassname: this.cellclass },
    {
      text: 'Model',
      datafield: 'model',
      width: 100,
      cellclassname: this.cellclass,
    },
    {
      text: 'Make',
      datafield: 'make',
      width: 100,
      cellclassname: this.cellclass,
    },
  ];

Also for jqxgrid to be able to see the css classes defined in the app component we need a

  encapsulation: ViewEncapsulation.None,

which means that the styles from app.component.css will be global. You could also define the classes in another global css file and it would work without the encapsulation change.