[HowTo] Set the cell style/css

[Alexander Bulei]

• Set the cell style/css (all rows)
  
  Use the Col.OnCellAttr property :
  
  
  • For style
    delphi code

    FGrid.JQGridOptions.ColModel[0].OnCellAttr.Script:= 'function (rowId,val,rawObject,cm,rdata){ return " style=\" color:red \" "; }';

    
    
  • For css class
    delphi code

    FGrid.JQGridOptions.ColModel[0].OnCellAttr.Script:= 'function (rowId,val,rawObject,cm,rdata){ return " class=\"my-cell-class \" "; }';

    
    
  • Set the cell style/css based on cell value
    
    delphi code

    JScript:= TIWCGJScript.Create;
      try
        with JScript do
        begin
          Add('function (rowId,val,rawObject,cm,rdata){');
          Add(' if ((rdata.sosec == "2") || (rdata.sosec == "6")) {');
          Add('   return " style=\" color:red \" ";');
          Add(' } else {');
          Add('   return " style=\" color:green \" ";');
          Add(' }');
          Add('}');
        end;
        IWGridCensus.JQGridOptions.ColModel[2].OnCellAttr.Script:= JScript.Text;
      finally
        JScript.Free;
      end;

    
    
    In the example above, we will check the value of the column "sosec", and based on the value change the text color.
    
    Parameters passed to function:
    
    
    • rowId - the id of the row
    • val - the value which will be added in the cell
    • rawObject - the raw object of the data row - i.e if datatype is json - array, if datatype is xml xml node.
    • cm - all the properties of this column listed in the colModel
    • rdata - the data row which will be inserted in the row. This parameter is array of type name:value, where name is the name in colModel

Best Regards.