Expandable rows with nested expandable values?

Question

My data contains a column which its value is in JSON format. I would like to accomplish two things:

Expand each row so its values are listed.
Expand a specific value so if its value is in JSON format, the keys/values will be presented also in a nested list inside the list from item 1.

For example:

These are 3 different results:

And this is the first result being expanded:

Would appreciate your help.

have you find any solutions on above problem ? – Manoj Patidar Sep 02 '18 at 09:29 — Manoj Patidar, Sep 02 '18 at 09:29

score 1 · Answer 1 · edited May 23 '17 at 12:31

I've just been implementing ag-grid for the first time, and have a similar use-case to above. Since I only have the free version, I followed the File Browser example which implements nested rows by shaping the data before giving it to the grid (i.e a Model -> ViewModel transformation).

The shape the grid needs is pretty much the standard representation of hierarchical data, you just need a 'children' array of the nested data (this taken from the FileBrowser example):

    {
        folder: true,
        name: 'D:',
        children: [
            {name: 'Game of Thrones s05e01.avi', size: '1034 mb', type: 'Movie', dateModified: '13/03/2014 10:14'},
            {name: 'The Knick s01e01', size: '523 mb', type: 'Text Document', dateModified: '27/11/2012 04:12'},
            {name: 'musicbackup1.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'},
            {name: 'musicbackup2.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'}
        ]
    }

Note, you can have non-nesting columns before the column that toggles the nested rows (a parent-child representation).

To transform your json properties into an array of key-value pairs, see this StackOverflow article Convert object's properties and values to array of key value pairs.

The steps to take to enable nested rows are:

Add cellRenderer property to the column defn that's going to open the nested cells. You might think you need the cellRendererParams property as well, but that's just to add non-text content into the cell.
```
{ headerName: "Name", field: "name", width: 250,
    cellRenderer: 'group'
},
```

Implement getNodeChildDetails in the gridOptions structure. Note that 'file' below is the node data, and file.folder is a flag on the data (not for display) that tells this function if there's nested rows to display.

getNodeChildDetails: function(file) {
    if (file.folder) {
        return {
            group: true,
            children: file.children,
            expanded: file.open
        };
    } else {
        return null;
    }
},

Add an icons object to the gridOptions structure.

icons: {
    groupExpanded: '<i class="fa fa-minus-square-o"/>',
    groupContracted: '<i class="fa fa-plus-square-o"/>'
},

A possible bug

I tried to implement getRowHeight function (in gridOptions), but immediately the nested row toggle stopped working. If I can find the cause, I'll post it here later.

Expandable rows with nested expandable values?

1 Answers1