syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Tree data

Trees display parent-child data, such as folders or organizations, with indentation and expansion controls. Unlike grouping equal values, the parent relationship already exists in the data.

Markdown source Features

How it works and when to use it

Use getDataPath returning a path array, or ID and parent-ID fields. Paths take precedence when both are configured, so choose one rule for each view.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Show an organization with path arrays

Put the path from the root to the current item in each row's path array.

javascript
grid.rowData = [
  { id: 'eng', name: 'Engineering', path: ['Company', 'Engineering'] },
  { id: 'web', name: 'Web', path: ['Company', 'Engineering', 'Web'] },
];
grid.getRowId = row => row.id;
grid.columnDefs = [{ field: 'name', headerName: 'Organization' }];
grid.getDataPath = row => row.path;

Verify the result: Web appears beneath Engineering. Changing path labels is different from changing stable row IDs.

Example 2. Connect through parent IDs

For flat server lists, specify relationship fields instead of converting data into path arrays.

javascript
grid.getDataPath = undefined;
grid.rowData = [
  { id: 'root', parentId: null, name: 'Head office' },
  { id: 'sales', parentId: 'root', name: 'Sales' },
];
grid.treeIdField = 'id';
grid.treeParentField = 'parentId';
grid.treeLabelField = 'name';

Verify the result: id and parentId relationships build the tree. Validate duplicate IDs, cycles, and missing parents before supplying data.

Example 3. Start with a summary

After applying initial data, collapse all branches and expand only the paths you need.

javascript
await grid.collapseAllTreeNodes();
// For the path-based example:
await grid.setTreeNodeExpanded(['Company', 'Engineering'], true);

Verify the result: Leaf nodes have no children to expand. Confirm that the path exists before calling.

Combining features and troubleshooting

Do not reconstruct server parent IDs from tree display order or indentation. Preserve the source relationships separately.

When switching to a non-tree view, clear getDataPath and relationship fields together so previous hierarchy settings do not remain.

Related reading