I'm having trouble adding dynamic styles to row groups on an AG Grid table because I need each row group to have its own custom background color in hex that comes from an API.
I've tried using AG Grid's autoGroupColumnDef with cellStyle, but since AG Grid only stores the value that will be displayed, I can't access it.
To illustrate what I want, I made a drawing.
Image
Here is my code:
var levels = "";
if (data != null && data != undefined && data.d != '[]') {
levels = JSON.parse(data.d)[0].levels;
}
var columnDefs = [{
headerName: "CT1",
field: "category1",
rowGroup: true,
filter: true,
rowGroupIndex: 1,
hide: true
},
{
headerName: "CT2",
field: "category2",
rowGroup: true,
filter: true,
rowGroupIndex: 2,
hide: true
},
{
headerName: "CT3",
field: "category3",
rowGroup: true,
filter: true,
rowGroupIndex: 3,
hide: true
},
{
headerName: "CT4",
field: "category4",
rowGroup: true,
filter: true,
rowGroupIndex: 4,
hide: true
},
{
headerName: "CT5",
field: "category5",
rowGroup: true,
filter: true,
rowGroupIndex: 5,
hide: true
},
{
headerName: "CT6",
field: "category6",
rowGroup: true,
filter: true,
rowGroupIndex: 6,
hide: true
},
{
headerName: "CT7",
field: "category7",
rowGroup: true,
filter: true,
rowGroupIndex: 7,
hide: true
},
{
headerName: "CT8",
field: "category8",
rowGroup: true,
filter: true,
rowGroupIndex: 8,
hide: true
},
{
headerName: "CT9",
field: "category9",
rowGroup: true,
filter: true,
rowGroupIndex: 9,
hide: true
},
{
headerName: "CT10",
field: "category10",
rowGroup: true,
filter: true,
rowGroupIndex: 10,
hide: true
},
{
headerName: "C",
field: "descriptionC",
rowGroup: true,
filter: true,
rowGroupIndex: 11,
hide: true
},
{
headerName: "C",
field: "descriptionC",
rowGroup: true,
filter: true,
hide: true
},
{
headerName: "color1",
field: "color1",
aggFunc: "avg",
hide: true
},
{
headerName: "color2",
field: "color2",
aggFunc: "avg",
hide: true
},
{
headerName: "color3",
field: "color3",
aggFunc: "avg",
hide: true
},
{
headerName: "color4",
field: "color4",
aggFunc: "avg",
hide: true
},
{
headerName: "color4",
field: "color5",
aggFunc: "avg",
hide: true
},
{
headerName: "color6",
field: "color6",
aggFunc: "avg",
hide: true
},
{
headerName: "color7",
field: "color7",
aggFunc: "avg",
hide: true
},
{
headerName: "color8",
field: "color8",
aggFunc: "avg",
hide: true
},
{
headerName: "color9",
field: "color9",
aggFunc: "avg",
hide: true
},
{
headerName: "color10",
field: "color10",
aggFunc: "avg",
hide: true
},
{
headerName: "ID1",
field: "idCategory1",
aggFunc: "avg",
hide: true
},
{
headerName: "ID2",
field: "idCategory2",
aggFunc: "avg",
hide: true
},
{
headerName: "ID3",
field: "idCategory3",
aggFunc: "avg",
hide: true
},
{
headerName: "ID4",
field: "idCategory4",
aggFunc: "avg",
hide: true
},
{
headerName: "ID4",
field: "idCategory5",
aggFunc: "avg",
hide: true
},
{
headerName: "ID6",
field: "idCategory6",
aggFunc: "avg",
hide: true
},
{
headerName: "ID7",
field: "idCategory7",
aggFunc: "avg",
hide: true
},
{
headerName: "ID8",
field: "idCategory8",
aggFunc: "avg",
hide: true
},
{
headerName: "ID9",
field: "idCategory9",
aggFunc: "avg",
hide: true
},
{
headerName: "ID10",
field: "idCategory10",
aggFunc: "avg",
hide: true
},
{
headerName: "",
field: "edit",
width: 50,
cellClass: 'text-center',
sortable: true,
hide: masterOnlyView == "1",
cellClassRules: {
"gridIconEdit": function(params) {
return params.node.key != null && params.node.field != "descricaoCIP"
},
"text-center": function(params) {
return params.node.key == null || params.node.field == "descricaoCIP"
}
}
}
];
var obj = JSON.parse(data.d);
var gridOptions = {
columnDefs: columnDefs,
singleClickEdit: true,
stopEditingWhenCellsLoseFocus: true,
rowSelection: 'multiple',
groupDefaultExpanded: levels - 1,
animateRows: true,
rowData: obj,
defaultColDef: {
filter: true,
},
autoGroupColumnDef: {
pinned: 'left',
minWidth: 1000,
headerName: lblColunaDescricao,
cellStyle: (cell) => {
if (cell.node.field != "descricaoCIP") {
return {
backgroundColor: 'green'
}
}
},
cellClassRules: {
"cell-blue": function(params) {
return params.node.field == "descricaoCIP"
},
"total-cell-left-no-bg": function(params) {
return params.node.field != "descricaoCIP"
}
}
},
};
var eGridDiv = document.querySelector('#myGrid');
eGridDiv.innerHTML = "";
let gridElement = new agGrid.Grid(eGridDiv, gridOptions);
fnGlobalSetGridOptions(gridElement, {
gridOptions
});
The API return has a structure like this for each value, and then it is grouped by AG Grid:
{
category1: "1. CATEG",
category2: "1.1. SUB CATEG",
category3: "1.1.1. SUB SUB CATEG FV",
category4: null,
category5: null,
category6: null,
category7: null,
category8: null,
category9: null,
category10: null,
codeC: "FV01.01.02",
color1: "#1cd1d4",
color2: "#e83030",
color3: "#FFFFFF",
color4: null,
color5: null,
color6: null,
color7: null,
color8: null,
color9: null,
color10: null,
descriptionC: "FV01.01.02",
idC: 13161,
idCategory1: 49,
idCategory2: 50,
idCategory3: 52,
idCategory4: 0,
idCategory5: 0,
idCategory6: 0,
idCategory7: 0,
idCategory8: 0,
idCategory9: 0,
idCategory10: 0,
levels: 3
}
Can anyone help?
I found the solution. In the end, I had to check the child leaves and take the first one in the group. When a leaf is empty, it means that the color won’t change due to the level not having a color in the object sent by the API. When it’s a group, it will have a color, so it can be applied. In the end, the code turned out like this.
autoGroupColumnDef: {
pinned: 'left',
minWidth: 1000,
headerName: lblColunaDescricao,
// what i changed
cellStyle: (cell) => {
// check if the information displayed is the description
// (the last child in my case)
if (cell.node.field != "descricaoCIP") {
// get any value from the group
const nodeData = cell.node.allLeafChildren[0].data;
// get the level
const level = cell.node.level + 1;
return {
// get the color from the value
backgroundColor: nodeData['color' + level]
}
}
},
cellClassRules: {
"cell-blue": function(params) {
return params.node.field == "descricaoCIP"
},
"total-cell-left-no-bg": function(params) {
return params.node.field != "descricaoCIP"
}
}
},