TreeCombo

A powerful Combo box using a TreeGrid as its drop down widget. You can define your own set of columns to display and use all the regular features of the Grid.

Tree combo

//<code-header>
fiddle.title = 'Tree combo';
//</code-header>
new TreeCombo({
    labelPosition : 'above',
    label         : 'Choose tasks with a TreeGrid picker',
    width         : '45em',
    appendTo      : targetElement,
    value         : [1],
    picker        : {
        columns : [
            { type : 'tree', text : 'Tasks', field : 'name', flex : 1 },
            { type : 'percent', text : '% Done', field : 'percentDone', width : 130 },
            { text : 'Priority', field : 'prio' }
        ]
    },
    chipView : {
        itemTpl(record) {
            return StringHelper.xss`${record.name}`;
        }
    },
    store : {
        fields : [
            'prio',
            'percentDone'
        ],
        data : [
            {
                id       : 1,
                name     : 'Development Tasks',
                expanded : true,
                children : [
                    { id : 11, name : 'Improve React docs', prio : 'High', percentDone : '75' },
                    { id : 12, name : 'Build Angular module', prio : 'Low', percentDone : '100' },
                    { id : 13, name : 'Create Vue project', prio : 'Low', percentDone : '50' }
                ]
            },
            {
                id   : 2,
                name : 'Customer meeting',
                prio : 'Normal'
            },
            {
                id       : 3,
                name     : 'Customer Tasks',
                expanded : true,
                children : [
                    { id : 14, name : 'Intro meeting', prio : 'Normal', percentDone : '75' },
                    { id : 15, name : 'Build POC', prio : 'High', percentDone : '50' },
                    { id : 16, name : 'Documentation', prio : 'Low', percentDone : '25' }
                ]
            }
        ]
    }
});

new TreeCombo({
    label    : 'Pick task(s)',
    width    : '30em',
    appendTo : document.body,
    picker   : {
        // Define the columns to show in the grid
        columns : [
            { type : 'tree', text : 'Tasks', field : 'name', flex : 1 },
            { text : 'Priority', field : 'prio' }
        ]
    },
    chipView : {
        // Render the chips in the combo field
        itemTpl(record) {
            return StringHelper.xss`${record.name}`;
        }
    },
    store : {
        fields     : [
            'prio'
        ],
        data : [
            {
                name     : 'Development Tasks',
                expanded : true,
                children : [
                    { id : 1, name : 'Improve React docs', prio : 'High' },
                    { id : 2, name : 'Build Angular module', prio : 'Low' },
                    { id : 3, name : 'Creat Vue project', prio : 'Low' }
                ]
            },
            { name : 'Customer meeting', prio : 'Normal' },
            {
                name     : 'Customer Tasks',
                expanded : true,
                children : [
                    { id : 4, name : 'Intro meeting', prio : 'Normal' },
                    { id : 5, name : 'Build POC', prio : 'High' },
                    { id : 6, name : 'Documentation', prio : 'Low' }
                ]
            }
        ]
    }
});

Use as a cell editor

You can use the TreeCombo as a cell editor in a Grid. In the following example, we use the TreeCombo as a cell editor for the Org unit column:

Tree combo cell editor

//<code-header>
fiddle.title = 'Tree combo cell editor';
//</code-header>
class User extends Model {
    static fields = [
        { name : 'id', type : 'int' },
        { name : 'name', type : 'string' },
        { name : 'email', type : 'string' },
        { name : 'phone', type : 'string' },
        { name : 'orgUnit', type : 'int' }
    ];
}

const grid = new Grid({
    appendTo : targetElement,
    height   : 300,
    store    : {
        modelClass : User,
        data       : [
            {
                id      : 1,
                name    : 'Alice Johnson',
                email   : '[email protected]',
                phone   : '555-123-2414',
                orgUnit : 11
            },
            {
                id      : 2,
                name    : 'Bob Smith',
                email   : '[email protected]',
                phone   : '555-567-2158',
                orgUnit : 12
            },
            {
                id      : 3,
                name    : 'Charlie Brown',
                email   : '[email protected]',
                phone   : '555-901-1252',
                orgUnit : 11
            },
            {
                id      : 4,
                name    : 'Diana Miller',
                email   : '[email protected]',
                phone   : '555-345-1216',
                orgUnit : 22
            },
            {
                id      : 5,
                name    : 'Ethan Davis',
                email   : '[email protected]',
                phone   : '555-789-2020',
                orgUnit : 21
            }
        ]
    },
    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'Email', field : 'email', flex : 1, editor : { inputType : 'email' } },
        { text : 'Phone', field : 'phone', flex : 1, editor : { inputType : 'tel', inputAttributes : { pattern : '[0-9]{3}-[0-9]{3}-[0-9]{4}' } } },
        {
            id       : 'orgUnit',
            text     : 'Org Unit',
            field    : 'orgUnit',
            flex     : 1,
            renderer : ({ value, column }) => column.editor.store.getById(value)?.name,
            editor   : {
                type   : 'treecombo',
                picker : {
                    // Define the columns to show in the grid
                    columns : [
                        { type : 'tree', text : 'Org unit', field : 'name', flex : 1 }
                    ]
                },
                items : [
                    {
                        id       : 1,
                        name     : 'Electronics',
                        expanded : true,
                        children : [
                            { id : 11, name : 'Mobile Phones' },
                            { id : 12, name : 'Laptops' }
                        ]
                    },
                    {
                        id       : 2,
                        name     : 'Home Appliances',
                        expanded : true,
                        children : [
                            { id : 21, name : 'Refrigerators' },
                            { id : 22, name : 'Washing Machines' }
                        ]
                    }
                ],
                multiSelect  : false,
                displayField : 'name',
                valueField   : 'id',
                editable     : true
            }
        }
    ]
});

grid.startEditing({ id : 1, columnId : 'orgUnit' });