Scroll Issue in React

[Punit]

I have cell-wise validation. Whenever something is required, the corresponding cell should turn red across the entire grid.
But right now, the background color is changing only for the cells that are visible on the screen (within the current scroll area).
The cells outside the visible scroll region are not getting the validation background color.

I need it to work for the entire grid, not just the visible rows.

My Code -

  const validateRow = (row, rowIndx) => {
      if (!row) return;

      if (row.IsMandatory) {
        console.log( row , "IsMandatory" )
        const dateCols = Object.keys(row).filter((k) => k.startsWith("Date_"));

     

        dateCols.forEach((col) => {
          const value = row[col];
          const isEmpty = !value || value.toString().trim() === "";


          if (isEmpty) {
            gridObj.pqGrid("addClass", {
              rowIndx,
              dataIndx: col,
              cls: "progress-bar-primary",
              apply: true,
            });

            isValid = false;
            missingCells.push({
              row: row.ChildLabel || row.Label || `Row ${rowIndx + 1}`,
              column: col,
            });
          }
        });
      }
    };

    // 🔁 Run validation on all rows
    flatData.forEach((row, i) => validateRow(row, i));

    // ✅ Refresh grid once after all highlights
    gridObj.pqGrid("refresh");

[paramvir]

As I see, you are using custom validation and addClass() API method to add class to the cells failing validation.

A quick check on the demos with addClass() API demonstrate that the class is added to all cells even outside the viewport.

Code: [Select]

let grid = $("#grid_json").pqGrid('instance');
var dataLen = grid.pageData().length;
for(let ri = 0;ri<dataLen;ri++){
grid.addClass({
rowIndx: ri,
dataIndx: 'company',
cls: 'red'
})
}

So check the value of flatData, is it the data for whole grid or the viewport only.

Please share a jsfiddle if stilll facing issues.