Select Control

A drop-down list box.

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"priority", type:"select", options: [         {key:1, label: "High"},                                                       {key:2, label: "Normal"},                                                     {key:3, label: "Low"}                                                      ]},                                                                          {name:"time", height:72, type:"duration", map_to:"auto"}
gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control


To add the select control to the lightbox, follow these steps:

1) Add a section to the lightbox configuration:

var opts = [
    {key:1, label: "High"},                                            
    {key:2, label: "Normal"},                                         
    {key:3, label: "Low"}                                            
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},
    {name:"priority", height:22, map_to:"priority",type:"select",options:opts},                                                                           {name:"time", height:72, type:"duration", map_to:"auto"}

2) Set a label for the section:

gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control


The following properties are mostly important and commonly set for the select control (see the full list here):

  • name - (string) the section name
  • height - (number) the section height
  • map_to - (string) the name of a data property that will be mapped to the section
  • type - (string) the type of the section control
  • focus - (boolean) if set to true, the section will take focus on opening the lightbox
  • options - (array) an array of objects. Defines select options of the control (used for the select, checkbox and radio controls). Each object in the array specifies a single option and takes the following properties:
    • key - (string) the option id. This attribute is compared with the task data property to assign options to tasks
    • label - (string) the option label
  • default_value - (any) the default value of the section's control. Applied only if the input value is underfined
  • onchange - (function) specifies the 'onChange' event handler function for the section's control

Populating control with data

Generally, to set values for the select control, use the options parameter:

gantt.config.lightbox.sections = [
    { name:"priority",height:22, map_to:"priority",type:"select",
      options: [ 
        {key:1, label: "High"},                                               
        {key:2, label: "Normal"},                                             
        {key:3, label: "Low"}                                                

Items in the options parameter have 2 mandatory properties:

  • key - the option id
  • label - the option label

Populating control with data from the server

To populate the control from the server, set the options option to the value returned by the serverList method:

gantt.config.lightbox.sections = [
    {name:"description", ...},
    { name:"priority",map_to:"priority",type:"select",
        options:gantt.serverList("priority")},     {name:"category", map_to:"category", type:"select", 
        options:gantt.serverList("category")},     {name:"time", ...}

The output of the /data url is the following:

    {"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},
    {"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},
    {"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}
  "collections": {     "priority":[

Loading options via dhtmlxConnector

Here is a sample of dhtmlxConnector initialization:

    $res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
    $list = new OptionsConnector($res);
    $gantt = new JSONGanttConnector($res);
    $gantt->set_options("priority", $list);
Back to top