使用ag-grid的Agroup数据

Question

I am currently using ag-grid in my project. Am trying to agroup the data using the agrouping feature.

In my col def I have this:

{headerName: "Parent", field: "ParentID",width: 120,rowGroup:true},
{headerName: "Name", field: "Name"},
{headerName: "Level", field: "Level"},
{headerName: "Active", field: "Active"},
{headerName: "Actions",
     field: "Actions",
     cellRenderer: function (params) {  
         /*Generate a link and return it*/
         return EditLink;
     }
    }

Then, the ag-grid options:

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    },
    animateRows: true,
    enableRangeSelection: true,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true,
    domLayout:'autoHeight',
    rowHeight: 48,
    enableStatusBar: true,
    rowSelection: 'single',
    groupMultiAutoColumn:true,
    groupRemoveSingleChildren:true,
    icons: {
        checkboxChecked: '<img src="data:image/png;base64,SOMECODEHERE"/>'
    }
};

However, I am not getting the expected behaviour, I have the table rendered with the data and the column to agroup the data, but it's not agrouped, it's like ordered but I don't see the button to dropdown the children

Answer 1

Are you sure the ParentID is shared amongst several rows? The groupRemoveSingleChildren option will show no groups if no ids are shared.

You can also try using rowGroupIndex as opposed to rowGroup

ie

this.columnDefs = [
    {headerName: "Clan", field: "clan", editable: true, rowGroupIndex: 0 },

The rowGroupIndex allows sub groups to be defined so you can nest groups (if you need to).

I would also recommend removing the groupRemoveSingleChildren just to see if you get the checkbox or whether the data is at fault..