I am new to Ag-grid, I've carefully read the doc of ag-grid but I can't find any section or explanation of what I need. So, I want to be able to group the rows with a particular field of my data (id) and display the name instead.
As you can see on this picture I am able to group by Id but I want to group by Id and display the name instead.
Here is my columns definition, as you can see I group by leaseId and I want to display the leaseName instead.
columnDefs = [
{
headerName: 'Leases',
showRowGroup: true,
field: 'leaseId',
cellRendererParams: {
checkbox: true
}
},
{
headerName: 'Property Name',
field: 'property.name',
cellRendererParams: { checkbox: true },
headerCheckboxSelection: params => this.allowSelect
},
{
headerName: 'Lease Name',
field: 'leaseName'
},
{
headerName: 'Tenant Name',
field: 'tenantName'
},
{
headerName: 'Suite Name',
field: 'suiteName'
},
{
headerName: 'Commence Date',
field: 'commenceDate'
},
{
headerName: 'Commence Name',
field: 'commenceName'
},
{
headerName: 'Expiry Date',
field: 'expiryDate'
}
];
Any help will be nice :), I can provide a stackblitz if needed.
In gridOptions, use groupRowInnerRenderer to set display value for row-grouping header.
Source: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup
In my case, I needed to access a different object property for the display than the one I was using for the grouping. Here is how I did it:
cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
innerRenderer: (params) => {
return params.node.allLeafChildren[0].data
.[CustomPropertyName]
},
},
I accessed an object in the row group. I'm sure there's a more textbook way of doing this, but this worked for me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.