Our state of the art Gantt chart


Post by kenken9301680 »

Hello friends,

I'm having an issue, initially I'm configuring the default endDate

endDate: new Date(2021, 12, 27),

then, I have to update the endDate again when I call the getData function, but bed as it doesn't work, I can't re-update the endDate as I would like. You can see the picture below:

Attachments
update-enddate-2.png
update-enddate-2.png (15.72 KiB) Viewed 823 times
update-enddate-1.png
update-enddate-1.png (27.07 KiB) Viewed 823 times
update-enddate.png
update-enddate.png (26.7 KiB) Viewed 823 times

Post by mats »

You set the date using a String which is not recommended, why not do it same way as when you configure the component?

Also, better you post code as text - not images.

You can try this out here and see it works fine:
https://bryntum.com/examples/gantt/advanced/

gantt.endDate = new Date(2021,0,1)

Post by kenken9301680 »

I leave the form like yours and it is faulty

Attachments
Untitled012345.png
Untitled012345.png (434.89 KiB) Viewed 818 times

Post by mats »

That looks like some error in your code. Did you try running the code I posted in the console of the demo (use any demo)?


Post by kenken9301680 »

I have a function in the service to get data from api and then update it as follows:

 updateDataChart(gantt: GanttComponent, data) {
    if (gantt && gantt.ganttInstance) {
      gantt.ganttInstance.project.taskStore.data = data;
      gantt.ganttInstance.endDate = new Date('2021, 8, 27');
    }
  }

But it seems that only the data update function works, gantt will only get the endDate of the tasks in the newly updated data. The project's update endDate function below is not working. After I delete on the update data line above, the update end date function below will work, but will not be able to update the data retrieved from the api. So how do I get both operations running.


Post by pmiklashevich »

When you change data in the task store, the engine propagates changes and recalculates values asynchronously. To make sure the propagation is done and you set the dates after it's completed, you can trigger the propagation manually:
https://www.bryntum.com/docs/gantt/#guides/project_data.md#triggering-propagation-manually
https://www.bryntum.com/docs/gantt/#Gantt/model/ProjectModel#function-commitAsync

await gantt.ganttInstance.project.commitAsync()

Then change the dates:
https://www.bryntum.com/docs/gantt/#Gantt/view/Gantt#function-setEndDate
https://www.bryntum.com/docs/gantt/#Gantt/view/Gantt#function-setTimeSpan
or the way you did
https://www.bryntum.com/docs/gantt/#Gantt/view/Gantt#function-setTimeSpan

Pavlo Miklashevych
Sr. Frontend Developer


Post by kenken9301680 »

I don't do it that way anymore, but I will add a task to the data, and then add a condition field to hide the task. How can I hide the last line like in the image above by css, I already hide the left menu bar, but not the right

Attachments
Untitled0009999.png
Untitled0009999.png (17.88 KiB) Viewed 793 times

Post by pmiklashevich »

No need to hide it in CSS, you can filter out it from the store and the UI will be refreshed.

For example, you can define filter as an object:

id = gantt.taskStore.last.id
gantt.taskStore.filter({
    id : 'last-task',
    property : 'id',
    operator : '!=',
    value : id
})

or as a function:

gantt.taskStore.filter({
    id : 'last-task',
    filterBy : (task) => task.id !== id
})

P.S. Please create a new thread for every new question you have.

Pavlo Miklashevych
Sr. Frontend Developer


Post by kenken9301680 »

I mean, I create a task with endDate, and still want to keep that task, not that I want the filter to remove that task. So I just want to use css to hide that task


Post by mats »

Sorry it is not quite cleae what you need. Please highlight in a screenshot what element you want to hide


Post Reply