Our state of the art Gantt chart


Post by johanbrodin »

Hi,

We want to extend tasks to carry meta data. This meta data should be preserved calling "gantt.project.inlineData/gantt.project.loadInlineData" to allow for saving projects as well as moving around the UI.

Unless we have missed something "gantt.project.inlineData" is not returning extended fields which is for us a blocker. Please see below code snip-it directly from the angular advanced example that is extending task model.

//In Task.js adding an extra testing field
static get fields() {
        return [
            { name : 'deadline', type : 'date', testing : 'string' }
        ];
 }
 
 //In onZoomInClick some code triggering the problem
 onZoomInClick() {
        var added = this.gantt.taskStore.rootNode.appendChild({
            name: "name",
            duration: 1,
            testing: "Extended Field"
        });
        setTimeout(() => {
            var json = this.gantt.project.inlineData;
            var lastItem = json.eventsData.length - 1;
            //returns name
            var name = json.eventsData[lastItem].name;
            //return undefined. should return "Extended Field"
            var testing = json.eventsData[lastItem].testing;
            console.log(testing);
        },100);
   
this.gantt.zoomIn(); }

Regards
Johan


Post by tasnim »

Hello,

Could you please upload a runnable test app that we can run with npm i && npm start so we can reproduce the issue and debug it?


Post by johanbrodin »

Please find the example project below. You find the above code pressing the zoom-in button.

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


Post by alex.l »

Hi Johan,

You find the above code pressing the zoom-in button.

This is that I see in zoomIn button handler. I am not sure I got what you meant.

        onZoomInClick() {
            this.gantt.zoomIn();
        },

But, I see that you declared a new field in wrong way.
Please see https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#property-fields-static
There is an example

// Model defining two fields
class Person extends Model {
    static get fields() {
        return [
            { name : 'username', defaultValue : 'New person' },
            { name : 'birthdate', type : 'date' }
        ];
    }
}

So, in your case it will be something like

export default class Task extends TaskModel {

static get $name() {
    return 'Task';
}

static get fields() {
    return [
     { name : 'deadline', type : 'date' },
        { name : 'testing', type : 'string' }
    ];
}
// ....

All the best,
Alex


Post by johanbrodin »

Hi Alex,

Please look at the onZoomInClick() in the GanttToolbar.js file in the lib folder. I am not sure in the first place why you have an example with both a GanttToolbar.ts as well as a GanttToolbar.js but that is not the question here.

I do not follow your comment on that we are doing wrong. We are following below documentation and want to add an extra field which looks very straight forward. I hope you can guide us looking at the provided example project.

https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel

Regards
Johan


Post by alex.l »

Hi Johan,

This is your code:

export default class Task extends TaskModel {

static get $name() {
    return 'Task';
}

static get fields() {
    return [
        { name : 'deadline', type : 'date', testing : 'string' }
    ];
}

This is correct code:

export default class Task extends TaskModel {

static get $name() {
    return 'Task';
}

static get fields() {
    return [
     { name : 'deadline', type : 'date' },
        { name : 'testing', type : 'string' }
    ];
}

All the best,
Alex


Post by johanbrodin »

Thx that did the trick in the advanced example. Clearly a mistake on our side!

Getting it to work in the inline-data example was a bit of extra work and the extra step there was to add [taskModelClass] in the html file. Please feel free to close the ticket.


Post by alex.l »

Glad to hear you unblocked! Good luck!

All the best,
Alex


Post Reply