Bryntum Support Forums

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:

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)

I leave the form like yours and it is faulty

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)?

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.

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

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

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.

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

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