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
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' };
}
}
Related
I am currently working on Ag Grid.initial load i have changed the pinned row color with the help of below code.
<ag-grid-angular[getRowStyle]="getRowStyle">
</ag-grid-angular>
getRowStyle(params: any): any {
if (params.node.rowPinned === 'top') {
return {'font-weight': '400',
'background-color': 'blue' };
}
}
Do we have any other way to change the background color of pinned row on selectionChanged event.
expecting a better suggestion
Thanks in advance.
I am using groupIncludeTotalFooter to display footer. I was able to change footer text using footerValueGetter.
However i am trying to find a better way to apply some styles to the Total footer row.
Currently I am doing some CSS selection as follows. Wanted to know if this is the only way or there is better way.
.my-component .ag-row-footer {
background-color:#FFFFFF;
}
You can achieve this programatically by leveraging the Grid Callback method getRowStyle:
gridOptions = {
getRowStyle: (params) => {
if (params.node.footer) {
return { fontWeight: 'bold' };
}
},
}
This will make the footer bold, as shown in the following example
There are other ways of achieving this programatically, if you need more flexibility, in the documentation: https://www.ag-grid.com/javascript-grid-row-styles/
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
I am using ag-grid 5.1.2
I've configured a getRowStyle function to set the background-color for certain items.
I've noticed that has overridden the 'selected row' color now, so when a row is selected the background will not change to indicate as such.What is the correct way to still let highlighted row color work with the custom getRowStyle. Here is the typescript for the rowStyle function:
self.customRowStyle = function (params: AgParams) {
if (!params.data.isShaded) {
return {
"background-color": "#CEDDDD",
};
}
return null;
};
In your CSSyou can choose not to target the selected row.
ag-Grid adds the class onto the row that is returned from your getRowStyle callback
It also adds .ag-row-selected for rows that get selected.
You can simply use CSS to only target not selected rows or even apply a different style to the rows that are both selected and have your custom class.
Here is an example:
CSS
.bg-red.ag-row:not(.ag-row-selected) {
background-color: red ;
}
OR different style for both selected and bg-red
.bg-red.ag-row {
background-color: red;
}
.bg-red.ag-row.ag-row-selected {
background-color: pink;
}
JS
rowClassRules: {
'bg-red': () => {
return true; // applies class bg-red to all rows
},
},
Here is a live running code example of this in action.
Also here is another live example that overrides row styles on click of a button, but this doesn't involve styling callbacks:
Is this what you are looking for?
Use the getRowClass gridOption instead of getRowStyle. Then in CSS set the appropriate styles for your background row and the brackground row when highlighted.