Double click on tasks, edit button, top level tasks, priority string


Hello, i have a few questions , can i rewrite function on double click to tasks ?


I want that top level tasks, without parents were closed at first, after double clicking on it, its shew only childs.

And edit button, cant find how to add it.

Also adding ‘priority’ string to this for filter


Any advices or links to documantations also great, or maybe those options only in PRO version ?



I want that top level tasks, without parents were closed at first, after double clicking on it, its shew only childs.

By default, Gantt doesn’t open tasks unless they have the open parameter set to true or if you use the gantt.config.open_tree_inititially = true property.
To manually close all tasks, you need to use the gantt.eachTask and gantt.close methods:

It is not necessary to rewrite the double-click function. You can make API calls inside the onTaskDblClick event handler and return false to prevent the default action:

And edit button, cant find how to add it.

Gantt doesn’t have built-in buttons in the grid. But you can show any HTML elements there if you return them as a string in the column template:

{name:"edit", label:"edit", template: function(task){
  return "<input type=button value=edit onclick=gantt.showLightbox("+task.id+")>"


Also adding ‘priority’ string to this for filter

To add a section into the default editing form (the lightbox), you need to edit the gantt.config.lightbox.sections property.
If you want to add a dropdown element, you need to use the “Select control”:
And there are other sections available:

You can read more about it in the following article:

Any advices or links to documantations also great, or maybe those options only in PRO version ?

The features you mentioned, work in the Standard version. The following article contains the list of features that available only in the PRO version:

Here is an example of how it might work with the features you requested:


Hello, thx for your help, but a i missed few things, like, i want that edit button(icon) was like here with add and delete https://docs.dhtmlx.com/gantt/media/desktop/custom_elements_grid_columns.png

tried this http://snippet.dhtmlx.com/afb3cde34 but it gaves error undefiend colHeader, and where get it, i have no clue

i tried also this http://snippet.dhtmlx.com/38006b081 but it shows only 1 add button(icon) there’s probem to load icons ?
locally giving another error https://gyazo.com/b37806bf19a300d74c42832e35021ef4
also scoller didnt work in greed

And last questions, i’m using laravel, getting data like so

var xhr = gantt.ajax;

// // HTTP GET
url: “/api/data”,
mode: “REST”,
headers: {
‘Authorization’: 'Bearer ’ + token,
}).then(function (resp) {

So it’s showing new data, but if i want show only childs without parent its not working


You need to copy all the necessary code from the sources to get all the functionality you need.
The colHeader variable is used in the header to create new tasks:

If you want to add buttons like in the following sample, you need to add the font-awesome library and add CSS rules:
Font awesome:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.1.7">

Style rules:

		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;

		.fa {
			cursor: pointer;
			font-size: 14px;
			text-align: center;
			opacity: 0.2;
			padding: 5px;

		.fa:hover {
			opacity: 1;

		.fa-pencil {
			color: #ffa011;

		.fa-plus {
			color: #328EA0;

		.fa-times {
			color: red;


	var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>',
		colContent = function (task) {
			return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil" onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
				'<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
				'<i class="fa gantt_button_grid gantt_grid_delete fa-times" onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
	gantt.config.columns = [
		{name: "text", tree: true, width: '*', resize: true},
		{name: "start_date", align: "center", resize: true},
		{name: "duration", align: "center"},
			name: "buttons",
			label: colHeader,
			width: 75,
			template: colContent

	function clickGridButton(id, action) {
		switch (action) {
			case "edit":
			case "add":
				gantt.createTask(null, id);
			case "delete":
					title: gantt.locale.labels.confirm_deleting_title,
					text: gantt.locale.labels.confirm_deleting,
					callback: function (res) {
						if (res)

Here is the snippet with that functionality:

also scoller didnt work in greed

If you want to add the scrollbars in the grid, you need to change the layout configuration:
First, it is better to use the rows inside columns structure (cols:[rows[]]).
You need to specify the vertical and horizontal scrollbars for the grid and put them in the right place:

In the following snippet, you can see how it works:

So it’s showing new data, but if i want show only childs without parent its not working

If that task has the parent parameter, but that parent task doesn’t exist, Gantt won’t the child task. There is no way to change that unless you modify the source code.
So, you need to load the data with parent tasks and hide them in the onBeforeTaskDisplay event handler:
Or reassign the parent parameter:


Thx for your time and your help