Bryntum Support Forums

Hi Team ,

I am using the Bryntum Taskboard in React. I want to make an API call whenever I hide or unhide any column at my frontend using the top bar button (type: "columnpickerbutton" to

Can you please help me with this?

Please find below a screen recording for your reference.

Hi,

Here is how you could achieve this

        { type : 'columnpickerbutton', menu : {
            onItem() {
                console.log('fires');
                // make an api call
            }
        } }

https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnPickerButton#config-menu

How will I get all the selected columns?

Yes. sure. Here is a simple code snippet of how you can achieve that

            onItem : (event) => {
                const taskboard = event.menu.owner.parent.parent;
                const records = [...taskboard.columns.records];
                const filterRecords = records.filter(item => item.hidden !== true);
                console.log(filterRecords);
            }

The above solution worked for me, as I was able to make an API call with selected columns.

Now, when I refresh the page after making an API call, I will get a selected columns array from the backend. Now, depending upon which columns are present in that array, I want to show only those columns that are selected in the column picker button.

But in my case, by default, all the values of the colorpicker button are selected.

Please find below  attached screen recording for your reference.

Hi suhas.kachare,

If you have that list of visible columns somewhere, you need to apply the state to your taskboard, as well as apply value to your picker.
We could give you more specific code if you will share with us your solution.
In two words, you need to go throw https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoard#property-columns and change state accordingly

Also please take a look on another solution, use State mixin and save state of taskboard and apply state on reload.
Docs
https://bryntum.com/products/taskboard/docs/api/Core/mixin/State
https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#function-applyState
https://bryntum.com/products/taskboard/docs/api/Core/mixin/State#function-getState
We also have demo for Grid that might be useful for you https://bryntum.com/products/grid/examples/state/

From the backend, I am getting the following information regarding selected columns.

selectedLanes: ["Resolved", "Closed", "Reopened"]

So can you please guide me on how I can apply the state to my Taskboard as well as apply value to my picker?

Hi,

You could do something like this for example

const visibleColumns = ['todo', 'done'];
visibleColumns.forEach(item => {
    taskBoard.columns.forEach(column => {
        if(column.data.text.toLowerCase() === item) {
            column.hidden = false;
        } else {
            column.hidden = true;
        }
    })
})