How to make the table on the left scroll?

Gantt
#1

Hi, can I ask you a few questions?
1、I want the table on the left and the task bar on the right to have separate scroll bars.

1
11905×883 111 KB

2、If the taskName column is “project”, add a clickable name event.
3、I want to implement a checkbox feature in the table for selecting items, and also enable a bulk delete functionality.

2
21781×784 48.2 KB

4、Is there a way to track the modifications made to the task bars, such as dragging or deleting, and return their objects to be sent to the backend for data storage?

Thank you very much！

#2

Hello Ryan,

1 . I want the table on the left and the task bar on the right to have separate scroll bars.

You need to customize the layout configuration and create the layout where the grid and timeline have separate scrollbars:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#scrollbar

Here are examples:
https://docs.dhtmlx.com/gantt/samples/?sample='07_grid/10_scrollable_grid.html'&filter='scroll'

https://snippet.dhtmlx.com/uqejdyqc?text=gantt.%2Blayout
https://snippet.dhtmlx.com/cv9w37tu?text=gantt.%2Blayout

2 . If the taskName column is “project”, add a clickable name event.

It is not clear to me what exactly you need. Please clarify in more detail.
You can also send me a screenshot that shows how you imagine it should look and work.

3 . I want to implement a checkbox feature in the table for selecting items, and also enable a bulk delete functionality.

You can use the template function to return HTML elements in the grid columns:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates

Here is an example of the implementation where you can select tasks via the checkbox in the grid:
https://snippet.dhtmlx.com/r0w63dzr

4 . Is there a way to track the modifications made to the task bars, such as dragging or deleting, and return their objects to be sent to the backend for data storage?

It is possible to do that. Gantt has the Data Procesor that triggers the changes and sends them to the server.
The following article explains how to configure it:
https://docs.dhtmlx.com/gantt/desktop__server_side.html

#3

Thank you for your response. I have a little question about the second and fourth items. Could you please assist me again? I really appreciate it.
2、I think the task at the project level has a click event, and the subtasks below it do not need to have one.

1
11494×514 23.2 KB

4、I want to get an object that has been changed.
For example, if I have fifty tasks, I drag and change ten and delete three.
There is no api that can get these 13 tasks for submission to the back end. Instead of committing all task objects to the back end.

Thanks again！

#4

Hello Ryan,

I think the task at the project level has a click event, and the subtasks below it do not need to have one.

Thank you for the clarification.
If you want to hide the “+” button for some tasks, there are several ways of how to do that.
We have this official example where the button is hidden with the help of the templates and custom styles:
https://docs.dhtmlx.com/gantt/samples/?sample=‘08_api/11_project_structure.html’&filter=‘’

And here is a simpler example:
https://snippet.dhtmlx.com/m12jq5wk

Another way is to add a column that has any name except add. Then use the template function that allows returning any HTML elements:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates

After that, you can attach a custom function for adding tasks.

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/o36jnko3?text=gantt.%2Badd

I want to get an object that has been changed.
For example, if I have fifty tasks, I drag and change ten and delete three.
There is no api that can get these 13 tasks for submission to the back end. Instead of committing all task objects to the back end.

The Data Processor watches the changes and sends the updates to the server-side. It will only send the information about added, modified, or deleted tasks.

You can check how it works in the following snippet:

1645×769 141 KB

http://snippet.dhtmlx.com/5/eccfc5839

If you don’t want to use the Data Processor, you need to implement a custom solution by using the Gantt API and Javascript.
Here is the list of events that usually trigger the changes:
https://docs.dhtmlx.com/gantt/desktop__server_side.html#triggeringdatasavingfromscript