Our state of the art Gantt chart


Post by johanbrodin »

Hi,

A task that is dragged before the project start date is automatically reverted back. We want to notify the user on the reason. Below are links to information on how this is done but the callback is never triggered in the angular example inline-data or advanced.

https://github.com/bryntum/support/issues/2766
https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#event-schedulingConflict

//inline-data app.component.html adding #gantt
<bryntum-gantt
    #gantt
    [project]           = "project"
    [columnLines]       = "ganttConfig.columnLines!"
    [columns]           = "ganttConfig.columns!"
    [subGridConfigs]    = "ganttConfig.subGridConfigs!"
    [viewPreset]        = "ganttConfig.viewPreset!"
    [timeRangesFeature] = "ganttConfig.features!.timeRanges!"
</bryntum-gantt>

//inline-data app.component.ts adding listener with timeout to make sure project is loaded
    ngOnInit(): void {
        // Get initial data
        Object.assign(this, this.dataService.getData());

    setTimeout(() => {
        this.ganttComponent.instance.project.on('schedulingconflict', (context:any) => {
            console.log("conflict");
        });
    },1000);
}

Regards
Johan


Post by tasnim »

Hello,

I tried with one of our Angular-Gantt examples and it works fine here. Could you please upload runnable test case here so we can check what's wrong?


Post by johanbrodin »

Please download the inline example project below. You find the listener in the app component

https://agileupdatewin.s3.eu-west-2.amazonaws.com/debug/inline-data.zip


Post by alex.l »

I assume Tasnim meant here that he don't see errors. I don't see errors in your example too.
But schedulingconflict event won't be triggered on non-succeed drag-n-drop. It's not scheduling conflict, it's invalid drop.
You can catch it using https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskDrag#event-afterTaskDrop

            this.ganttComponent.instance.on('afterTaskDrop', ({ valid }) => {
                console.log("drop is", valid ? "valid" : "invalid");
            });

All the best,
Alex


Post by johanbrodin »

Hi Alex,

That did the trick thank you for the good support!

One comment, looking at the event we could not find an error reason just valid/invalid. In our case we want to show a Toast if a task is dragged before project start which works fine. However without an error reason we need to hard code that so the same Toast will be shown on all drop failure which is not the best user experience. So is there any way to figure out why it is failing based on the event.

Regards
Johan


Post by tasnim »

Hello,

To achieve that. You could use https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskDrag#event-beforeTaskDropFinalize

Here is the code sample of how you can achieve this

this.gantt = this.ganttComponent.instance;
this.gantt.on('beforeTaskDropFinalize', (event: any) => {
    const { context } = event;
    const compare = DateHelper.compare(context.startDate, new Date(this.gantt.project.startDate), 'day');
    if (compare === -1) {
        Toast.show('Task can not be droped before project start date');
    }
})

Please check docs https://bryntum.com/products/gantt/docs/api/Core/helper/DateHelper#function-compare-static

Attachments
chrome_327kvZvk6h.gif
chrome_327kvZvk6h.gif (499.51 KiB) Viewed 236 times

Post by alex.l »

I've opened a feature request to add a message for such cases https://github.com/bryntum/support/issues/6029

All the best,
Alex


Post by johanbrodin »

Hi Alex,

Thank you it works fine now on our end as well with your code snip-it.

Regards
Johan


Post Reply