简体   繁体   中英

Using ag grid, try to row group by a value and display an other one

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM