[ANGULAR] Creating Project dynamically and data output as JSON

[NARESH.RAI]

Hello,

Checked topics related with this, but didn't found any solution.
Please provide some solution on below queries -

1)Want to create new project dynamically for gantt chart when i click on button.
2) How could i get Gantt store data as JSON object instead of passing URL in sync function.
want all data in json object.

[alex.l]

Hi NARESH.RAI,

1. Dynamic change of ProjectModel is not supported. You need to re-init the entire component.
2. gantt.store.data is not what you are expecting?

[NARESH.RAI]

gantt.store.data is not what you are expecting?

Yes, I am using gantt angular wrapper here and when i use any of below command it gives me err ->

1. this.gantt.store.data.json

2. this.gantt.ganttInstance.store.data.json

3. this.gantt.ganttEngine.store.data.json

where as this.gantt refers GanttComponent.

Err for all above - >

Property 'data' does not exist on type 'object | Store'.
Property 'data' does not exist on type 'object'.

Could you please tell me right way to get that json ?

thanks!

[alex.l]

Hi NARESH.RAI,

Please make sure you fully understand that the JSON is.
gantt.store.data returns an array of objects. Any JavaScript object is already JSON formatted.

[NARESH.RAI]

1) The problem is that "data" is not available on "gantt.store".
so for

gantt.store.data

->getting err, this happening in angular wrapper.

2) i got json data only when i inspect in browser while debugging.
but another problem is the json data is not in correct format.
Means that same json data can't able load again in GANTT chat as load format is different..

So can we get same json format which i can load directly to gantt component ??

[alex.l]

Hi NARESH.RAI,

Please provide a runnable test case, so we will have a look and help you out. I was able to get data from Gantt store using our Angular examples. Make sure you have data loaded at the moment you try to get data from the store. Set 'debugger' to check if you used correct variable names.
You can check data format in our examples https://bryntum.com/examples/gantt/ and our docs: https://bryntum.com/docs/gantt/#guides/project_data.md

To get/set data from/to the store, you should use https://bryntum.com/docs/gantt/#Core/data/Store#property-data

[NARESH.RAI]

Ok fine if we can't create dynamic project..
but is there any way to set new start date for existing loaded project everytime?

Tried

this.gantt.gantInstance.setTimeSpan()  AND this.project.startDate

But still in gantt chart start date flag is not changed.
I want to reinitialize all configs or project data for creating new project..

[fabio.mazza]

Hi Naresh,

Yes, you can add new project, or change dynamically, on guide suggested by Alex has more details about it.

Once you identify your gantt instance, just change the properties or project directly on it, like:

gantt.project = new ProjectModel({
    startDate  : '2019-01-13',

eventsData : [
    { id : 1, name : 'Proof-read docs', startDate : '2019-01-14', endDate : '2019-01-21' },
    { id : 2, name : 'Release docs', startDate : '2019-01-21', endDate : '2019-01-22' }
],

dependenciesData : [
    { fromEvent : 1, toEvent : 2 }
]
});

gantt.project.startDate = '2019-02-10';
console.log(gantt.project. startDate); // this shown Sun Feb 10 2019 00:00:00 GMT-0500 (Eastern Standard Time)

You can just try on Basic demo to confirm.

Just change adding this code on it:

import WidgetHelper from '../../lib/Core/helper/WidgetHelper.js';

WidgetHelper.append([
    {
        type  : 'button',
        text  : 'New Project',
        onClick() {
            gantt.project = new ProjectModel({
                startDate  : '2019-01-13',
            

            eventsData : [
                { id : 1, name : 'Proof-read docs', startDate : '2019-01-14', endDate : '2019-01-21' },
                { id : 2, name : 'Release docs', startDate : '2019-01-21', endDate : '2019-01-22' }
            ],
        
            dependenciesData : [
                { fromEvent : 1, toEvent : 2 }
            ]
        });
    }
}
], {
    insertFirst : document.getElementById('tools') || document.body,
    cls         : 'b-bright'
});

Clicking on button "NEW PROJECT" you will see the new project being applied to gantt.

Here is the result:

Screen Shot 2020-09-11 at 14.06.49.png (118.41 KiB) Viewed 1433 times

Screen Shot 2020-09-11 at 14.11.27.png (90.55 KiB) Viewed 1433 times

Screen Shot 2020-09-11 at 14.07.43.png (87.25 KiB) Viewed 1433 times

[johan.isaksson]

Hi,

Seems there are some misunderstandings on how to retrieve json from stores. In general, any store can output its records as json in two ways:

store.json - Records data as a JSON string
store.toJSON() - Records data in an array

From Angular with most recent wrapper, the correct way of retrieving as JSON string from the task store would be:

this.gantt.ganttInstance.taskStore.json

The outputted JSON can be loaded later by setting data:

// Store json string
const json = store.json;

// Parse json string and plug into store
store.data = JSON.parse(json);

Works?

[NARESH.RAI]

Hi,

I am able to get JSON data using

 this.gantt.ganttInstance.taskStore.json

And same json data i am assigning back to my gantt widget

this.gantt.ganttInstance.taskStore.data = JSON.parse(this.gantt.ganttInstance.taskStore.json);

This load data again in gantt widget but some tasks are missing compare to previously data saved and i am getting attached error

And also it not showing assigned resources etc..