GroupBar

Widget

A widget used to manage grouping of a grid using Group feature or a tree using the TreeGroup feature. Column headers can be drag-dropped on this widget to regroup the data in the grid store. This widget only handles column-based grouping, and doesn't handle custom group functions.

const tree = new TreeGrid({
    appendTo : 'container',
    features : {
        treeGroup : {
            hideGroupedColumns : true,
            levels             : [
                'manager',
                'airline'
            ],
            parentRenderer : (field, data) => `${StringHelper.capitalize(field)}: ${data.name}`
        }
    },

    columns : [
        {
            text  : 'Name',
            field : 'name',
            flex  : 3,
            type  : 'tree'
        },
        {
            text   : 'Airline',
            field  : 'airline',
            align  : 'center',
            flex   : 2,
        },
        {
            type  : 'check',
            text  : 'Domestic',
            field : 'domestic',
            align : 'left',
            flex  : 1
        },
        {
            type  : 'number',
            text  : 'Capacity',
            field : 'capacity',
            flex  : 1
        },
        {
            type  : 'number',
            text  : 'Crew',
            field : 'crew',
            flex  : 1
        }
    ],

    tbar : [
        'Group by',
        {
            type : 'groupbar'
        }
    ]

See also

• Group - Grouping feature for flat data
• TreeGroup - Tree grouping feature