When the grid loads there is no grouping/filtering applied. I want to be able to remove any grouping/filtering which the user has applied manually i.e. get the grid format back to its original state.
You can do this with help of gridOptions of ag-grid. Try to do the below changes..
Initialize gridOptions if not yet along with column definitions and set the grid options in ag-grid.
Component.ts
this.gridOptions = {
defaultColDef: {
editable: true,
resizable: true,
filter: true
},
columnDefs: this.columnDefs,
rowData: this.rowData
};
clear the filters with like below
...
gridOptions.api.setFilterModel(null);
gridOptions.api.onFilterChanged();
...
component.html
<ag-grid .. [gridOptions] = "gridOptions" ..> </ag-grid>
You can see more about this in the ag-grid documentation.
you can define a function to reset everything
function ResetGrid(){
//clear filters
gridOptions.api.setFilterModel(null);
//notify grid to implement the changes
gridOptions.api.onFilterChanged();
//remove all pivots
gridOptions.columnApi.setPivotColumns([]);
// disable pivot mode
gridOptions.columnApi.setPivotMode(false);
//reset all grouping
gridOptions.api.setColumnDefs(columnDefs);
//where columDefs is the object you used while creating grid first time.
}
the above method does what you want but more sophisticated way to do this will be saving column state(it may be at iniital stage or later after certain operation).
function saveState() {
window.colState = gridOptions.columnApi.getColumnState();
window.groupState = gridOptions.columnApi.getColumnGroupState();
window.sortState = gridOptions.api.getSortModel();
window.filterState = gridOptions.api.getFilterModel();
console.log('column state saved');
}
function restoreState() {
if (!window.colState) {
console.log('no columns state to restore by, you must save state first');
return;
}
gridOptions.columnApi.setColumnState(window.colState);
gridOptions.columnApi.setColumnGroupState(window.groupState);
gridOptions.api.setSortModel(window.sortState);
gridOptions.api.setFilterModel(window.filterState);
console.log('column state restored');
}
function resetState() {
gridOptions.columnApi.resetColumnState();
gridOptions.columnApi.resetColumnGroupState();
gridOptions.api.setSortModel(null);
gridOptions.api.setFilterModel(null);
console.log('column state reset');
}
here is a demo
Here is how you can remove all filters and row groups. For more info, see GridApi.
gridApi.setFilterModel(null);
gridApi.setRowGroupColumns([]);
gridApi.onFilterChanged();
Live Example
Related
Goals
I am trying to add row selection functionality which is connected between the master grid and detail grid.
When a checkbox on a master grid row is selected, I want to select all the checkboxes in the associated detail grid.
When a checkbox on a master grid row is deselected, I want to deselect all the checkboxes in the associated detail grid.
When only partial checkboxes inside of a detail grid are selected, I want the master grid row to show a partial selection icon in the checkbox.
I want to keep count of how many items were selected in all of the detail grids
Questions/Problems
All of this functionality already exists for Groups, but I cannot get it to work for Master/Detail. I've tried adding in the line that I believe should add this for Groups cellRendererParams: {checkbox: true}, but that does nothing for the detail grid.
I've also tried implementing the functionality myself, but I hit a couple of roadblocks.
I don't know how to set the partial-checkbox icon manually or if that's even possible.
I implemented the onSelectionChanged event handler for the detail grid, but inside of the function it looks like I can't access the Angular component context to update the count of selected items. Not sure how to pass in the context this.
Code that I have working so far:
When a checkbox on a master grid is selected/deselected, the checkboxes in the associated detail grid are all selected/deselected.
public onMasterRowSelected() {
this.gridOptions.api.forEachNode(masterRowNode => {
if(masterRowNode.isSelected()) {
this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.selectAll();
} else {
this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.forEachNode(detailRowNode => detailRowNode.setSelected(false));
}
});
}
Added the onSelectionChanged() event listener for the detail grid.
constructor() {
this.gridOptions = {
...
detailCellRendererParams: {
getDetailRowData: function(params) {
params.successCallback(params.data.items); // Defines where to find the detail fields out of the rowData object
},
detailGridOptions: {
rowSelection: 'multiple',
defaultColDef: {
sortable: true
},
getRowNodeId: function (rowData) {
return rowData.id; // detail items are indexed by id field
},
onSelectionChanged: function (params) {
console.log(this); // I expected this to print out my Angular component object, but instead it prints out this.gridOptions.detailCellRendererParams.detailGridOptions
console.log("TEST"); // I know that this function is successfully being called because this line is printed
this.selectedItems = 0;
params.api.forEachNode(detailRowNode => {
if(detailRowNode.isSelected()) {
this.selectedObs++; // I believe that this would work if I had access to the correct "this" context
}
});
},
columnDefs: [
{headerName: 'Column 1', field: 'column1', checkboxSelection: true},
{headerName: 'Column 2', field: 'column2'},
]
}
}
};
}
Here is an Angular example where you can push the parent component as a reference to the detail grid and set it as its context. Doing this allows you to register a component method as a callback for the detail grid's onRowSelected method.
https://stackblitz.com/edit/ag-grid-detailrow-selectcallback?file=src/app/app.component.ts
Move the onSelectionChanged(params) function to the same level as the detailCellRendererParams object.
internalOnSelectionChanged(params)
{
this.detailGridApi = params.api;
this.detailGridColumnApi = params.columnApi;
console.log(this);
}
Then, on the onSelectionChanged, do this:
onSelectionChanged: this.internalOnSelectionChanged.bind(this);
This solved my issues that were very similar to yours.
Please see this plunker
https://plnkr.co/edit/cOuQ5YPdQDl6oDvoUSSn?p=preview
If i put filter on any column, eg from Gold i remove 8 then the total should get refreshed. How can this be achieved
enter code herefunction
CustomPinnedRowRenderer () {}
CustomPinnedRowRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.style = params.style;
this.eGui.innerHTML = params.value;
};
CustomPinnedRowRenderer.prototype.getGui = function() {
return this.eGui;
};
It's not updated cuz it doesn't relate with visible data, it's binding to real (immutable, memory data)
But for sure you can create a workaround and handle pinnedData by yourself
onFilterChanged:(params)=>{
let result = {
gold:0,
silver:0,
bronze:0
}
setTimeout(()=>{
params.api.forEachNodeAfterFilter(i=>{
result.gold += Number(i.data.gold);
result.bronze += Number(i.data.bronze);
result.silver += Number(i.data.silver);
});
console.log(result);
params.api.setPinnedTopRowData([result]);
},0)
}
Add this part to your gridOptions.
One notice: currently we should use setTimeout inside onFilterChanged cuz grid doesn't provide updated data inside this event, the ag-grid team informed about
AG-2078 Filter Cell Renderer refreshes before grid has finished updating
I have a problem in which i need to display the number of rows filtered in ag grid at run time.
How can I subscribe for a filter changed event in ag grid(javascript version )?
Ag grid has callbacks 'onFilterChanged' & 'onFilterModified'
var gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableFilter: true,
onFilterChanged: function() {console.log('onFilterChanged');},
onFilterModified: function() {console.log('onFilterModified');}
};
You can find more details here https://www.ag-grid.com/javascript-grid-filtering/
I was searching for the way how to subscribe to the 'onFilterChange' event.
I need to track the number of rows on each filter change.
filteredRows is the field to be shown with number of filtered rows.
this.gridOptions.api.eventService.addEventListener('filterChanged', (e) => {
this.filteredRows = e.api.paginationGetRowCount();
})
For me, it helped to add a method to the filterChanged listener:
<ag-grid-angular
...
[rowData]="rowData"
(filterChanged)="onFilterChanged($event)"
>
</ag-grid-angular>
Then I created a function that uses the params api to get the current displayed rows:
onFilterChanged(params: GridOptions): void {
console.log(this.numberOfRows = params.api?.getDisplayedRowCount());
}
I hope this helps anybody too.
I need to provide a background color for an entire row in ag grid based on a condition in a column. I found no such examples where entire row is colored based on a certain value in a column..
The previous answer is somewhat outdated (although still correct and working) and now we have some more control over the styling of the grid. You could use getRowStyle(params) for this job, just like this:
gridOptions.getRowStyle(params) {
if (params.data.myColumnToCheck === myValueToCheck) {
return {'background-color': 'yellow'}
}
return null;
}
Obviously, myColumnToCheck would be the column you're checking your value against (the same name you input in the id/field property of the colDef object), and myValueToCheck would be the value you want said column to have to make the row all yellow.
I hope this helps others. A very common use case in any table or grid including AG Grid is going to be to set the even/odd background color of the whole row of the entire table in a performant way. ALSO, this needs to still work when SORTING.
ALL OF THESE WAYS OF DOING THIS IN AG-GRID ARE WRONG. Even though they WILL work without sort, they will not update properly when you go to use sorting. This is due to something the ag-grid team refers to in this issue https://github.com/ag-grid/ag-grid-react/issues/77 as initialization time properties.
// Initialization problem
getRowClass = (params) => {
if (params.node.rowIndex % 2 === 0) {
return this.props.classes.rowEven;
}
};
<AgGridReact
getRowClass={this.getRowClass}
>
// Initialization problem
getRowStyle = (params) => {
if (params.node.rowIndex % 2 === 0) {
return this.props.classes.rowEven;
}
};
<AgGridReact
getRowStyle={this.getRowStyle}
>
// Initialization problem
rowClassRules = {
rowEven: 'node.rowIndex % 2 === 0',
}
rowClassRules = {
rowEven: (params) => params.node.rowIndex % 2 === 0,
}
<AgGridReact
rowClassRules={this.rowClassRules}
>
// Trying to change the key so a rerender happens
// Grid also listens to this so an infinite loop is likely
sortChanged = (data) => {
this.setState({ sort: Math.random()})
}
<AgGridReact
key={this.state.sort}
onSortChanged={this.sortChanged}
>
Basically, most stuff in grid is just read once and not again, probably for performance reasons to save rerenders.
You end up with this problem when sorting when doing any of the above:
THE FOLLOWIUNG IS THE RIGHT WAY TO ACHIEVE EVEN ODD COLORING:
The correct way to add even/odd functionality in ag-grid is to apply custom css styles as follows:
You will need to overwrite/use ag variables as mentioned in the docs here:https://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables
The names of the variables in our case are
.ag-grid-even class name, or the .ag-grid-odd class name. You of course only need one if you just want an alternating color to help with visibility. For our purposes we only needed one.
Here is how this process looked in our repo:
1. Make a custom css file that overwrites/uses some of these ag- class variable names. We call it ag-theme-custom.css (I believe it needs to be a css file).
Note: We also have sass variables so this file just has a comment that this color I am adding in css is the value for our variable $GREY_100 so you don't need that part
You now will get the same result but it will still work when sorting.
Answer 2 is correct, but the syntax used is wrong, and caused me several problems trying to sort it out. Trying to minify the answer 2 code barfed, for example. It did work, but it's not proper syntax as far as I can see.
Note, this can be done inline, or with an external
function. For example an external function.
vm.gridOptions = {
columnDefs: columnDefs,
getRowStyle: getRowStyleScheduled
}
function getRowStyleScheduled(params) {
if (params.selected && params.data.status === 'SCHEDULED') {
return {
'background-color': '#455A64',
'color': '#9AA3A8'
}
} else if (params.data.status === 'SCHEDULED') {
return {
'background-color': '#4CAF50',
'color': '#F4F8F5'
};
}
return null;
};
You can add CSS classes to each row in the following ways:
rowClass: Property to set CSS class for all rows. Provide either a string (class name) or array of strings (array of class names).
getRowClass: Callback to set class for each row individually.
<ag-grid-angular
[rowClass]="rowClass"
[getRowClass]="getRowClass"
/* other grid options ... */>
</ag-grid-angular>
// all rows assigned CSS class 'my-green-class'
this.rowClass = 'my-green-class';
// all even rows assigned 'my-shaded-effect'
this.getRowClass = params => {
if (params.node.rowIndex % 2 === 0) {
return 'my-shaded-effect';
}
};
You can define rules which can be applied to include certain CSS classes via the grid option rowClassRules.
The following snippet shows rowClassRules that use functions and the value from the year column:
<ag-grid-angular
[rowClassRules]="rowClassRules"
/* other grid options ... */>
</ag-grid-angular>
this.rowClassRules = {
// apply green to 2008
'rag-green-outer': function(params) { return params.data.year === 2008; },
// apply amber 2004
'rag-amber-outer': function(params) { return params.data.year === 2004; },
// apply red to 2000
'rag-red-outer': function(params) { return params.data.year === 2000; }
};
You can't change the background color of an entire row in one command. You need to do it through the cellStyle callback setup in the columnDefs. This callback will be called per each cell in the row. You need to change the color of the row by changing the color of all the cells.
See the following column definition
{
headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}
You need to do this for all your columns.
Here is your changeRowColor function.
function changeRowColor(params) {
if(params.node.data[4] === 100){
return {'background-color': 'yellow'};
}
}
It changes the color of a row if the value of the third cell is 100.
I set different color for even and odd rows you can do it in any way..
$scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){
if(parseInt(params.node.id)%2==0) {
return {'background-color': 'rgb(87, 90, 90)'}
}else {
return {'background-color': 'rgb(74, 72, 72)'}
}
};
If you don't need to set the background color conditionally(based on the row data), it is not recommended to use rowStyle, as written on the row style documentation page:
// set background color on even rows
// again, this looks bad, should be using CSS classes
gridOptions.getRowStyle = function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: 'red' };
}
}
Instead, you can change the row colors using css:
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
#import "~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-mixin";
.ag-theme-balham {
#include ag-theme-balham((
// use theme parameters where possible
odd-row-background-color: red
));
}
If you are using AdapTable then the simplest way is to use a Conditional Style and apply it to a whole row.
The advantage of this is that it can be at run-time easily by users also.
https://demo.adaptabletools.com/style/aggridconditionalstyledemo
i am applying css for a clicked record in my grid like below
listeners: {
select: function(record,rowIndex) {
this.getView().addRowCls(rowIndex, 'green');
}}
i need to check on a condition whether css is present or not, i am trying to check like this
select: function(record,rowIndex) {
this.getView().addRowCls(rowIndex, 'green');
if(this.getView().hasCls('green')){}
}
which is always returning false. Please help me...
You can use the bellow way to check if the specified CSS class exists.
var row = this.getView().getNode(rowIndex, false);
if (row) {
console.log( Ext.fly(row).hasCls('green') );
}