Assign the colId to the pinnedBottomRowData property within Ag Grid

Question

Assign the colId to the pinnedBottomRowData property within Ag Grid

I'm facing an issue with displaying data in the pinned row within ag-Grid Vue 2. I am utilizing pinnedBottomRowData to supply data for the pinned row, but despite the pinned row being visible, it remains empty. The problem arises from using dot notation in the field property of my JSON file data, like this:

field: "supplier.number"

. Unfortunately,

this.gridApi.setPinnedBottomRowData

does not support dot notation, leading me to add

colId: "supplierNumber"

. However, even with this change, the issue persists. When I remove the dot notation and replace it with

field: "supplierNumber"

, it works fine. Sadly, modifying the JSON directly is not an option as the data comes from an external source.

The last resort would be creating a new object with the data from the JSON, though I prefer to avoid this workaround if possible. Can someone assist me with resolving this dilemma?

Below is 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 Definitions:

   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);
    },

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);
    },

javascript vue.js vuejs2 ag-grid ag-grid-vue

Answer 1

Answer №1

If you want to avoid directly modifying the JSON data, you can implement a solution like the following:

generateData(prefix, dataList) {
  let calculationColumns = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
  let accumulatedValues = {};
  calculationColumns.forEach(col => { accumulatedValues[col] = 0 });
  calculationColumns.forEach(col => {
    dataList.forEach(item => {
      const fields = col.split('.');
      let value = item;
      fields.forEach(field => {
        if (value && typeof value === 'object') {
          value = value[field];
        }
      });
      accumulatedValues[col] += value || 0;
    });
  });

  let finalResult = {};

  calculationColumns.forEach(col => {
    finalResult[col] = prefix + accumulatedValues[col];
  });

  this.gridApi.setPinnedBottomRowData([finalResult]);
},

Answer 2

If you want to avoid directly modifying the JSON data, you can implement a solution like the following:

generateData(prefix, dataList) {
  let calculationColumns = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
  let accumulatedValues = {};
  calculationColumns.forEach(col => { accumulatedValues[col] = 0 });
  calculationColumns.forEach(col => {
    dataList.forEach(item => {
      const fields = col.split('.');
      let value = item;
      fields.forEach(field => {
        if (value && typeof value === 'object') {
          value = value[field];
        }
      });
      accumulatedValues[col] += value || 0;
    });
  });

  let finalResult = {};

  calculationColumns.forEach(col => {
    finalResult[col] = prefix + accumulatedValues[col];
  });

  this.gridApi.setPinnedBottomRowData([finalResult]);
},

Assign the colId to the pinnedBottomRowData property within Ag Grid

Answer №1

Similar questions

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

angular2 : problem encountered with communication to rest api

jquery plugin for creating Excel-like filters

The jquery selector fails to retrieve all elements

Issue with setting and showing the PHP data array within the vue.js variable

Tips for achieving expansion of solely the clicked item and not the whole row

Having trouble generating JSON data within an asynchronous loop using Vuejs and FileReader?

Efficient management of jQuery variables

Guide on linking an id with a trigger function in HTML and JavaScript

Establishing session management for tasks in Node.js

The submitEvent.target cannot be converted to formdata in Vue

Updating values of nested objects by ID using Mongoose

Express.js Issue: Error in JSON Object Returned When Date Parameter is Empty

How to create a freeze panes feature like MS Excel using HTML and CSS

The BeanStub initialization failed due to a missing bean reference to frameworkOverrides

Looking to change the date format from 24/05/2021 to 24/May/2021 using jQuery or JavaScript?

Linking Java objects with Node.js variables

Using the React key attribute for components without distinct identifiers

Learn how to access the media.navigator.enabled value of Firefox using Javascript

Angular 2: Encounter with 504 Error (Gateway Timeout)