TreeGroup

Specify as true to make generated parents start expanded.

True to hide grouped columns. Only supported when using String to define levels.

An array of model field names or functions used to determine the levels in the resulting tree.

When supplying a function, it will be called for each leaf in the original data, and it is expected to return an atomic value used to determine which parent the leaf will be added to at that level.

const grid = new TreeGrid({
    features : {
        treeGroup : {
            levels : [
                // First level is determined by the value of the status field
                'status',
                // Second level by the result of this function
                // (which puts percentdone 0-9 in one group, 10-19 into another and so on)
                record => (record.percentDone % 10) * 10
            ]
        }
    }
});

The function form can also be used as a formatter/renderer of sorts, simply by returning a string:

const grid = new TreeGrid({
    features : {
        treeGroup : {
            levels : [
                record => `Status: ${record.status}`
            ]
        }
    }
});

Assigning null restores the tree structure to its original state.

CSS class to apply to the generated parents.

A function letting you format the text shown in the generated parent group levels. This method will be provided with the value produced by the column representing the grouped level. Each column's renderer method will be provided an extra isTreeGroup param to indicate that the value will be used for a generated parent. cellElement and other DOM specific args will be in the context of the tree column.

const grid = new Grid({
    features : {
        treeGroup : {
            hideGroupedColumns : true,
            levels             : [
                'priority'
            ],
            parentRenderer({ field, value, column, record }) {
                // For generated group parent, prefix with the grouped column text
                return column.text + ': ' + value;
            }
        }
    }
})

Optional sort function for the generated parent tree nodes.

const grid = new Grid({
    features : {
        treeGroup : {
            parentSortFn(parentA, parentB) {
                 return parentB.name.localeCompare(parentA.name, undefined, { numeric : true });
            }
        }
    }
})

Indicates if the feature has applied grouping and the component uses a transformed version of the store.

An array of model field names or functions used to determine the levels in the resulting tree.

When supplying a function, it will be called for each leaf in the original data, and it is expected to return an atomic value used to determine which parent the leaf will be added to at that level.

const grid = new TreeGrid({
    features : {
        treeGroup : {
            levels : [
                // First level is determined by the value of the status field
                'status',
                // Second level by the result of this function
                // (which puts percentdone 0-9 in one group, 10-19 into another and so on)
                record => (record.percentDone % 10) * 10
            ]
        }
    }
});

The function form can also be used as a formatter/renderer of sorts, simply by returning a string:

const grid = new TreeGrid({
    features : {
        treeGroup : {
            levels : [
                record => `Status: ${record.status}`
            ]
        }
    }
});

Assigning null restores the tree structure to its original state.

The original store used by the component before applying grouping. Use this to modify / load data while tree grouping is active.

Clears the previously applied transformation, restoring data to its initial state.

Yields the same result as assigning null to levels.

// Restore original data
grid.clearGroups();

Transforms the data according to the supplied levels.

Yields the same result as assigning to levels.

// Transform into a tree with two parent levels
grid.group('status', record => (record.percentDone % 10) * 10);