Drag and Resize Bar – How to Capture Updated Dates and Save to DB?

AyanApp

Hi SVAR Team,

I am currently working with the React Gantt component and implementing drag and resize functionality for task bars.

My requirement is to capture the updated start date and end date when a user drags or resizes a task bar and then save those updated values to my database.

Currently, the drag and resize actions are working visually, but I am not sure which event or API method I should use to reliably capture the updated task dates after the change.

Could you please clarify:

Which event or action should I listen to for detecting drag or resize completion?
What is the recommended way to get the updated task start and end dates?
Is there a specific API method provided for syncing updated task data with backend storage?

If there are any examples or documentation references, please share them.

Thanks in advance!

tasha

Hello AyanApp

Which event or action should I listen to for detecting drag or resize completion?

To detect when a drag or resize operation is complete, you can listen to the update-task action:

api.on('update-task', (ev) => {
  const task = api.getTask(ev.id);
  console.log('Updated Task:', task);
  // Here, you can save the new task data to your server
  Promise.resolve(task).then((resp) => {
    console.log(resp);
  });
});

What is the recommended way to get the updated task start and end dates?

You can use the update-task action (as shown above) combined with the getTask method. In the event handler, api.getTask(ev.id) returns the full updated task object, including the new start date and end date. You can then extract and use them directly.
Here is the example: https://stackblitz.com/edit/vitejs-vite-c4mvwfs6?file=src%2FGanttComponent.jsx

Is there a specific API method provided for syncing updated task data with backend storage?

The Gantt doesn't need any specific requirements on the backend, so you can connect it to any server-side platform.
For easier integration, we recommend using the RestDataProvider service, which is a ready-made helper for handling CRUD operations. You can read more about it here: https://docs.svar.dev/react/gantt/helpers/restdataprovider_api

If there are any examples or documentation references, please share them?

Here are some practical examples from our GitHub repository:

AyanApp

Hi SVAR Team,

Thank you for your previous clarification regarding drag and resize events. It helped me successfully capture and store updated task dates.

I am currently using "@svar-ui/trial-react-gantt" and applying the Material theme code taken from the SVAR GitHub repository.

I have a few additional questions related to the Gantt grid and layout behavior:

Column Resizing
Column resizing is not appearing in the left grid between columns such as Task Name and Start Date. Could you please confirm if column resizing needs to be explicitly enabled or configured? If yes, could you guide me on how to enable it?

Vertical Scroll Alignment Issue
When scrolling vertically, the left grid and the right timeline rows are not aligned properly. The timeline rows scroll first, and the left grid rows move slightly later, causing row mismatch. Also, task bars are becoming visible inside the right timeline header while scrolling.
Is this a known issue or caused by any styling or configuration conflict? Please suggest the recommended way to keep both sides synchronized.

Adding Custom Column in Left Grid
Currently, I see the "+" icon for adding columns. Instead of using that, I need to display a custom column that fetches data directly from my database.
Could you please explain the recommended approach to add and bind a custom column to backend data?

If there are any documentation links, configuration samples, or demo references, please share them.

tasha

Hello,
Thank you for your questions about the Gantt component.

I am currently using "@svar-ui/trial-react-gantt" and applying the Material theme code taken from the SVAR GitHub repository.

The Material theme is not an officially supported theme. We officially support only Willow and WillowDark themes. Using unsupported themes may lead to unexpected behavior or styling conflicts. We recommend switching to one of the supported themes for the best experience.

Column Resizing
Vertical Scroll Alignment Issue

Column resizing is enabled by default and does not require any explicit configuration or enabling. Unfortunately we were unable to reproduce the issues you're describing .
We were also unable to reproduce the vertical scroll alignment issue you described. This doesn't seem to be a known issue in the standard configuration.

For reference, here's a working example:
https://stackblitz.com/edit/vitejs-vite-b9hxqyol?file=src%2FGanttComponent.jsx,src%2FUserStub.jsx,src%2FAvatarCell.jsx

Please ensure you're using the latest version of the package.
If you're still experiencing issues, please share more details about your setup, such as browser version, React version, and any custom CSS that might be overriding the default behavior.
If the problem persists, providing a minimal reproducible example would help us investigate further.

Adding Custom Column in Left Grid

To add a custom column that fetches data from your database, you can define it in the columns property by using the cell parameter to specify a custom React component.
You can fetch data inside the component using useEffector similar hooks, and update the component state accordingly. Please see the UserStub.jsx file in the example above.