Auto Render Gantt Chart when a Start Date or End Date is changed


Hi Team,

When ever I change my Task Start Date or End Date which is Crossing Gantt Start Date / End Date. My Gantt Chart is not re-rendering.
If I change my Start Date or End Date within the Gantt’s Scope then it’s refreshed properly. But If I select the date which is outside of Gantt Chart then I was expecting my Gantt will automatically refresh and render with new Dates. Am I missing any configuration.

FYI : Following is my configuration :

  tooltip: true,
  marker: true,
gantt.config.sort = true;
gantt.config.row_height = 41;
gantt.config.autosize = true;
gantt.config.fit_tasks = true;
gantt.config.grid_resize = true;
gantt.config.drag_multiple = true;
gantt.config.drag_progress = false;
gantt.config.tooltip_timeout = 1000;
gantt.config.readonly = false;
gantt.config.open_tree_initially = true;
gantt.config.grid_elastic_columns = true;
gantt.config.start_date = new Date(toggleADay(StartDate, 'subtract'));
gantt.config.end_date = new Date(toggleADay(DueDate));
gantt.config.date_format = '%Y-%m-%d';

Please let me know if I am missing anything.

Scenario :
I have a Plan with Start Date - 20th Sept & End Date - 26th Sept.
I render Gantt Chart using above configuration by doing Plan Start Date -1 & Plan End Date + 1 for gantt.config.start_date & gantt.config.end_date i.e (19th Sept & 27th Sept).
I have a Task with Start Date - 22nd Sept & End Date - 24th Sept.
Now, I manually changing Task Start Date from Left Column to 18th Sept & Task End Date to 28th Sept.
After this my Plan dates are changed but my Gantt Chart is still showing between 19th & 27th.
Is there any way via some property which automatically set new dates for Gantt Chart i.e 17th & 29th Sept.

Also is there any way to increase the End Date of Task via dragging the task bar and it should cross the Chart?

Please let me know if you require any further information.

Thank you,
Bhavesh Kumar.


Hello Bhavesh,
You can use the fit_tasks option to extend the timeline after you change the task dates via the lightbox.
That option works only if you didn’t set the gantt.config.start_date and gantt.config.end_date parameters.

Gantt doesn’t extend the timeline when you drag a task close to the timeline border. You need to manually do that.

If the date range is not predefined, you can just call the gantt.render() method. Otherwise, you need to change the gantt.config.start_date and gantt.config.end_date parameters.
Here are examples of how it can be implemented: