Modify icons tree

Gantt
#1

Hi,
Is there an easy way to modify icons tree in gantt with javascript ?
like setStdImages(im0,im1,im2) for dhtmlxTree ?

Or the only way is to override the css rule ? :

  • .gantt_tree_icon.gantt_folder_open,
  • .gantt_tree_icon.gantt_folder_closed,
  • .gantt_tree_icon.gantt_file.

thanks

#2

Hi,

these classnames are set via “grid_folder” and “grid_file” templates, that can be customized as you need.

Here are default templates for folder and file icons:

gantt.templates.grid_folder = function(item) { return "<div class='gantt_tree_icon gantt_folder_" + (item.$open ? "open" : "closed") + "'></div>"; }; gantt.templates.grid_file = function(item) { return "<div class='gantt_tree_icon gantt_file'></div>"; }; ... gantt.init("gantt_here");

#3

ok thanks
and is it possible to have different icons for tasks ?

for dhtmlx tree we can apply a specific icon to a specific item is it possible with gantt ?

Thanks

#4

and is it possible to have different icons for tasks ?

Yes, I already wrote about templates that can be use to define icons. Possibly the reply was not clear…

gantt.templates.grid_folder = function(item) { var icon; if(item.assigned){ icon = (item.$open ? "openAssigned.gif" : "closedAssigned.gif") } else{ icon = (item.$open ? "open.gif" : "closed.gif") } return "<div class='gantt_tree_icon' style='background-image:url("+icon +"')></div>"; };

In this example I used “assigned” property of task. In your gantt you can use any other approach to distinguish tasks.

grid_folder and grid_file templates - functions that are called for each task and return innerHTML of html element that can be shown before task name:

  • grid_folder - before tasks with sub tasks
  • grid_files - before tasks without sub tasks
#5

hi

what’s the repository path of icons please ?

#6

forget it

thanks

#7

is it possible to assign icons per type.
e.g

task = other icon
project = another icon

thanks

#8

Hi blakadm,
please check the previous Alexandra’s answer. The the image can be set explicitly, so you can check the type of item and return the appropriate image