I’m having an issue with displaying data in the pinned row in ag-Grid Vue 2. I’m using pinnedBottomRowData to provide data for the pinned row, but the row remains empty even though the pinned row is visible. Since my data comes from a JSON file, I’m using dot notation in the field: property like this: field: "supplier.number". However, this.gridApi.setPinnedBottomRowData doesn’t work with dot notation, which is why I added colId: "supplierNumber". But even with that, it’s not working. If I remove the dot notation and use field: "supplierNumber", then it works. I can’t modify the JSON because I get it from an external source.
The worst-case scenario would be creating a new object with the data from the JSON, but I’d like to avoid that for now. Can anyone help me with this problem?
Here are my Code:
Ag Grid
<ag-grid-vue
style="flex: auto; flex-direction: row; height: 650px"
:class="cssClass"
:columnDefs="columnDefs"
:rowData="supplierList"
:gridOptions="columnOptions"
:alwaysShowHorizontalScroll="true"
@grid-ready="onGridReady"
></ag-grid-vue>
column defs:
columnDefs: [
{
headerName: "Information",
children: [
{
headerName: "Description",
colId: 'supplierDesc',
field: "supplier.desc",
},
{
headerName: "number",
colId: "supplierNumber",
field: "supplier.number"
},
],
},
{
headerName: "Header2",
children: [
{
headerName: "Supplier Budget",
colId:"supplierBudget",
field: "year2024.budget",
cellRenderer: (params) => this.currencyFormatter(params.value, "€"),
},
],}, ],
function onGridReady
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.createData('Total:', this.supplierList);
},
and this is the createData function
createData(prefix,list) {
let calcTotalCols = ['supplierDesc', 'supplierNumber','supplierBudget'];
let total = [{}];
// initialize all total columns to zero
calcTotalCols.forEach(params => { total[0][params] = 0 });
// calculate all total columns
calcTotalCols.forEach(params => {
list.forEach(line => {
total[0][params] += line[params];
});
});
let result = [];
result.push({
supplierDesc: prefix + total[0]['supplierDesc'],
supplierNumber: prefix + total[0]['supplierNumber'],
supplierBudget: prefix + total[0]['supplierBudget'],
});
this.gridApi.setPinnedBottomRowData(result);
},
To avoid modifying the JSON data directly, you can do something like this:
createData(prefix, list) {
let calcTotalCols = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
let total = {};
calcTotalCols.forEach(col => { total[col] = 0 });
calcTotalCols.forEach(col => {
list.forEach(line => {
const fields = col.split('.');
let value = line;
fields.forEach(field => {
if (value && typeof value === 'object') {
value = value[field];
}
});
total[col] += value || 0;
});
});
let result = {};
calcTotalCols.forEach(col => {
result[col] = prefix + total[col];
});
this.gridApi.setPinnedBottomRowData([result]);
},