Using Tree Grid

The default behavior for the grid component is to display a flat list of records. This behavior can be modified to show data as a hierarchy with a few config changes.

import { Grid } from 'react-redux-grid';

const treeConfig = {
    stateKey: 'tree-grid-1',
    gridType: 'tree', // either `tree` or `grid`,
    showTreeRootNode: false, // dont display root node of tree
    columns: [
        {
            dataIndex: 'category',
            name: 'Category',
            expandable: true // this will be the column that shows the nested hierarchy
        },
        {
            dataIndex: 'categoryCode',
            name: 'Category Code',
            expandable: true // can be set on multiple columns
        },
        {
            dataIndex: 'editable',
            name: 'Editable',
            expandable: false // will be displayed as flat data
        }
    ],
};

const grid = <Grid { ...treeConfig } />;

More Information about Tree

Apart from designating the gridType as tree, the data consumed by grid must be structured differently.

Currently, grid expects the following data structure.

{
    root: {
        id: -1,
        parentId: null,
        children: [
            {
                id: 1,
                parentId: -1,
                name: 'Category 1',
                categoryCode: 'as-ffw-34neh-',
                editable: true,
                children: [
                    {
                        id: 12,
                        parentId: 1,
                        leaf: false // there are children for this record that haven't been fetched yet
                        // ... rest of data
                    },
                    {
                        id: 13,
                        parentId: 1
                        // ... rest of data
                    }
                ]
            }
        ]
    }
}

Important Note, is that children will specify child nodes and that parentId and id are required parameter for each record.

Requesting Data Partials

If a partial data set is loaded into grid on initial render, and a node specifices leaf: false, upon expansion of this node (or a similar node), the dataSource function that has been passed in as a prop will be called with the argument of { parentId: 1 // the id of the clicked node }. If the dataSource is a string, a request will be made with the addition of a querystring param.

For example, if your dataSource url is: /route/to/tree/data

the request will be made to /route/to/tree/data?parentId=1

Loading Data Partials

After making a request for a data partial, with the parentId, the accompanying response will need to specify partial: true.

The data would like like this:

const response = {
      data: [
        {
            id: 11,
            parentId: 1,
            name: 'Category 11',
            editable: false,
            leaf: true,
            categoryCode: '12jf-3h3h-11'
        }
      ],
      partial: true
};