Our state of the art Gantt chart


Post by shimnx »

I have some questions about gantt:
1.How to initialize the data, because you can't return a complete data in the background, you have to concatenate it in the front end, so you can't transport load url, is there any other way to add data in ngOninit?

 transport: {
            load: {
         url: 'assets/data/launch-saas.json'
      }
 },   

2.When I'm editing I need to submit requests to the back end, isn't it this way?

project: {
        listeners: {
            change({ store, action, records }) {
                const { $name } = store.constructor;
                console.log('store', $name)
                // console.log('action', action)
                console.log('records', records)

            if (action === 'add') {

            }

            if (action === 'remove') {

            }
        }
    },
    // Let the Project know we want to use our own Task model with custom fields / methods
    taskModelClass: Task,
 transport: {
load: {
   url: 'assets/data/launch-saas.json'
   }
  },
    autoLoad: true,

    // The State TrackingManager which the UndoRedo widget in the toolbar uses
    stm: {
        autoRecord: true
    },

    // This config enables responses validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse: true
},

If so, how can I write angular httpClient requests here, since httpClient doesn't seem to work here, or is there another way to submit data to the back end?
3.When I've edited gantt, I want to see the full data committed to the backend, in which way


Post by saki »

  1. Gantt uses Crud Manager that was designed to consume the complete data from the server and to populate all necessary stores. For more informations see the detailed descriptions at:

  2. CrudManager takes also care of sending data to server. You can call https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#function-sync method on Gantt's project. Alternatively you can set https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#config-autoSync to true to send the request after each change.

  3. You can inspect all changes here: https://bryntum.com/docs/gantt/api/Scheduler/model/mixin/ProjectModelMixin#property-changes


Post by shimnx »

My demo is attached
1.I don't know how to set a complete JSON data to Gantt,Is it 'inlineData'?If so,how to write.
I added the inlineData property to the project in ganttConfig and assigned inlineData a complete JSON data, but it didn't work.
2.I don't want to request the back end for every operation of Gantt, I will add a save button on gantt, and send the data to the back end when I finish all the editing, but I don't know how to get a complete JSON data of Gantt after editing, I need to send a complete JSON to the back end.

Can you help me implement this in my example,thank you!

Attachments
gantt.7z
(6.98 KiB) Downloaded 44 times

Post by saki »

The very first question to resolve is whether you really have to have any other data layer and cannot use CrudManager.

Meanwhile, I explain how it is done in our Angular advanced demo which uses our recommended way.

The configuration of the project is in src/app/gantt/gantt.config.ts` and it consists of:

    project : {
        transport : {
            load : {
                url : 'assets/data/launch-saas.json'
            }
        },
        autoLoad : true,

This says that the complete data for the gantt is to be loaded from assets/data/launch-saas.json url and that data will be auto-loaded upon the gantt creation.

If we want to configure saving changes to the server we only need to add sync entry so that it reads:

    project : {
        transport : {
            load : {
                url : 'assets/data/launch-saas.json'
            },
            sync : {
                url : '/some/sync/url'
            }
        },
        autoLoad : true,

After you have done so you can add a "Save" button that would simple call .sync() method on the project.

Loading and saving is shown here:

crud-manager.gif
crud-manager.gif (2.42 MiB) Viewed 511 times

Note: the sync fails because we do not have the above sync url in the server - it is expected to fail.

Your code does not contain the files that might be related to data loading (app.api and http-units.service) referenced in gantt.component.ts.

So consider please if CM is not all you need and if not then post please a complete runnable showcase so that we can advise you further.


Post by shimnx »

  1. Now I need to get the complete Gantt data from the front end and then pass it to the back end when I click the save button, instead of just the updated data, I need all and complete data.

  2. When the correlation relationship of our current back-end is adopted, the length of the predecessor column is very long, so that the predecessor column is abnormal, so we hope to use the WBS of the first column to show the correlation relationship of the predecessor column. When the WBS column becomes, The predecessor column also changes so that the user looks more convenient.

  3. Can we get and operate data for undo last action and redo last undone action? Because we want to save the data for undo last action and redo last undone action when the user closes the page, and reacquired and assigned the next time the user enters the page

Attachments
屏幕截图 2021-11-01 131732.png
屏幕截图 2021-11-01 131732.png (2.27 KiB) Viewed 489 times

Post by mats »

Please ask one question per thread.

#1. Please see https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#function-toJSON

We'll help you with your other questions in your new threads.


Post by shimnx »

When I create a task to submit data to back end by 'project.sync()' method,there is a field named '$PhantomId', why the field has '$',if the field has '$',it can't become a string


Post by shimnx »

Pictured

Attachments
sync.png
sync.png (28.97 KiB) Viewed 475 times

Post by saki »


Post Reply