TreeGroup

Feature

A feature that allows transforming a flat dataset (or the leaves of a hierarchical) into a tree by specifying a record field per parent level. Parents are generated based on each leaf's value for those fields.

This feature can be used to mimic multi grouping or to generate another view for hierarchical data. The actual transformation happens in a new store, that contains links to the original records. The original store's structure is kept intact and will be plugged back in when calling clearGroups. When grouping on a column field, the column´s format method will be used to format the value to group by (relevant for NumberColumn, DateColumn etc.)

Any modification of the links is relayed to the original store. So cell editing and other features will work as expected and the original data will be updated.

This snippet shows how the sample dataset used in the demo above is transformed:

const grid = new TreeGrid({
    // Original data
    data : [
        { id : 1, name : 'Project 1', children : [
            { id : 11, name : 'Task 11', status : 'wip', prio : 'high' },
            { id : 12, name : 'Task 12', status : 'done', prio : 'low' },
            { id : 13, name : 'Task 13', status : 'done', prio : 'high' }
        ]},
        { id : 2, name : 'Project 2', children : [
            { id : 21, name : 'Task 21', status : 'wip', prio : 'high' },
        ]}
    ],

    features : {
        treeGroup : {
            // Fields to build a new tree from
            levels : [ 'prio', 'status' ]
        }
    }
});

// Resulting data
[
    { name : 'low', children : [
        { name : 'done', children : [
            { id : 12, name : 'Task 12', status : 'done', prio : 'low' }
        ]}
    ]},
    { name : 'high', children : [
        { name : 'done', children : [
            { id : 13, name : 'Task 13', status : 'done', prio : 'high' }
        ]},
        { name : 'wip', children : [
            { id : 11, name : 'Task 11', status : 'wip', prio : 'high' },
            { id : 21, name : 'Task 21', status : 'wip', prio : 'low' }
        ]}
    ]}
]

Generated parent records are indicated with generatedParent and key properties. The first one is set to true and the latter one has a value for the group the parent represents.

Summaries

You can also show summaries in each group row, by configuring columns with sum.

new Grid({
    features : { treeGroup : true },
    columns : [
        {
            text  : 'Name',
            field : 'name',
            flex  : 3,
            type  : 'tree'
        },
        {
            type  : 'number',
            text  : 'Capacity',
            field : 'capacity',
            flex  : 1,
            sum   : 'add'
        },
        {
            type  : 'number',
            text  : 'Crew',
            field : 'crew',
            flex  : 1,
            sum   : 'add'
        }
    ]
});

Important information

Using the TreeGroup feature comes with some caveats:

• Generated parents are read-only, they cannot be edited using the default UI.
• Moving nodes manually in the tree is not supported while it is grouped. The linked records have their own parentId fields, not linked to the original records value.
• The generated structure is not meant to be persisted.

This feature is disabled by default.

See also

• Tree - Tree feature for hierarchical data
• Group - Grouping feature for flat data