Our flexible Kanban board for managing tasks with drag drop


Post by lanpeng »

Hi bryntum team
I want to select all swimlane by swimlanePickerButton. How can i do?

Attachments
屏幕截图 2022-08-22 092757.png
屏幕截图 2022-08-22 092757.png (10.1 KiB) Viewed 920 times

Post by tasnim »

Hi,
I've created a Feature Request for this, Here it is https://github.com/bryntum/support/issues/5093

Good Luck :),
Tasnim


Post by lanpeng »

Hi,bryntum team,
Is this function under development? When can it be released?


Post by tasnim »

Hi,
It's currently not on the list of the nearest releases. But until this feature is implemented, you can use this workaround.

First open SwimlanePickerButton.js And inside of the onToggleSwimlane method add the code (follow instructions of the comment):

    onToggleSwimlane({ item }) {
        item.swimlane.hidden = !item.checked;
        // this is what to add below
        let checked = [];
        this.taskBoard.swimlanes.forEach(swimlane => {
            checked.push(!swimlane.hidden);
        });

    item.parent.lastItem.checked = checked.includes(false) ? false : true;
    // this is what to add above
}

Then inside of onMenuBeforeShow method add the code (follow instructions of the comment):

onMenuBeforeShow({ source : menu }) {
        menu.items = this.taskBoard.swimlanes.map(swimlane => ({
            ref     : swimlane.id,
            text    : StringHelper.encodeHtml(swimlane.text),
            checked : !swimlane.hidden,
            swimlane,
            onItem  : 'up.onToggleSwimlane'
        }));
        // this is what to add below
        // select all button checked
        let checked = [];
        this.taskBoard.swimlanes.forEach(swimlane => {
            checked.push(!swimlane.hidden);
        });
        
menu.add({ checked : checked.includes(false) ? false : true, text : 'SELECT ALL', onItem : ({ item }) => { item.parent.items.forEach(i => { this.taskBoard.swimlanes.forEach(swimlane => { swimlane.hidden = !item.checked }); if (i.swimlane) { i.checked = item.checked; } }) } }); // this is what to add above }

Good Luck :),
Tasnim

Attachments
chrome_E17oZ2D8u4.png
chrome_E17oZ2D8u4.png (11.47 KiB) Viewed 845 times

Post by lanpeng »

hi tasnim.
thank you for your reply. I tried your code. But it did not work. may be something wrong with my code .


Post by lanpeng »

please check my screenshot.

Attachments
屏幕截图 2022-09-05 165835.png
屏幕截图 2022-09-05 165835.png (163.61 KiB) Viewed 840 times

Post by tasnim »

Why are you doing console log source it will not work if you want to see what's inside of the source then console log the menu.
Is it what you were asking for? What exactly is the problem you are facing?

Good Luck :),
Tasnim


Post by lanpeng »

Hi tasnim,
I modified the source code according to your method, but didn't add a select all item to the swimlanePickerButton. I think these code did not work. I add

console.log(item)

into the method "onToggleSwimlane". The browser console does not print item after i toggleSwimlane.

Attachments
屏幕截图 2022-09-06 083642.png
屏幕截图 2022-09-06 083642.png (150.29 KiB) Viewed 834 times

Post by tasnim »

Seems like you're using a framework don't use this then. use this one in the tbar:

        { type : 'swimlanepickerbutton', 
                onToggleSwimlane({ item }) {
                    item.swimlane.hidden = !item.checked;
                    // this is what to add below
                    let checked = [];
                    this.taskBoard.swimlanes.forEach(swimlane => {
                        checked.push(!swimlane.hidden);
                    });

                item.parent.lastItem.checked = checked.includes(false) ? false : true;
                // this is what to add above
            },
                onMenuBeforeShow({ source : menu }) {
                    menu.items = this.taskBoard.swimlanes.map(swimlane => ({
                        ref     : swimlane.id,
                        text    : StringHelper.encodeHtml(swimlane.text),
                        checked : !swimlane.hidden,
                        swimlane,
                        onItem  : 'up.onToggleSwimlane'
                    }));
                    // this is what to add below
                    // select all button checked
                    let checked = [];
                    this.taskBoard.swimlanes.forEach(swimlane => {
                        checked.push(!swimlane.hidden);
                    });
                    
                    menu.add({
                        checked  : checked.includes(false) ? false : true,
                        text     : 'SELECT ALL',
                        onItem : ({ item }) => {
                            
                            item.parent.items.forEach(i => {
                                this.taskBoard.swimlanes.forEach(swimlane => {
                                    swimlane.hidden = !item.checked
                                });
                                if (i.swimlane) {
                                    i.checked = item.checked;
                                }
                            })
                        }
                    });
                    // this is what to add above
                }
    }
Attachments
chrome_F5JzbdArE5.gif
chrome_F5JzbdArE5.gif (464.86 KiB) Viewed 833 times

Post by lanpeng »

Thanks, tasnim
The method you provided is effective.But there is a small problem. menu.add(..)will add an item to the end of the swimlane.I want to add it to the first of the swimlane.

Attachments
Snipaste_2022-09-06_14-52-12.jpg
Snipaste_2022-09-06_14-52-12.jpg (70.26 KiB) Viewed 829 times

Post Reply