cell/row conditional formatting (or better say styling?) in javascript grid?

Question

HI,how can I format ( I mean change back/foreground color) of a row based on the value of a certain cell? (e.g.: display the row with red background if status column value = 9)Same for  a cell:

how can I format (change back/foreground color) of a cell based on the value of a certain cell? (e.g.: display the "status" cell -or another - with red background if status column value = 9)

Thank you very much,

Pavithra Subramaniyam · Answer

Hi Domenico, 
 
Thanks for contacting Syncfusion support. 
 
You can customize the Grid rows by using the “rowDataBound” event and cells by using “queryCellInfo” event based on your conditions. Please refer to the below documentation for more information. 
 
Row: https://ej2.syncfusion.com/javascript/documentation/grid/row/row/#using-event 
Cell : https://ej2.syncfusion.com/javascript/documentation/grid/cell/cell/#cell-customization 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Pavithra S

Jan Tabery · Answer

Hi,How do I format a cell based on a cell value in another column?

Vikram Sundararajan · Answer

To achieve
conditional formatting in the Syncfusion JavaScript Grid, you can utilize the
queryCellInfo event to achieve conditional formatting for cells. Below is an
updated code snippet:

queryCellInfo: function (args) {
              var ShipCountry =
  args.data['ShipCountry'];
              if (args.column.field ===
  'ShipCountry' && ShipCountry==='France') {
                args.cell.style.color = 'blue';
              }
              if (args.column.field ===
  'ShipCountry' &&ShipCountry==='Germany') {
                args.cell.style.background =
  'red';
              }
          
          }
   }

Sample: https://stackblitz.com/edit/k63gao-zosdj9?file=index.jsIf you need any
further assistance or have additional questions, please feel free to let us
know.Regards,Vikram S

Jan Tabery · Answer

Hi Vikram,Thank you very much for your reply,but I meant for example formatting the cell in column 1 based on the value in column 3. In your example, it would be formatting the 'OrderID' column based on the value in the 'ShipCountry' column.

Vikram Sundararajan · Answer

Hi Jan Tabery,We understand that you want to format the cells in one
column based on the values in another column, you can modify the queryCellInfo
function accordingly. In your case, if you want to format the 'OrderID'
column based on the 'ShipCountry' column, you can access the values of
both columns in the queryCellInfo function and apply the formatting as
needed. Here's an updated version of your code:

index.js
   
    queryCellInfo: function (args) {
             
  var ShipCountry = args.data['ShipCountry'];
             
  if (args.column.field
  === 'OrderID' && ShipCountry==='France') {
               
  args.cell.style.background = 'red';
             
  }
          }

Sample: https://stackblitz.com/edit/k63gao-dqyhsw?file=index.jsPlease let us know if you need any further assistance.Regards,Vikram S