1 | # Using Tree Grid
|
2 |
|
3 | 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.
|
4 |
|
5 | ````js
|
6 |
|
7 | import { Grid } from 'react-redux-grid';
|
8 |
|
9 | const treeConfig = {
|
10 | stateKey: 'tree-grid-1',
|
11 | gridType: 'tree', // either `tree` or `grid`,
|
12 | showTreeRootNode: false, // dont display root node of tree
|
13 | columns: [
|
14 | {
|
15 | dataIndex: 'category',
|
16 | name: 'Category',
|
17 | expandable: true // this will be the column that shows the nested hierarchy
|
18 | },
|
19 | {
|
20 | dataIndex: 'categoryCode',
|
21 | name: 'Category Code',
|
22 | expandable: true // can be set on multiple columns
|
23 | },
|
24 | {
|
25 | dataIndex: 'editable',
|
26 | name: 'Editable',
|
27 | expandable: false // will be displayed as flat data
|
28 | }
|
29 | ],
|
30 | };
|
31 |
|
32 | const grid = <Grid { ...treeConfig } />;
|
33 |
|
34 | ````
|
35 |
|
36 | ### More Information about Tree
|
37 |
|
38 | Apart from designating the `gridType` as `tree`, the data consumed by grid must be structured differently.
|
39 |
|
40 | **Currently**, grid expects the following data structure.
|
41 |
|
42 | ````js
|
43 | {
|
44 | root: {
|
45 | id: -1,
|
46 | parentId: null,
|
47 | children: [
|
48 | {
|
49 | id: 1,
|
50 | parentId: -1,
|
51 | name: 'Category 1',
|
52 | categoryCode: 'as-ffw-34neh-',
|
53 | editable: true,
|
54 | children: [
|
55 | {
|
56 | id: 12,
|
57 | parentId: 1,
|
58 | leaf: false // there are children for this record that haven't been fetched yet
|
59 | // ... rest of data
|
60 | },
|
61 | {
|
62 | id: 13,
|
63 | parentId: 1
|
64 | // ... rest of data
|
65 | }
|
66 | ]
|
67 | }
|
68 | ]
|
69 | }
|
70 | }
|
71 | ````
|
72 |
|
73 | **Important Note**, is that `children` will specify child nodes and that `parentId` and `id` are required parameter for each record.
|
74 |
|
75 | ### Requesting Data Partials
|
76 |
|
77 | 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.
|
78 |
|
79 | For example, if your `dataSource` url is: `/route/to/tree/data`
|
80 |
|
81 | the request will be made to `/route/to/tree/data?parentId=1`
|
82 |
|
83 | ### Loading Data Partials
|
84 |
|
85 | After making a request for a data partial, with the `parentId`, the accompanying response will need to specify `partial: true`.
|
86 |
|
87 | The data would like like this:
|
88 |
|
89 | ````js
|
90 | const response = {
|
91 | data: [
|
92 | {
|
93 | id: 11,
|
94 | parentId: 1,
|
95 | name: 'Category 11',
|
96 | editable: false,
|
97 | leaf: true,
|
98 | categoryCode: '12jf-3h3h-11'
|
99 | }
|
100 | ],
|
101 | partial: true
|
102 | };
|
103 |
|
\ | No newline at end of file |