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
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
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!
All the best,
Alex
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
All the best,
Alex