specifies the lightbox object

LightboxSections lightbox;


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"}


The lightbox object has 1 property:

  • sections - (array) - specifies lightbox sections
// default lightbox definition   
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"duration"}

Objects in the sections array can have the following properties, depending on the type of a section:

Common for all sections

  • name - (string) - the section's name (according to this name, dhtmlxGantt will take the section's label from the locale.labels collection). For example, for the time section, dhtmlxGantt will take the label stored as gantt.locale.labels.section_time.
  • map_to - (string) - the name of a data property that will be mapped to the section.
  • type - (string) - the type of the section control (editor).
  • height? - (number) - optional, the section's height. Not used with the checkbox and radio sections.
  • focus? - (boolean) - optional, if set to true, the section will take focus on opening the lightbox

Time and Duration controls

  • readonly? - (boolean) - optional, if you set the "true" value, the section will be read-only
  • year_range? - (number | number[]) - optional, sets a range for the year selector. Can be set in 2 ways:
    • year_range: [2005, 2025] - a period from 2005 till 2025 year
    • year_range: 10 - a period [current year - 10 years; current year + 10 years]
  • single_date? - (boolean) - optional, if you set the "true" value, just the 'start Date' selector will be presented in the section.
    Edited tasks will be specified only by the start date and have a zero duration. Makes sense only for milestones.
  • time_format? - (string[]) - optional, sets the order of date-time selectors
  • autofix_end? - (boolean) - optional, defines whether the end date will be corrected automatically if the selected start date is greater than the end date, true by default. The disabled mode allows validating the dates, but if you enable the mode and don't validate the dates, you can get tasks with 0 duration when the start_date is greater than the end_date.

Select control

  • onchange? (e): any - optional, specifies the 'onChange' event handler function for the section's control
    • e - (Event) - a native event object.

Select, Checkbox, Radio and Resources controls

  • options? - (object[]) - optional, defines select options of the control.Each object in the array specifies a single option and takes the following properties:
    • key - (number | string) - the option's id. This attribute is compared with the task's data property to assign select options to tasks
    • label - (string) - the option's label
    • unit? - (string | number) - optional, the unit of measurement of the resource (for the Resources control)
  • default_value? - (any) - optional, the default value of the section's control. Applied only if the input value is underfined. For the resources control is applied if the value of the resource is underfined.

Parent control

  • allow_root? - (boolean) - optional, if set to "true", the options list will contain an additional option that will allow users to set the root level as the parent for tasks. Used in pair with the root_label property
  • root_label? - (string) - optional, sets a label for the root-level parent. Used in pair with the allow_root property
  • sort? (task1, task2): number - optional, sets a sorting function for the select options
    • task1 - (Task) - an object of the first task that will be sorted
    • task2 - (Task) - an object of the second task that will be sorted
  • filter? (id, task): boolean - optional, sets a filtering function for the select options. Takes the task id and task object as parameters
    • id - (string | number) - the ID of the task object
    • task - (Task) - the Task object
  • template? (start_date, end_date, task): string|number - optional, sets a template for select options
    • start_date - (Date | number) - the start date of the task object
    • end_date - (Date | number) - the end date of the task object
    • task - (Task) - the Task object

Typeselect control

  • filter - (function) - sets a filtering function for the types of tasks. Takes the type name as a parameter
See also
Change log

If either gantt.config.csp is set to true or Gantt works in the Salesforce environment, the lightbox will be rendered inside the Gantt container (from v7.1.13)

Back to top