Grid cell highlighting

[FerrisChamp]

Hello,

I am trying to highlight a grid cell without refreshing the grid. I am currently using this JS function:

const row = grid.getRow(message.cellRow);
var cell = row.cells.find(c => c.column.dataField == message.cellCol);
cell.element.classList.add(message.highlightColor);

This works great except that on a horizontal scroll the highlight moves with the scroll and doesn’t stay on the specific cell. Is there a way to call grid.highlightcell without a refresh? Or is there an horizontal onScroll function I can call? Or a way to further embed the highlight into the specific cell?

Thank you.

[admin]

Hi Ferris,

The approach you’re using will not work, because Cells are reused while scrolling which means that this CSS class is applied to a physical cell html element which will be the same one when you scroll up/down or left/right. The good news are that we have API for styling cells. Please, look at https://www.htmlelements.com/docs/grid-styling-cells/. The help article shows how to style cells in the Grid.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[FerrisChamp]

Hi, Thank you for the quick reply. Does that function work with a css border property? And can it be updated dynamically? I’m trying to show where a user is in a cell at a specific time so its constantly changing.
Thank you!

[admin]

Hi Ferris,

As mentioned in the article, you can apply styles dynamically, too by using a callback function cellsClassName

cellsClassName: (index, dataField, value, rowData, row) => {
                if (value < 3) {
                    return 'cell-class-2';
                }

                if (index < 5) {
                    return 'cell-class-1';
                }

                if (index >= 5) {
                    return 'cell-class-3';
                }
            }
        },

The custom CSS class may or may not include borders. However, this would not remove the Grid’s default cell borders, they will be inside the cell.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[Author]

Posts