Highlighting a FlexGrid Row After the Grid Is Loaded Without Refreshing in JavaScript

Background:

When using Wijmo FlexGrid, you may need to highlight a specific row after the grid has already loaded. A common mistake is trying to add a CSS class directly to grid rows, columns, or cells.

That approach does not work because rows[i], columns[i], and cells in the FlexGrid object model are not DOM elements. FlexGrid virtualizes cells, meaning the DOM elements are created, reused, and recycled as needed.

The right approach is to apply styling through FlexGrid’s row or column styling APIs, such as cssClass or cssClassAll, or to use the formatItem event for more customized cell-level styling. After changing the styling property, call invalidate() to repaint the grid. This does not reload the data.

Steps to Complete:

1. Create a FlexGrid with sample data.
2. Add a CSS class for the highlighted row.
3. Apply the CSS class to a row using cssClassAll.
4. Repaint the grid using invalidate().
5. Clear the row highlight when needed.

Getting Started:

Create a FlexGrid with sample data

Here, we create a basic FlexGrid and bind it to a CollectionView. The grid is configured with manually defined columns and row selection enabled.

function createGrid(selector, data) {
  const view = new wijmo.collections.CollectionView(data);

  const grid = new wijmo.grid.FlexGrid(selector, {
    autoGenerateColumns: false,
    itemsSource: view,
    selectionMode: wijmo.grid.SelectionMode.Row,
    columns: [
      { binding: "varEmployeeID", header: "Employee ID", width: 120 },
      { binding: "employeeName", header: "Name", width: "*" },
      { binding: "department", header: "Department", width: 160 },
      { binding: "hiresThisWeek", header: "Hires", width: 90 },
    ],
  });

  return grid;
}

Add a CSS class for the highlighted row

This step defines the styling that will be applied to the row.

.wj-cell.fg-cell-bad,
.wj-header.fg-cell-bad {
  background: #d32f2f;
  color: #fff;
}

• The selector targets Wijmo grid cells and row headers that receive the fg-cell-bad class.

Apply the CSS class to a row using cssClassAll

Use cssClassAll when you want the class applied to all cells in the row, including the row header.

function markRowBad(grid, rowIndex) {
  if (rowIndex < 0 || rowIndex >= grid.rows.length) {
    alert("Row index is out of range.");
    return;
  }

  // Applies to all cells in that row, including row headers.
  grid.rows[rowIndex].cssClassAll = "fg-cell-bad";

  // Repaint only. This does not reload the data.
  grid.invalidate();
}

Repaint the grid using invalidate().Clear the row highlight when needed

After assigning cssClassAll, call:

grid.invalidate();

• This tells FlexGrid to repaint itself.
• This is not a data refresh. It does not reload the itemsSource, recreate the CollectionView, or fetch data again. It only redraws the grid so the new class appears in the rendered cells.

Clear the row highlight when needed

If only one row should be highlighted at a time, clear the existing row classes before marking another row.

function clearRowHighlights(grid) {
  for (let i = 0; i < grid.rows.length; i += 1) {
    grid.rows[i].cssClassAll = null;
  }

  grid.invalidate();
}

Then call both methods together:

clearRowHighlights(grid);
markRowBad(grid, 0);

• This removes the previous highlight and applies the class to the target row.

With this JavaScript setup:

• A row can be highlighted after the grid has loaded.
• The grid does not need to reload its data.
• cssClassAll applies the CSS class to all cells in the row, including the row header.
• invalidate() repaints the grid so the class becomes visible.
• The highlight can be cleared or moved to another row.

Happy coding!