How to set a cell background color in source data in ag-grid

2
votes

I am trying to set a cell background color from a data source, which is where the color is determined, in the plain Javascript version of ag-grid. The cell background color will not change based on user input, it will always be determined on the server and returned in a data set for the grid to update. However, I cannot find any parameter in the rowdata object (or anywhere else) that allows me to define a cell-level background color in the grid's source data.

I'd like to be able to do something like this:

var columnDefs = [
  {headerName: "Surname", field: "surname"},
  {headerName: "First name", field: "firstname"},
  {headerName: "Date of Birth", field: "birthdate"},
  {headerName: "House", field: "house"}
];

var rowData = [
  {surname: "Smith" cellbackground=blue, firstname: "John", birthdate: "01/02/2008", house: "Yellow"},
  {surname: "Jones" cellbackground=green, firstname: "Paul", birthdate: "03/05/2008", house: "Green"},
  {surname: "Green" cellbackground=yellow, firstname: "George", birthdate: "28/04/2007", house: "Yellow"},
  {surname: "MacDonald" cellbackground=amber, firstname: "Ringo", birthdate: "14/09/2007", house: "Blue"},
  {surname: "Payne" cellbackground=red , firstname: "David", "02/09/2007", house: "Red"}
];

Naturally, this data will come in a JSON file from my web service, but I am unsure of the syntax of including a background color for a specific cell. I want to apply a background color to just the surname cell (for now). I am also aware that the "cellbackground=amber" syntax is not correct. The background colors will not be worked out on the client side, only on the server side, as they are based on rules defined in a server database.

Any help would be appreciated.

3
ag-grid

3 Answers

4
votes

We had a similar requirement. We solved it through using the Adaptable Blotter that is a layer on top of ag-Grid. We defined the rule there and it then painted ag-Grid accordingly. Works really well. But ive no idea how they do it other than it works. They call it a Conditional Style if that helps.

3
votes

We also used the Adaptable Blotter to do this. They have the ability to do Conditional Styles where the row will update based on data and also simple row styles.

1
votes

I have now worked this out - I apply a cellStyle to the column to be coloured, based on a separate column that contains the colour name. I have created a function called getCellColor that does this. Hope this is useful to others...

var columnDefs = [
{headerName: "HouseColour", field: "housecolour", hide: true},
{headerName: "House", field: "house", width: 100, cellStyle: function getCellColor(params) { return {backgroundColor: params.data.housecolour}}}];

var rowData = [
{house: "Yellow", housecolour: "yellow"},
{house: "Green", housecolour: "green"},
{house: "Purple", housecolour: "purple"},
];