Ag-grid master/detail: custom row style when detail expanded

0
votes

for my work I use angular 7 and ag-grid enterprise latest version. I have an ag-grid table configured with master / detail feature and I need to customize the style of the row when the detail is expanded. For example, I would like to change the background color of the row only when its detail is expanded. I tried with the CSS rule:

.ag-theme-material .ag-row-focus {
   background-color: $dark-grey-blue !important;
}

but I don't get the correct behavior, because the row changes color clicking on it even without the detail being expanded, while I want it to change color only if the detail is expanded. I tried to look at the official documentation of ag-grid, but I didn't find indications for this specific case. Can you help me please? Thank you

1
ag-grid

1 Answers

2
votes

You can accomplish this with the grid callback getRowStyle and detect if the node is expanded or not:

gridOptions.getRowStyle = (params) => {
    if (params.node.expanded) {
        return { background: 'red' };
    } else {
        return { background: 'green' };
    }
}