How can I highlight similar rows at runtime in jqxGrid?

[andrewstantonParticipant]

Hi,

Using jqxGrid I’m displaying something like this…

CarMake CarModel
—- —-
Porsche 911
Porsche Boxster
Porsche Panamera
BMW 320d
BMW M340i
BMW X5
Ford Focus
Ford Mondeo
Ford Fiesta

…and my grid allows for single selection only (selectionmode: ‘singlerow’).

I do not want to enable multi-selection, however I do want to “highlight” “similar” rows by CarMake, so that for example when I single-click / select “BMW M340i” the text in each cell in the row gets coloured, say, Red, AND the text in the cells in the other “BMW” rows also get coloured red. Then, for example when I click on “Porsche 911” the “BMW” rows/cells revert to black text and all three “Porsche” rows/cells get coloured with red text.

To be clear I don’t want to /Select/ the similar cells – only identify them and /change their colour/, i.e. “highlight” them for visibility.

I have a loop which correctly identifies the rows to be highlighted/coloured (the variable “i” contains the target row index)…

$(“#jqxGrid”).on(‘rowselect’, function (event) {
var SelectedCarMake = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, event.args.rowindex, “CarMake”);
var rows = $(‘#jqxGrid’).jqxGrid(‘getrows’);
var rowsCount = rows.length;
for (var i = 0; i < rowsCount; i++) {
var CurrentCarMake = $(‘#jqxGrid’).jqxGrid(‘getcellvalue’, i, “CarMake”);
if (CurrentCarMake == SelectedCarMake) {

// NOW WHAT? I want to set the CSS for Row i – or for the Cells in Row i – to “color:red;” or something

};
};
});

…but how do I set the CSS (style or class) for the identified rows (or cells within the rows)?

Note that for the actual selected row I’ve specified the following CSS class which works correctly…
.jqx-grid-cell-selected {
color: red !important;
}
…but how do I apply this – or a similar style – to the identified “similar” rows in the grid, i.e. the rows where the CarMake matches the CarMake in the single selected row?

Many thanks for your help!
Andrew.

[MartinParticipant]

Hello Andrew,

I would suggest you to check this forum Topic.
The approach is to use a callback for the cellclassname property of the columns to determine if a cell should be “highlighted” and to call the refresh method of the grid when a new cell is selected.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts