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.

AyanApp

Hi tasha,

Thank you for your previous reply and support. It was really helpful.

I am currently working with the SVAR React Gantt Trial version, and I need some clarification on the following points:

Timeline View Switching
I want to provide users with an option to switch the timeline view dynamically between Week, Month, and Year using a dropdown. Could you please guide me on the recommended approach to configure or update the Gantt timeline scales programmatically? If there are any built-in methods or best practices for handling timeline zoom levels or scale changes, please let me know.

Draggable Left Grid Columns
I would like to enable drag-and-drop functionality for the columns in the left grid section (for example, allowing users to rearrange columns such as Task Name, Start Date, Duration, etc.). Could you please confirm whether this feature is supported in the Trial version? If yes, I would appreciate guidance or documentation on how to enable column dragging or reordering.

Please let me know if you need any additional details about my implementation setup.

Thank you for your assistance.

tasha

Hello AyanApp,

Timeline View Switching

You can use the RichSelect component from the svar core library and change scales accordin to the selected option.
Please check the example: https://snippet.svar.dev/react/AhsIhX5aV

Draggable Left Grid Columns

Unfortunately, draggable/reorderable columns in the left grid section is not currently supported in the Gantt but will be added in the future.

AyanApp

Hi Tasha,

I’m currently using the trial version of SVAR React Gantt along with the Willow theme (directly from the official SVAR GitHub repository).

In the official Gantt demo, the left grid contains draggable vertical separators between columns (for example, between Task Name, Start Date, and Duration) that allow column resizing.

However, in my implementation, the left grid header appears plain and does not show any draggable vertical column resizers. The columns are displayed correctly, but there are no visible separators or resize handles.

Could you please clarify:

Is column resizing enabled by default in the trial version?

Is this feature available only in the PRO edition?

Does the Willow theme affect column resizer visibility?

Is there a specific grid or column configuration property required to enable resizing?

If needed, I can share my grid configuration and setup.

Thank you in advance for your guidance

tasha

Hi,

Is column resizing enabled by default in the trial version? Is this feature available only in the PRO edition?

Column resizing is enabled by default and is available in both the trial and free versions. It is not limited to the PRO edition.

Does the Willow theme affect column resizer visibility?

The Willow theme does not affect the visibility of the column resizers. To see the resizer handles, you need to hover your mouse over the border of the column header you want to resize.

Is there a specific grid or column configuration property required to enable resizing?

There is no specific configuration property needed to enable resizing. Simply hover over the column header border, and the resize cursor and handle will appear, allowing you to drag and resize the column.

If you'd like, feel free to share your grid configuration and setup so that I can take a look and help troubleshoot further.

And here is the basic example with trial version: https://snippet.svar.dev/react/9pZ7hVQrc