configure renderer for tree type column fails

[pincherhgz]

trying to configure a renderer for a tree type column

{
                    text   : 'objectName',
                    field  : 'objectName',
                    width  : 400,
                    type   : 'tree',
                    renderer({ value, record }) {
                        if (record.isLeaf) {
                            return [
                                {
                                    tag       : 'img',
                                    className : 'avatar',
                                    src       : record.data.icon
                                },
                                record.data.objectName
                            ];
                        }
                        else {
                            return record.data.objectName;
                        }
                    },
                    //locked : true //Set locked to true then the column will be displayed on the left side of the grid
                }

fails with exception

{
    "stack": "Error: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.\n    at ha.syncAttributes (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:346501)\n    at ha.performSync (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:344107)\n    at ha.insertElement (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:347964)\n    at ha.syncChildren (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:350087)\n    at ha.performSync (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:344169)\n    at ha.insertElement (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:347964)\n    at ha.syncChildren (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:350087)\n    at ha.performSync (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:344169)\n    at ha.sync (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:10:343648)\n    at Iv.renderCell (http://localhost:8090/WEB7/WEBApp/3rdParty/Bryntum/grid.umd.min.js:28:122917)"
}

configuring the renderer for a normal type column works

[marcio]

Hey pincherhgz,

It's because you need to return a DomConfig object instead of an array, as you'll see in the documentation here https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-renderer.

You can change this to make it work

 renderer({ value, record }) {
                if (record.isLeaf) {
                    return {
                        children : [
                            {
                                tag       : 'img',
                                className : 'avatar',
                                src       : record.data.icon
                            },
                            record.data.objectName
                        ]
                    };
                }
                else {
                    return record.data.objectName;
                }
            }

[pincherhgz]

thanks for your reply, just for my understanding, we did take that portion of code from your example (Tree Grouping Demo):

{
            text   : 'Manager',
            field  : 'manager',
            flex   : 2,
            editor : {
                type       : 'combo',
                editable   : false,
                autoExpand : true,
                items      : [
                    'Daniel Thompson',
                    'Linda Rothpfeffer',
                    'Steve Rogerson'
                ]
            },
            renderer({ value, record }) {
                if (record.isLeaf) {
                    const image = managerImages[value];

                return [
                    {
                        tag       : 'img',
                        className : 'avatar',
                        src       : `../_shared/images/users/${image}`
                    },
                    value
                ];
            }
            else {
                return '';
            }
        }
    }

[marcio]

Hey picherhgz,

I created a ticket for fix this on tree column type https://github.com/bryntum/support/issues/5920

For now, as a workaround, you can use the approach that I suggested.

Thanks!

[marcio]

Hey pincherhgz,

Just a quick note, record.data is a private API and should not be used. You should access directly record.icon and record.objectName.

[pincherhgz]

thanks for the info, Marcio