ag-grid grouping not adding expand/collapse controls

7.1k Views Asked by At

I'm trying to show some data that is grouped using ag-grid. The data is being displayed correctly, but it is not grouping the data as it should. I'm using angularJS 1.5.8 and ag-grid 12.0.2. Here is a very simplified version of what I'm trying to do:

function _setGridOptions() {
    var data = [
        {packageID: "one", documentID: "one-one", cost: 1},
        {packageID: "one", documentID: "one-two", cost: 2},
        {packageID: "one", documentID: "one-three", cost: 3},
        {packageID: "two", documentID: "two-one", cost: 4},
        {packageID: "two", documentID: "two-two", cost: 5},
        {packageID: "two", documentID: "two-three", cost: 6}
    ];
    var cols = [
        {
            headerName: "Package ID",
            width: 100,
            field: "packageID",
            rowGroup: true
        },
        {
            headerName: "Document ID",
            width: 100,
            field: "documentID"
        },
        {
            headerName: "Cost",
            width: 100,
            field: "cost"
        }
    ];
    $ctrl.agGridOptions = {
        columnDefs: cols,
        animateRows: true,
        enableRangeSelection: true,
        rowData: data,
        enableSorting: true,
        debug: true,
        enableColResize: true,
        onGridReady: function () {
            $ctrl.agGridOptions.api.sizeColumnsToFit();
        }
    };
    $ctrl.transactionsLoaded = true;
}

And here is what the table looks like:

enter image description here

As you can see there is no "Group" column and there is no expand/collapse control by the group row.

Any ideas what I'm doing wrong?

2

There are 2 best solutions below

0
On

I just realized what the issue is. The "Grouping Rows" feature is an enterprise feature and I am using the free version.

0
On

Actually it is not an Enterprise feature, but it is a free version feature that everyone can use this. Even tree-data feature is can be used with free version how ever only some of extra features are under Enterprise version of Ag-grid. Maybe in the date of question, Row Grouping was available for Enterprise version, I don't know. Now, it is free all.

Although the question is very historical for our field, I will share an answer because of those who are in need to use row grouping Ag-grid in any version.

Actually, your data and your gridOptions definition is quite enough to enable row grouping, to be clear, however the version of Ag-grid you used was very older. If someone take your data and use newer version of Ag-grid, he/she can see that you data is providing the requirement of row grouping.

In short, to applying a row grouping, it is sufficient to declare rowGroup: true in the definition of the column which we want to apply.

gridOptions.columnDefs = [
    { field: "country", rowGroup: true },
    { field: "sport", rowGroup: true },
];

And the data is:

rowData= [
  { 'country': 'United States', 'sport': 'Biking' },
  { 'country': 'United States', 'sport': 'Swimming', },
  { 'country': 'United States', 'sport': 'Swimming' }
  { 'country': 'Turkey',        'sport': 'Swimming', },
  { 'country': 'Turkey',        'sport': 'Swimming' }
  { 'country': 'Brasil',        'sport': 'Football' }
]

More detail, see page: ag-grid.com/javascript-grid-grouping