Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › Grid cell highlighting

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 23, 2023 at 3:38 pm #109039
    FerrisChamp
    Participant

    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.

    October 23, 2023 at 4:15 pm #109043
    admin
    Keymaster

    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/

    October 23, 2023 at 4:18 pm #109044
    FerrisChamp
    Participant

    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!

    October 23, 2023 at 7:57 pm #109052
    admin
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.