Custom column which is a checkbox

Gantt
#1

Hi

I have previously asked a question about this but it got a little jumbled so I thought i would start a new thread

I have been able to add custom columns to the gantt chart but only text boxes. I can see from the documentation that I could add a select too.

However I would reallly like to be able to add a checkbox custom column. By this I mean that it would display a checkbox in the lightbox form but on the actual task list it would show the checkbox selected value (e.g. yes for checked or not for not checked as an example)

I know i could achieve this with a select with 2 options but I would much prefer a checkbox.

Any examples would be much appreciated

Thanks

#2

Hello,
the current version of the component does not include a checkbox control for the lightbox. However, it can be implemented easily.
The code (checkbox definition, grid and lightbox configuration) might look like following:[code]//simple checkbox control
gantt.form_blocks[‘checkbox’]={
render:function(config) {
return “”;
},
set_value:function(node,value,ev,config){
node.checked = !!value;
},
get_value:function(node,ev,config){
return !!node.checked;
},
focus:function(node){
}
};

//grid configuration
gantt.config.columns=[
{name:“text”, label:“Task name”, tree:true},
{name:“start_date”, label:“Start time”, align: “center” },
{name:“duration”, label:“Duration”, align: “center” },
{name:“checked”, label:“Checked”, template:function(task){
if(task.checked_task){
return “checked”;
} else{
return “not checked”;
} }
}
];
//lightbox configuration
gantt.config.lightbox.sections = [
{name: “description”, height: 70, map_to: “text”, type: “textarea”, focus: true},
{name:“check”, type:“checkbox”, map_to:“checked_task”},
{name: “time”, height: 72, type: “duration”, map_to: “auto”}
];
gantt.locale.labels.section_check = “Checkbox”;
gantt.init(“gantt_here”);[/code]

docs.dhtmlx.com/gantt/desktop__s … lumns.html
docs.dhtmlx.com/gantt/desktop__d … _form.html
docs.dhtmlx.com/gantt/desktop__c … ditor.html

#3

hello advance… i’ve some problem too with checkbox… i’am adding checkbox on specify column not in lightbox. but, when i’am checked the checkbox form and i’am click other checkbox, the checkbox back to “not checked”…

docs.dhtmlx.com/gantt/desktop__s … lumns.html

this is my code

gantt.config.columns = [

            {name:"text", tree:true, resize:true ,"label":"[[TASK]]",width:'*'},

            {name:"start_date", align: "center" ,"label":"[[START]]" ,width:'*', template:function(date){ 

                return convert_date(gantt.templates.tooltip_date_format(date.start_date));

           	   }

            },

            {name:"duration", align: "center","label":"[[DAY]]",width:'*' },

           {name:"checked", label:"Checked", template:function(task){
                 return "<input type='checkbox' name='test' id='test' value='1'>";
                  }
           }

        ];

thx advance… sorry, my english is bad .

#4

I have the same trouble with checkboxes.

Anybody could solve this?

#5

Hi,
you need to bind the state of a checkbox you render to the state of the task - make it checked/unchecked depending on a certain property of the task object, and change that property of the task when user checks or unchecks the checkbox, there shouldn’t be any issues with that :
https://snippet.dhtmlx.com/de16af567

gantt.config.columns = [
  {name:"text", tree:true, resize:true ,"label":"[[TASK]]",width:150},
  {name:"start_date", align: "center" ,"label":"[[START]]" ,width:90},
  {name:"duration", align: "center","label":"[[DAY]]",width:50 },
  {name:"checked", label:"Checked", template:function(task){
    var checked = !!task.checked ? " checked" : "";
    return "<input class='gantt-checkbox-column' type='checkbox' name='test' id='test' value='1' " +
       checked+ "/>";
  }
  }
  
];

gantt.attachEvent("onTaskClick", function(id, e){
   var checkbox = gantt.utils.dom.closest(e.target, ".gantt-checkbox-column");
  
  if(checkbox){
    checkbox.checked = !!checkbox.checked;
    gantt.getTask(id).checked = checkbox.checked;
    return false;
  }else{
   return true; 
  }
});
2 Likes
#6

hi, is it possible to add two checkbox in one column with different values (i.e. value=1 and value=2). and when i check the checkbox with value=2 a text box should appear either in a separate column or in the same column.

#7

Hello Tewad,
It is possible to display any HTML elements inside the grid by using the template function:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates
However, each time Gantt repaints the changes, it will create new HTML elements in the grid, so you need to save the radiobox state in the task property.
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/9ad5223a5