Show Sort Arrows by default in dhtmlx gantt

Gantt
#1

How to show sort arrows by default in all columns of Gantt chart?
Only when clicking the column header, the sort arrows appear. I want to change it to show it by default.

#2

Hello Shourya,
By default, Gantt doesn’t sort tasks. So, if you add the arrows, it will not represent the actual sort state.
But if you want to do that, you can append the following text to the label property of the column in the column configuration:

"<div class='gantt_sort gantt_desc'></div>"

https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

Here is an example:
https://snippet.dhtmlx.com/d7rz946w

Also, in Gantt, you cannot sort several columns simultaneously. So, even if you add the icons, it will not reflect the actual sort state.

#3

Hi,
I want grid to be sorted based on start_date column on page load ,which is already working.
I just want to denote that the grid is sorted based on start_date on page load by showing the gantt_asc icon, afterwards if the user wants to sort based on other columns, the asc arrows of start_date should disappear.

#4

Hello Shourya,
Thank you for the clarification.
In that case, you can use a different approach.
If you sort tasks manually with the sort method after the tasks are loaded, you can click on the column header instead of that:

gantt.$container.querySelector(".gantt_grid_scale [data-column-id='start_date']").click()

Then the icon will disappear when you click on other column headers.

Here is an example:
https://snippet.dhtmlx.com/sj7uzcdk

Another way is to modify the label parameter after you click on the Grid header:
https://snippet.dhtmlx.com/fq84gsua

Or you can append the sort element to the DOM node. In that case, it will disappear next time Gantt repaints the data. To keep it until you click on the grid header, you can add it again in the onDataRender event handler:
https://snippet.dhtmlx.com/z5klpkc1

1 Like