How to group by 2 columns, but have the values on the same row

Question

Not sure how to exactly explain this in words, but I think with a couple of examples it will make sense

In this first example, I am grouping by just one column, location. In the location fields, I am using spaces in the path, ie location: ['Home', ''], (1 space), location: ['Home', ' '], (2 spaces) so I can have 2 other columns as "details" of the main row (ie in this example cleaner type and cleaner weight)

It looks like this:

Perhaps there is a better way to do this, but this would work in the above if I just wanted to group by the one column.

However, I actually want to group by two columns, but only have those 2 detail (child) records "nested").

In the above, I also want to group by the room, but NOT have room as a nested row.

So, in the above I have (location=Home, room=room1), but I may also have (location=Home, room=room2), ie I have room2

eg would like like this:

I have tried all sorts of things, but just cannot get this view (I always end up with unwanted nestings), eg this is what I don't want:

Plnkr link

Is there a way to do this sort of view?

Answer 1

I found the way to do this from this post.

So in this example, you can use a completely different property not shown in the grid at all for getDataPath to control the grouping, and then use valueGetter to put what you want in the grouped column.

So I can have the following....

    var gridOptions = {
        columnDefs: [
            // we're using the auto group column by default!
            { field: 'room',resizable: true, },
            { field: 'cleanertype', resizable: true, },    
            { field: 'cleanerweight',aggFunc: 'sum', resizable: true, },
            { field: 'totalweight', resizable: true, },
        ],
        defaultColDef: {
            flex: 1,
        },

        autoGroupColumnDef: {
            headerName: 'location',
            sortable: true,
            resizable: true,
            filter: 'agTextColumnFilter',
            valueGetter: (params) => {
                return params.node.data.location; // <--- what to show in the group column
            },
            cellRendererParams: {
                suppressCount: true,
            },
        },
        rowData: rowData,
        treeData: true, // enable Tree Data mode
        animateRows: true,
        groupDefaultExpanded: -1, // expand all groups by default
        getDataPath: function (data) {
            return data.grouping;  // <= how to group/nest
        },
    };

and the data...

        var rowData = [
        // Home/room1
        {
            grouping: ['1'],
            location: 'Home',
            room: 'room1',
            cleanertype: '',    
            totalweight: 60
        },
        {
            grouping: ['1', '1'],    
            cleanertype: 'type1',
            cleanerweight:10,
        },
        {
            grouping: ['1', '2'],    
            cleanertype: 'type2',
            cleanerweight:10,
        },
        // Home/room2
        {
            grouping: ['2'],
            location: 'Home',
            room: 'room2',
            cleanertype: '',    
            totalweight: 60
        },
        {
            grouping: ['2', '1'],   
            cleanertype: 'type1',
            cleanerweight:10,
        },
        {
            grouping: ['2', '2'],    
            cleanertype: 'type2',
            cleanerweight:10,
        },

        {
            grouping: ['3'],
            location: 'Work',
            room: 'room1',
            cleanertype: '',
            cleanerweight: 30,
            totalweight: 60
        },
        {
            grouping: ['3', '1'],               
            cleanertype: 'general',
            cleanerweight:10,
        },

        {
            grouping: ['3', '2'],               
            cleanertype: 'heavyduty',
            cleanerweight: 10,
        },          
    ];

So I am using grouping to control the grouping/nesting, and works perfectly, and is exactly what I was after.

Can see the working example here.