One of the challenges I am facing is how to emphasize a specific row in a table based on certain conditions. Currently, I am utilizing Jqxgrid and have made some modifications in the front-end to achieve the highlighting effect:
TypeScript:
carsDataAgain = [
{
year: '1967',
make: 'Pontiac',
model: 'GTO',
id: '1002',
},
];
getCarsData(val: string) {
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 utilized the following approach using ngClass:
[ngClass]="{
'primary': getCarsData(hello) === 'Matched',
'secondary': getCarsData(hello) === 'Unmatched'
}"
Essentially, I passed the data source into the method and checked the returned value to determine which row should be highlighted. In this case, I am checking for the existence of a specific model ('GTO') in the carsDataAgain array to trigger the highlighting effect. If a matching model is found, the first row should be highlighted. Here's a demo that illustrates my current progress: Highlight A Row
I am curious if there are any alternative methods to implement this feature or if there are any aspects that I may have overlooked?