Bryntum Support Forums

Hi Team,

I need to add a button in my toolbar, to display the columnpicker. I am working off of the Angular advanced gantt demo.

Here is a link to my gantttoolbar.js https://codepen.io/BDHerford/pen/poWKazR

Would it not be better to show a separate list of columns in a menu below your button? Or you want to trigger the column menu as in your screenshot?

Hi Mats,

I'd like my dropdown button in the toolbar to open a list of columns, with checkboxes to hide/show the columns in the grid - Essentially a copy of the columnpicker that you can open by right clicking the column header.

You have to build it by your own.

To have a list of columns you can use gantt.subGrids.locked.columns. It's an entity of https://bryntum.com/docs/gantt/api/Grid/data/ColumnStore
Every column (record of the store) has a name and 'id', so you can fill in your list.
Here is docs to build a menu https://bryntum.com/docs/gantt/api/Core/widget/Menu
To display a checkbox in a MenuItem , you need to specify https://bryntum.com/docs/gantt/api/Core/widget/MenuItem#config-checked
To hide/show column, manage its hidden property. https://bryntum.com/docs/gantt/api/Grid/column/Column#config-hidden

So, if you specify onToggle listener https://bryntum.com/docs/gantt/api/Core/widget/Menu#event-toggle
it will be something like

onColumnToggle({ menu, item, checked }) {
    gantt.subGrids.locked.columns.getById(item.id).hidden = !checked;
}

Good luck with it!

Hi Alex, this was very helpful but I am struggling with implementation.
I have a function in my GanttToolbar.js:

    onColumnLoad({ menu }) {
        // Build list of column names
        const menuList = [];

    // Test
    // console.log(this.gantt.subGrids.locked.columns.data.text)

    this.gantt.subGrids.locked.columns.forEach( i => {
        menu.add(
            {
                text: i.data.text
            }
        )
    });

    // Add list to menu - BREAKS 
    // menu.add(menuList)
    
    // To eventually set hidden property
    //bryntum.query('gantt').subGrids.locked.columns._data[1].data.hidden
    //this.gantt.subGrids.locked.columns.getById(item.id).hidden = !checked;
}

With a listener on the button:

                {
                    type       : 'button',
                    ref        : 'columnButton',
                    icon       : 'b-fa b-fa-columns',
                    cls        : 'edge-toolbar-btn columnBtn',
                    text       : 'Columns',
                    tooltip    : 'Hide Columns',
                    onToggle    : 'up.onColumnLoad', // Defined on line:194

                menu : {
                     // Populate on paint  
                     items : [
                        {test : "dummy",
                        checked : true}
                     ]
                }
            },

You can find the result in the .mov below.

I want the column list to load when you click the button. But I can't seem to get the list to load without putting a checkbox item in the menu.

Is this something you can help me with?

Thanks

Try to use another event for this purposes. As example https://bryntum.com/docs/gantt/api/Core/widget/Button#event-action

Thanks Alex, I was able to get this working.