Now I have a column eg name is "age"
{headerName: 'age', field: 'age', filter: 'agNumberColumnFilter', aggFunc: 'sum'}
I add a sum aggFunc on it, so the result of header name is changed to "sum(age)"
However, I still want to show "age", how can I implement this?
Thank you very much
Related
I am trying to set AG Grid header style using headerClass:"ag-grid-total-header" but it overrides type: 'numericColumn' - it shows the header cell value left aligned.
columnDef:
{ headerName: 'Total', field: 'Total', width: 125, sortable: true, type: 'numericColumn', headerClass:"ag-grid-total-header"}
CSS:
.ag-grid-total-header {
text-align:right; /* It does not work */
background-color: red; /* This works */
}
Is there any way to apply header style while preserving numericColumn type?
stackblitz:
https://stackblitz.com/edit/angular-ag-grid-angular-huk1fp?file=app/my-grid-application/my-grid-application.component.ts
EDIT:
It works if I add headerComponentParams. However, the sorting does not work if I add headerComponentParams.
headerComponentParams : {
template:
'<div class="ag-cell-label-container" role="presentation">' +
'<span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
'</div>'
}
The header class that is used for a numeric type header is ag-numeric-header. So, apply both your class ag-grid-total-header and ag-numeric-header classes to your column. Change your column definition to:
{
headerName: "Price",
field: "price",
type: "numericColumn",
headerClass: ["my-header-class", 'ag-numeric-header']
},
Demo.
I'm using ag-grid in Angular9 project. I'm using Transactions to do CRUD operations in grid when my backend request resolve. I need to provide RowNodeId myself, i dont want to use object-references as i have large data set.
Thing is, i've provided the ID and i can add/update item in the grid but i'm unable to delete the item. In Doc it mentions, you only need to provide id to remove the item but i'm getting the following error.
Here's the code.
class HostAppListPage
{
#ViewChild('agGrid', {static: true}) grid:AgGridAngular;
constructor()
{
}
ngOnInit()
{
this.grid.getRowNodeId = (data) => {
return data.entityId;
};
this.columns = [
{headerName: 'App Name', field: 'name', rowDrag: true, headerCheckboxSelection: true, checkboxSelection: true},
{headerName: 'App Id', field: 'id'},
{headerName: 'Compatibility', field: COMPATIBILITY'},
{headerName: 'Creation', field: 'createdAtToString'},
{headerName: 'Last Update', field: 'updatedAtToString'}
];
}
deleteRow()
{
let ids = this.gridApi.getSelectedNodes()
// .map((row) => {
// return {id: row.entityId}
// return row.entityId;
// });
console.log(ids);
this.grid.api.applyTransaction({remove: ids});
}
I tried both with and without map statement, nothing worked
but my Add and Update works fine.
Replace map with following code.
.map((row) => {
return {entityId: row.data.entityId};
});
it should be the the same field (entityId) which i set in getRowNodeId function.
In a typical situation, where one does not define a getRowNodeId, one should be able to do:
const removeData: any[] = [{id: rowNode0.id}, {id: rowNode1.id}, ...];
applyTransaction({remove: removeData});
where rowNode0, rowNode1, etc. are the nodes you want to remove.
However when you provide your own getRowNodeId callback, ag-grid will fetch the id's by applying your callback on the data you provided. Therefore, the name(s) in the data must match those used in your callback. That's why return {id: row.entityId} doesn't work, but return {entityId: row.entityId} does.
In other words, if one defines:
this.grid.getRowNodeId = (data) => {
return data.column1 + data.column5 + data.column2;
};
Then one would need to provide
const removeData: any[] = [
{column1: 'a1', column2: 'b1', column5: 'c1'},
{column1: 'a2', column2: 'b2', column5: 'c2'},
{column1: 'a3', column2: 'b3', column5: 'c3'},
];
so that ag-grid would have all the names it needs to find the id's via the given getRowNodeId.
Can somebody suggest a way to get values in cellEditorParams from an api for agRichSelectCellEditor.
what i have is
{
headerName: "Name",
field: "Name",
cellRenderer: 'keyValueCellRenderer',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: (params) => {
let url ='/customers/new-customers;
if (params.data.CustomerType && params.data.CustomerType.Id)
url = url + '?type=' + params.data.CustomerType.Id;
// get data from url and have it pushed to editor select list
},
keyCreator: keyValueFilter,
filter: 'agSetColumnFilter',
editable: true, sortable: true
},
function keyValueFilter(param) {
return param.data && param.data.Text ? param.data.Text : ''
}
I have seen example for 'Reference Data' on ag-grid but that seems simple as data are already available before editing.
This code is in plain javascript but a solution in angular would be fine too.
Code (sorry it working in editor, not sure how use stackblitz )
https://stackblitz.com/edit/js-a4dkax
Thanks
I am trying to implement combobox select with "agRichSelectCellEditor" in Anuglar 8 and getting following error in console while trying to edit the field.
For reference: I am following https://plnkr.co/edit/PgRoxXgx7NL5epn2B1X9?p=preview this is an example.
{
headerName: "Prefix Code",
field: "prefixCode",
filter: true,
editable: true,
cellRenderer: "prefixCodeRenderer",
cellEditor: "agRichSelectCellEditor",
cellEditorParams: {
values: [1, 2, 3],
cellRenderer: "prefixCodeRenderer"
}
}
ERROR TypeError: Cannot read property 'componentFromFramework' of null
You probably have forgot to define the Framework components like the example
this.frameworkComponents = {
moodRenderer: MoodRenderer,
moodEditor: MoodEditor,
numericEditor: NumericEditor
};
Or if you did, please link a project with the code that is not working.
Only the first column header is being drawn correctly, all subsequent items in the columnDef array are drawn below it. If I populate the table with data, all column data is stacked to the left as well.
Here's what it looks like; the gray band in the row, below Country is actually moving down, as part of the framework.setTimeout() function in ag-grid.js.
The JS looks like:
gridOptions.columnDefs = [
{ headerName: 'Country', field: 'country' },
{ headerName: 'City', field: 'city' },
{ headerName: 'Jan', field: 'jan_act' },
{ headerName: 'Feb', field: 'feb_act' },
{ headerName: 'Mar', field: 'mar_act' },
{ headerName: 'Apr', field: 'apr_act' },
{ headerName: 'May', field: 'may_act' }];
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
I'm using ag-grid.noStyle.js v7.0.2 and think I have all dependencies loaded correctly for ag-grid. Am not using React or Angular.
Ah, found it! It's the <!DOCTYPE html> tag.
Problem was immediately resolved by changing the height of my div to pixel based, not %, e.g.
<div id="myGrid" style="height: 400px;" class="ag-fresh"></div>
Found it by going back to absolute basics after the JavaScript Datagrid example also failed to work.
Working with the CSS height property and percentage values.