Hello. We are using gantt charts and one of our requirement is to limit the user from creating multiple nested tasks and that we will only allow one level of nesting. One solution we are thinking of is to hide/disable the plus sign (for adding child tasks) if the attempt is for a task that is already a child task itself. Is there a readily available function to disable/hide the plus sign selectively depending on a given criteria (e.g. show only if it is a parent task / hide if it is a child task). Thanks!
Does GanttChart also have an option to change the SCALES section column widths? I was only able to see an API to control the height via ‘gantt.config.scale_height = 30;’ but when trying ‘gantt.config.scale_width = 50;’ the columns retain a fixed width of 80px.
Hello,
currently there is no way to render ‘plus’ button conditionally. However, there is a way to hide it for a certain rows via css.
You can attach custom css class to each row using a ‘grid_row_class’ template function. So the code might look following://JS:
gantt.templates.grid_row_class = function(start, end, task){
if(task.$level > 1){
return "nested_task"
}
return "";
};
CSS:
.nested_task .gantt_add{
display: none;
}
docs.dhtmlx.com/gantt/api__gantt … plate.html
Try ‘min_column_width’ setting:
gantt.config.min_column_width = 70;Hello. I tried applying the suggested codes to 1) make the ‘+’ sign in nested tasks not display and 2) to make the scales column width adjust to set gantt.config.min_column_width value but it seems that both options do not work…
Is there anything I am missing? I have attached a completed demo for my gantt chart with the suggested changes. Thanks
Gantt Chart Demo.zip (464 KB)
Hello,
-
Check css celector for ‘add’ button, in your code it’s .nested_task.gantt_add while it must be .nested_task .gantt_add - note the whitespace.
-
Template for row class. Since first-level tasks should not have a ‘plus’ button, the condition must be (task.$level > 0). Top level items have $level=0
//Gantt Grid Templates gantt.templates.grid_row_class = function( start, end, task ) { if ( task.$level > 0 ) { return "nested_task" } return ""; }; -
min_column_width defines a minimal possible width value of the column. By default columns are resized so they would take 100% of chart area, without creating horizontal scroll. If the required width is less then the minimal width value - columns will have min_column_width size and scroll will be created
GanttIndex_row_class.zip (1.79 KB)
Any properties hide/remove all button plus (+) even header, project and tasks? I want to show view only for the client.
You can hide it for all rows, by removing from grid’s configuration
Something like next
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" }
];
Hi everyone!
I’m a newbie in this forum. I currently working on dhtmlx gantt chart. So i want to add a link into the “add” button. Ideally this should open in a new tab. I don’t know how can i do it. If anyone know this problem, please help me …
I’m glad to see all of you!
Thanks you so much!
Jason
Hello,
if you want to redirect user to another page when he clicks the ‘plus’ button (i.e. creating new task), you can do it using javascript from this event
docs.dhtmlx.com/gantt/api__gantt … event.html
Alternatively, you can specify a custom column with a markup and handlers you need
docs.dhtmlx.com/gantt/desktop__s … esentation