Our flexible Kanban board for managing tasks with drag drop

Post by suhas.kachare »

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.

Screen Recording 2023-03-23 at 3.47.34 PM.mov
(5.74 MiB) Downloaded 7 times

Post by tasnim »


Here is how you could achieve this

        { type : 'columnpickerbutton', menu : {
            onItem() {
                // make an api call
        } }


Best of luck,

Post by suhas.kachare »

How will I get all the selected columns?

Post by tasnim »

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);

Best of luck,

Post by suhas.kachare »

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.

Screen Recording 2023-03-24 at 12.59.42 PM.mov
(29.04 MiB) Downloaded 6 times

Post by alex.l »

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.
We also have demo for Grid that might be useful for you https://bryntum.com/products/grid/examples/state/

All the best,

Post by suhas.kachare »

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?

Post by tasnim »


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;

Best of luck,

Post Reply