Is there an option to override the following in ag-grid with a font-awesome icon?
ag-icon-small-right
ag-icon-tick
For e.g., I can replace the menu icon on the column headers with:
icons: {
menu: '<i class="fa fa-bars"/>'
}
in grid options.
I am looking for something similar on the tick mark and the arrow pointing right.
Sure, you can do that... Check out the below ColDef
{
headerName: "Age",
field: "age",
width: 90,
enableValue: true,
icons: {
menu: '<i class="fa fa-arrow-right"/>',
sortAscending: "U",
sortDescending: "D"
}
}
Live example: ag grid custom icon
Hover over the Age column to see the desired icon.
You can try icons from FontAwesome Cheatsheet
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.
enter link description here
I have same kind of colDef definition, and I am using angular 12 and ag-grid version 25.3.0.
I get a way to add my icon.
this.columnDefs = [
{
field: 'test',
width: 150,
icons: {
sortAscending: '<i class="fa fa-sort-alpha-up"/>',
sortDescending: '<i class="fa fa-sort-alpha-down"/>',
},
}];
I prefered this
enter link description here
I am using agSelectCellEditor to imlement a dropdown menu in a particular column cells.
This is the column definition:
{
headerName: "Rattachement",
field: "rattachement",
editable: true,
headerTooltip:
"Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: [
"",
"Audit",
"RA",
"Consulting",
"FA",
"Tax&Legal",
"ICS",
"Taj"
]
}
}
This is how ag-grid renders it:
I have to doubl-click on it in order for the dropdown list to show-up this way:
And then I can select any of the available options.
As you notice, this is really poor rendering and may cause the user to be confused and unable to use the tool that I am building.
So my question is:
Is there any way to make ag-grid show the dropdown menu from the beginnig without having to double-click on the cell so that the user actually knows what to do?
Thanks!
PS: I don't want to use a custom cell renderer, because the options in the cell depend on other variables and the whole thing may get messy if I choose to implement the dropdown list using a customcellRenderer (which I did with other columns where it doesn't cause me any of the mentioned trouble)
This is the same issue which i encountered :).
By default AgGrid doesnt show dropdown columns. If you wish to show it as a dropdown you will have to use cellRenderer just to show the image to notify user that this is dropdown column.
Double click edit can be changed to singleclick or no click edit that option is avaiable.
Set columndef option singleClickEdit : true,
var columnDefs = [
{field: 'name', width: 100},
{
field: 'gender',
width: 90,
cellRenderer: 'genderCellRenderer',
cellEditor: 'agRichSelectCellEditor',
singleClickEdit : true,
cellEditorParams: {
values: ['Male', 'Female'],
}
},]
var gridOptions = {
components: {
'genderCellRenderer': GenderCellRenderer
},
columnDefs: columnDefs,
}
function GenderCellRenderer() {
}
GenderCellRenderer.prototype.init = function (params) {
this.eGui = document.createElement('span');
this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
};
GenderCellRenderer.prototype.getGui = function () {
return this.eGui;
};
DEMO
Hope this helps.
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 have requirement to get a drop down from a column which should have three values. I marked the column as editable with editable: true keyword, even then I am not able to edit. I just need a drop down with two values when i double click on the cell.
{headerName: "O", width: 70, valueGetter: this.geValue, editable: true, cellEditor: 'select',
cellEditorParams: {
values: ['Yes', 'No']}
}
I am using select here but not rick select because i am not using ag-grid enterprise. I am also setting these below properties for all the rows.
suppressCellSelection: true,
suppressMovableColumns: true,
suppressRowClickSelection: false,
I need help to find if I am missing anything here. I am not getting a drop down when I double click on cell.
I could finally figure out why I could not edit the cell even if I declare it editable. Because css is adding a class as shown below
<div class="ag-cell-no-focus ag-cell ag-group-cell ag-cell-not-inline-editing ag-cell-value" colid="O" style="width: 54px; left: 48px;"></div>
I have to remove ag-cell-not-inline editing class from the div. I am not sure how. Is there any option to remove default class from grid options?