Bryntum Support Forums

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
}

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

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

    }

}

...

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