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?
There were two main issues with your solution:
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.