Hi,
We want to highlight rows in DataGrid using different colors based on cell value.
As provided answer in community we have used below solution-
https://www.outsystems.com/forums/discussion/91051/outsystems-data-grid-apply-row-background-color-based-on-cell-value/
On Grid OnInitialize even added below javascript-
try { OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId).provider.loadedRows.addHandler(function(view){ var i =0; OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId).provider.rows.forEach(function(row){ if(row.dataItem.Sample_Product.Price > 100){ OutSystems.GridAPI.Rows.AddClass($parameters.GridId, i, 'custom-background-red'); } i++; }) });} catch(err) {}
This is working fine. Now issue is when we navigate from this screen to other screen then we are getting error-
Hello @Nitin Chavan ,
The reason this is happening is because you are calling GetGridById inside the handler again, instead of capturing the grid reference once. So when the handler fires after navigation, it tries to re-fetch a grid that no longer exists.
To avoid you need to update the code that it guards against the destroyed grids and avoids that call.
This code has the fix:
____
I would also recommend to switch to the ConditionalFormat method presented in the discussion you shared, it's easier to maintain.
Thank you @Mihai Melencu !
Your solution is working fine.
Hi @Nitin Chavan
try {
const grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId);
const provider = grid?.provider;
if (!provider) return;
provider.loadedRows.addHandler(() => {
provider.rows?.forEach((row, index) => {
if (row?.dataItem?.Sample_Product?.Price > 100) {
OutSystems.GridAPI.Rows.AddClass(
$parameters.GridId,
index,
'custom-background-red'
);
}
});
} catch (e) {}
The suggestion provided by @Mihai Melencu is absolutely correct. However, it can be optimized further to improve performance. I removed unnecessary checks and the manual i++, and used the forEach index instead to make the logic faster and cleaner.
Thanks
Vijay M.