Column picker showing empty name for column.

[jintech]

Hi,
I have a scenario where I have a column

{
            text  : '',
            icon: 'b-fa b-fa-paw',
            field : 'food',
            flex  : 1,
        },

This column has no text but an icon in the header.
When I select from column picker, i see it as without any text, i want a text here like paw icon column only in column picker not in the header.

Untitled.png (21.55 KiB) Viewed 138 times

How can I do it?
This is the sample online example where I did it, https://bryntum.com/products/grid/examples/basic/

[tasnim]

Hi,

Of course. You'd need to create a custom column picker for it.

Here is an example code snippet

    features : {
        group : false,
        headerMenu : {
            processItems(props) {
                const { items : { columns }, feature : { client : grid } } = props;
                const items = [];

            grid.columns.forEach(column => {
                if (column.text) {
                    items.push({
                        grid,
                        column,
                        text     : column.text,
                        checked  : true,
                        disabled : false,
                        cls      : ''
                    });
 
                }
                else {
                    items.push({
                        grid,
                        column,
                        checked  : true,
                        disabled : false,
                        cls      : '',
                        content  : `
                            <i class="${column.icon}"></i>
                        `
                    });
                }
            });

            // adding the menu items
            columns.menu.items = items;
        },
        items : {
            columns : {
                text   : 'Columns',
                cls    : 'b-separator',
                icon   : 'b-fw-icon b-icon-columns',
                weight : 200,
                menu   : {},
                onToggle(props) {
                    const { menu, item } = props;
                    item.column.hidden = !item.checked;
                }
            },
            // Hide the default column picker
            columnPicker : null
        }
    },
},

And Here is a codepen demo for you https://codepen.io/dv-auntik/pen/gbbGVoE?editors=0010

chrome_2e3HGcxUds.png (52.1 KiB) Viewed 131 times

[jintech]

Thanks tasnim.
There is a small issue though, I have some columns as hidden: true.
So for that, this custom column picker shows it as selected although it is hidden for the grid and not selected.
I have to put check and uncheck again to make it work.

Untitled.png (37.51 KiB) Viewed 123 times

[jintech]

I have fixed it, seems like I had to do checked: !column.hidden:

if (column.text) {
							items.push({
								grid,
								column,
								text     : column.text,
								checked  : !column.hidden,
								disabled : false,
								cls      : ''
							});
	 
					} else {
						items.push({
							grid,
							column,
							checked  : !column.hidden,
							disabled : false,
							cls      : '',
							text  : `${column.id}`
						});
					}

Thanks again