Our state of the art Gantt chart


Post by ankitkamboj »

We have requirement to add custom tab in the editor with some custom time fields inside the tab.
I followed your example from Gantt documentation from customization section (https://bryntum.com/docs/gantt/#guides/customization/taskedit.md) but facing some issues, the tab is created and also the fields inside the tab is also visible but its not picking the value from task data. Below is demo example where its replicable I have added one custom tab named newTab and inside that I have items object with field1 and field2, when I pass inbuilt field 'name' in field1 which is also present in Task data it works but for field2 when I add new Task data field named 'machineHours' and pass it to field2 name property it didn't worked & field is displayed empty without value but I have data in my Tasks children. Can anyone suggest what's the issue here?

new Gantt({
    appendTo : targetElement,

autoHeight : true,
rowHeight  : 40,
barMargin  : 4,

tasks : [
    {
        id        : 1,
        name      : 'Math course',
        expanded  : true,
        startDate : '2019-01-07',
        endDate   : '2019-01-12',
        children  : [
            {
                id        : 2,
                name      : 'Module 1',
                startDate : '2019-01-07',
                duration  : 2,
                machineHours: "06:00:00",

            },
            {
                id        : 3,
                name      : 'Module 2',
                startDate : '2019-01-09',
                duration  : 2,
                machineHours: "06:00:00",

            },
            {
                id        : 4,
                name      : 'Exams',
                startDate : '2019-01-11',
                duration  : 0,
                machineHours: "06:00:00",
            }
        ]
    }
],

dependencies : [
    {
        id        : 1,
        fromEvent : 2,
        toEvent   : 3
    },
    {
        id        : 2,
        fromEvent : 3,
        toEvent   : 4,
        lag       : 1
    }
],

startDate : new Date(2019, 0, 6),
endDate   : new Date(2019, 0, 10),

features : {
    taskEdit : {
        items : {
            generalTab : {
                items : {
                    // Add new field to the last position
                    newGeneralField : {
                        type   : 'textfield',
                        weight : 710,
                        label  : 'New field in General Tab',
                        // Name of the field matches data field name, so value is loaded/saved automatically
                        name   : 'custom'
                    }
                }
            },
            // Add a custom tab to the first position
            newTab : {
                // Tab is a FormTab by default
                title  : 'New tab',
                weight : 90,
                items  : {
                    field1 : {
                        type   : 'textfield',
                        weight : 710,
                        label  : 'New field in New Tab',
                        // Name of the field matches data field name, so value is loaded/saved automatically.
                        // In this case it is equal to the Task "name" field.
                        name   : 'name'
                    },
                    field2 : {
                        type   : 'timefield',
                        weight : 710,
                        label  : 'New field in New Tab',
                        // Name of the field matches data field name, so value is loaded/saved automatically.
                        // In this case it is equal to the Task "name" field.
                        name   : 'machineHours'
                    }
                }
            }
        }
    }
}
});

Post by mats »

Define a new TaskModel class which adds this field and configure your Gantt TaskStore / Project to use it. You can see this demonstrated in several examples:

import TaskModel from '../../../lib/Gantt/model/TaskModel.js';

// here you can extend our default Task class with your additional fields, methods and logic
export default class YourTask extends TaskModel {

static get fields() {
    return [
        { name : 'machinehours' }
    ];
}

}

On your Gantt:

taskStore : {
    modelClass : YourTask
}

Post Reply