I have an ag-grid where rows are grouped by first column. The group are expanded by default. I want to disable group collapse on click.
colDefs = [{
field: 'colA',
rowGroup: true,
hide: true
}, {
field: 'colB'
},
...
];
gridOptions = {
groupDefaultExpanded: -1,
...
}
How do i prevent from collapsing the group open by default
I guess the colB has a showRowGroup: 'colA' and a cellRenderer: 'agGroupCellRenderer'.
You can remove the cellRenderer from it and it will display the group title as a simple string without showing the collapse icon and without the collapse abililty too.
I managed to do that by adding the following css:.ag-group-expanded {pointer-events: none;}
I also set to true suppressDoubleClickExpand and suppressEnterExpand so there is no way to collapse the rows.
Related
Does anybody have experience with configuring the autoGroupColumnDef property for AG Grid? I am simply trying to make the default Group Column for my treeData grid to only show the expand/collapse chevron (with no group text). Below is my autoGroupColumnDef config and the current visual state:
const gridOptions: GridOptions = {
treeData: true,
getDataPath: (data) => data.hierarchy as string[],
autoGroupColumnDef: {
headerName: "",
width: 30, // <-- gets completely ignored??
valueFormatter: () => "",
cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
},
},
}
As you can see, I am left with a large amount of whitespace between the chevron in the group column and the data columns despite my setting an explicit width: 30 in the config. How can I get rid of this whitespace?
Use maxWidth instead of width.
Is there a way to hide the row count in the aggregated rows in ag-grid?
I couldn't find any specific configuration to hide the row count appearning beside the aggregated cell.
You can use suppressCount within cellRendererParams
cellRendererParams: {
suppressCount: true, // turn off the row count
}
The last two answers do not seem to work in v25 of the ag-Grid.
See this page: https://www.ag-grid.com/javascript-grid/grouping/
The solution for me is to use the autoGroupColumnDef like the following:
autoGroupColumnDef: {
cellRendererParams: {
suppressCount: true
}
}
When using gridOptions.groupUseEntireRow = true you can set it with
gridOptions.groupRowRendererParams = {
suppressCount: true
};
As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.
I'm introducing some columns dynamically, by using columnDefs:
this.columnDefs = [
{ headerName: 'Name', field: 'name', width: 200 },
{ headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
...
];
I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.
Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?
Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs
Column animations are on by default, row animations are off by
default. This is to keep with what is expected to be the most common
configuration as default.
In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0
My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...
Is this possible in ag-Grid?
In my component by columnDefs for the column that has my checkbox and expand icon looks like so:
...
this.gridOptions.columnDefs = [
{
headerName: '', width: 100, cellRenderer: 'group',
// for parent row selection - checkboxes for parent rows
checkboxSelection: function(params) {
return params.node.canFlower;
},
cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'
},
...
Listen to the rowGroupOpened event and set the row to selected:
// inside the ag-grid tag
(gridReady)="onGridReady($event)"
// inside the AppComponent class
onGroupOpened(event){
event.node.setSelected(true)
console.log(event)
}
plnkr example
I want to have the selection checkbox for ag-grid with the option below:
But didn't see the checkbox on the left. Have any idea what else needs to be settings to make the selection checkbox works.
self.appliancesInGroupGridOpts = {
angularCompileRows: true,
enableColResize : true,
rowData: null,
checkboxSelection: true,
enableSorting: true,
columnDefs: [
{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
checkboxSelection: true,
width: 200
} ,
{
valueGetter: 'data.updated',
headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
suppressSizeToFit : true,
template: '<span class="appliance-updated">{{data.updated}}</span>',
checkboxSelection: true,
width: 200
}
] ,
http://www.ag-grid.com/angular-grid-selection/index.php
Checkbox selection can be used in two places:
row selection
group selection.
To include checkbox selection for a column, set the attribute
columnDefs: [{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
width: 200,
checkboxSelection: true
...
on the column definition.
You can set this attribute on as many columns as you like, however, it doesn't make sense to have it in more one column in a table.
To enable checkbox selection for groups, set the attribute:
groupColumnDef: {
headerName: "Athlete",
field: "athlete",
width: 200,
cellRenderer: {
renderer: "group",
checkbox: true
}
}
for the group renderer. See the grouping section for details on the group renderer.
Selecting groups can have the effect of selecting the group row, or selecting all the children in the group. This is done by setting the attribute:
groupSelectsChildren: {true || false}
When set to false, then selecting the group will select the group node.
When set to true, then selecting the group will either select or deselect all of the children.
The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the selectedRows list.
The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than two columns for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.
In Addition: you could add this on the col definition
checkboxSelection:
Set to true to render a selection checkbox in the column.
What say einav is true however i think he forgot the very base :
set the property rowSelection:'single' or rowSelection:'multiple' on gridOptions if you want to have selection enabled :)
The attribute checkboxSelection is only for columns not grid options.
The following properties are relevant to selection:
rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection: Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row. Normal behaviour with the grid disallows deselection of nodes (ie once a node is selected, it remains selected until another row is selected in it's place).
suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select when the row is clicked.
From the same link given by Einav