Our state of the art Gantt chart


Post by methode »

Hello,

when I try to create a dependency between two tasks by drag and drop I always get - Invalid - in the Tooltip.
There are just two tasks in project only for test case, so not a complex scenario.
I get the red bar Invalid but at the end the dependency is correctly created, sync operation works fine.

1) Is there any Task property to be checked in my data that can break the dependency tooltip?

2) Which are the rules that make the tooltip showing Valid/Invalid dependency creation?

I searched for docs here:

https://www.bryntum.com/docs/gantt/#Gantt/view/Gantt

https://www.bryntum.com/docs/gantt/#Gantt/feature/Dependencies

but I couldn't find anything on this topic.

Thank you

Post by pmiklashevich »

Hello,

Dependency validation is an async process and it is private. There are only 2 public events when validation begins and when it's over:
https://www.bryntum.com/docs/gantt/#Scheduler/feature/mixin/DependencyCreation#event-dependencyValidationStart
https://www.bryntum.com/docs/gantt/#Scheduler/feature/mixin/DependencyCreation#event-dependencyValidationComplete

If you have access to the source code you can set a breakpoint in Scheduler.feature.mixin.DependencyCreation.onOverTargetTerminal function isValidDependencyToCreate call and track it down to the functions when validation happens.

Let us know how to reproduce the issue with one of our demos or submit a small runnable testcase, and we will try to help you to find the root cause! Please try to follow this guide when you ask for help viewtopic.php?f=35&t=772

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by methode »

Hello Pavel,

thanks, I can't find any solution, I tracked down the code as you suggested but it seems all fine.
Promise returned in ValidationComplete is correctly resolved with valid : true result.

I'll try to further investigate the issue. I also tried with a possible CSS conflict, but nothing.

In case, if I need to - disable - drag and drop dependency creation, how can people do it?

Thank you

Post by pmiklashevich »

Hello,
I'll try to further investigate the issue. I also tried with a possible CSS conflict, but nothing.
You can try to narrow the application down to a small test case and submit here, so we can try to help you to track this error down.
In case, if I need to - disable - drag and drop dependency creation, how can people do it?
Please see this config: https://www.bryntum.com/docs/gantt/#Gantt/feature/Dependencies#config-allowCreate

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by methode »

Hello Pavel,

ok thanks, I'll check if possible to prepare a small solution.

Post by methode »

Hello Pavel,

please, can you reproduce the code below? In an Angular 8 project using the wrapper.

I'm posting 3 files: gantt-dev.config.ts, gantt-dev.component.html, gantt-dev.component.ts.

I'm using bryntum material theme. Data are taken from the launch-saas.json examples file.
Library: gantt-2020-05-06-release

If you try to create dependencies by drag and drop, does it work as expected? Mine is always: Invalid.

gantt-dev.config.ts

import { ProjectModel, TaskModel, Combo, Column, ColumnStore } from "bryntum-gantt";
import { HttpClient } from '@angular/common/http';

const project = new ProjectModel({
    transport: {
        load : {
            url : 'assets/datasets/launch-saas.json'
        },
    },
    //phantomIdField: 'sysPhantomId',
    autoLoad: false,
    //autoSync: true,
    tasksData: []
});

const taskEdit = {
    editorConfig: {
        height: '36em',
        width: '60em',
        autoClose: false,
        modal: true
    },
    tabsConfig: {
        // change title of General tab
        generaltab: {
            title: 'generale',
            index: 0,
        },

        successorstab: {
            title: 'successivi',
            index: 2
        },

        predecessorstab: {
            title: 'precedenti',
            index: 3
        },

        resourcestab: {
            title: 'risorse',
            index: 4
        },

        advancedtab: {
            title: 'avanzate',
            index: 5
        },

        // remove Notes tab
        notestab: false

        // filesTabConfig
    }
};

export default {
    rowHeight: 40,
    barMargin: 7,
    viewPreset: 'weekAndDayLetter',
    startDate               : '2019-01-12',
    endDate                 : '2019-03-24',
    subGridConfigs: {
        locked: {
            width: '40%'
        },
        normal: {
            flex: 1
        }
    },
    labels: {
        left: {
            field: 'name',
            editor: false
        }
    },
    features: {
        stripe: true,
        rollups: {
            disabled: true
        },
        baselines: {
            disabled: true
        },
        timeRanges: {
            showHeaderElements: true,
            showCurrentTimeLine: true
        },
        taskEdit
    },
    project
}

gantt-dev.component.html

<div style="width: 100%;">
    <bry-gantt
        #gantt
        [height]="800"
        [columns]="columns"
        [project]="ganttConfig.project"
        [viewPreset]="ganttConfig.viewPreset"
        [rowHeight]="ganttConfig.rowHeight"
        [barMargin]="ganttConfig.barMargin"
        [taskEdit]="ganttConfig.features.taskEdit"
        [labels]="ganttConfig.labels"
        [subGridConfigs]="ganttConfig.subGridConfigs"
    ></bry-gantt>
</div>

gantt-dev.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import ganttConfig from "./gantt-dev.config";
import { GanttComponent } from "bryntum-angular-shared";
import { EffectResolutionResult, Toast } from "bryntum-gantt";

@Component({
    selector: 'app-gantt-dev',
    templateUrl: './gantt-dev.component.html',
    styleUrls: ['./gantt-dev.component.scss']
})
export class GanttDevComponent implements OnInit {

    @ViewChild(GanttComponent, { static: false }) gantt: GanttComponent;

    public ganttConfig = ganttConfig;
    public columns: any = [];

    constructor() {
        
    }

    ngOnInit() {

        this.columns = [
            { type: 'wbs' },
            { type: 'name', width: 250 },
            {
                type: 'action',
                width: 120,
                text: 'Increase amount',
                actions: [{
                    cls: 'b-fa b-fa-plus',
                    tooltip: 'Add note',
                    onClick: ({ record }) => console.log(`Adding ${record.name}`)
                }],
                renderer: (renderData) => {
                    console.log(renderData);
                }
            },
            { type: 'startdate' },
            { type: 'duration' },
            { type: 'resourceassignment', width: 120 },
            { type: 'percentdone', showCircle: true, width: 70 },
            {
                type: 'predecessor',
                width: 112
            },
            {
                type: 'successor',
                width: 112
            },
            { type: 'schedulingmodecolumn' },
            { type: 'calendar' },
            { type: 'constrainttype' },
            { type: 'constraintdate' }
        ];

        this.ganttConfig.project.load({}).then(data => {

            const stm = this.ganttConfig.project.stm;

            // let's track scheduling conflicts happened
            this.ganttConfig.project.on('schedulingconflict', context => {
                // show notification to user
                Toast.show('Conflitto Scheduling... ultime modifiche annullate');
                // as the conflict resolution approach let's simply cancel the changes
                context.continueWithResolutionResult(EffectResolutionResult.Cancel);
            });

            //Toast.show('All fine...');

            stm.enable();
            stm.autoRecord = true;

        }).catch(response => {
            Toast.show(response && response.message || 'Unknown error occurred');
        });

    }

}

in the main styles.scss file:

...

@import "~bryntum-gantt/gantt.material.min.css";

Thank you

Post by methode »

Hello,

did you manage to reproduce the code above?
It's rather important for the project I'm working on.

Thank you

Post by mats »

What version of Gantt?

Post by methode »

Hello,

Library: gantt-2020-05-06-release, as posted above.

Thank you

Post by mats »

Can you please try using the most recent 2.1.3 release, it may be fixed there already (cannot reproduce this in any of our online demos).

Post Reply