How to add a custom icon to a task

Gantt
#1

Hi,
I don’t know if this is possible or not.

In docs.dhtmlx.com/gantt/desktop__ … lates.html,
is there a way to place a ‘gantt.templates.grid_open’ ( or custom icon) button on the ‘gantt.templates.grid_indent’ space of a particular task.

I want to use this button as a toggle for collapsing similar tasks to this task or not.

Sun

#2

Hello Sun,
Yes, it is possible to do that. You just return the div element with the onclick function defined. In the function you process each task and compare task levels to determine if the task should be collapsed or not.
In the following example you can click on the gray plus button near tasks #2, #3 and #7 and the task #4 will be collapsed or expanded.
snippet.dhtmlx.com/2777e5e63
These articles may be useful for you:
docs.dhtmlx.com/gantt/api__gantt_eachtask.html
docs.dhtmlx.com/gantt/api__gant … plate.html

Update:
Newer and simpler approach to toggle sibling tasks:
https://snippet.dhtmlx.com/htq13tn7

#3

Thank you very much!
I’ll definitely make use of what you suggested.
Take care,
Sun

#4

Hi Ramil,

Finally, I had time to get down with this case.

I have 2 questions for you.
In collapse("+item.$level+") in your code, what does “+” on both side of item.$level do? I have never seen this kind of coding before…
Could you shed some light?

2nd question is more about getting an advice from you, if you have any.
Let’s say I want to display “+” icon on Task#5 ( not on Task #2, #3, #4, #6, #7) so that I can collapse Task #6 only ( Note: at its SAME level only for its own type)
Any suggestion?

Thanks,

Sun

#5

Hello Sun,
I will try to answer your questions in order.

  1. We need to consider “+item.$level+” in the context:
return "<div class='gantt_tree_indent' onclick=collapse("+item.$level+")></div>";

Usually if there is a function we can return a variable that contains some value. Also, it can be number, string, array or object.
In this case we return the string. And “+” means that we concatenate the string. Please read this article and find concat() method:
w3schools.com/js/js_string_methods.asp

Instead of a string we could use an array:
snippet.dhtmlx.com/c20ad5f5e
snippet.dhtmlx.com/b57f26609

This article explains how to join array elements:
w3schools.com/jsref/jsref_join.asp

  1. Yes, it is possible to do that. And looks like in my previous examples I used it in a different way, not the way it was described:
    docs.dhtmlx.com/gantt/desktop__ … ninabranch
    Here is the snippet with the example that is closer to what is written about it in the docs:
    snippet.dhtmlx.com/0347bab3f
#6

Hi Ramil,

Your suggestion really got me off the ground.
I think I can take it from here.
Many thanks and take care,

sun