[REACT] is change column api call possible?

[chrambes]

Hello,

Just wondering if I can add a customised api call to this 'Change column' action, so that the change column action can sync to the backend?

2024-12-06_12-10-01.png (19.48 KiB) Viewed 431 times

Thanks.

[tasnim]

Hi,

What is your expected behavior on that? This menu is generated according the number of columns that the TaskBoard has.
You can check the docs here https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu

[chrambes]

Hi,

What is your expected behavior on that? This menu is generated according the number of columns that the TaskBoard has.
You can check the docs here https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskMenu

Hello @tasnim, this is the expected behaviour:

2024-12-06_15-04-26 (1).gif (292.57 KiB) Viewed 421 times

And I want to add a custom api for this action so that, not only the ui change is visible, also the change is synced with downstream. Is there a way that I can do that?

[tasnim]

You could achieve it by adding an API call inside the onItem

    features : {
        taskMenu : {
            items : {
                column : {
                    onItem({ taskRecord, item, source }) {
                        if (item.isColumn) {
                            taskRecord.setValue(source.columnField, item.ref);

                        item.parent.items.forEach(sibling => {
                            if (sibling !== item) {
                                sibling.checked = false;
                            }
                        });
                    }
                    // make an API call here
                }
            }
        }
    }
},

[chrambes]

You could achieve it by adding an API call inside the onItem

    features : {
        taskMenu : {
            items : {
                column : {
                    onItem({ taskRecord, item, source }) {
                        if (item.isColumn) {
                            taskRecord.setValue(source.columnField, item.ref);

                        item.parent.items.forEach(sibling => {
                            if (sibling !== item) {
                                sibling.checked = false;
                            }
                        });
                    }
                    // make an API call here
                }
            }
        }
    }
},

@tasnim this works like a charm! Thank you so much