Available only in PRO Edition

Resources Control

A complex control used to assign multiple resources and their quantity to a task.

Resources control server options

gantt.config.lightbox.sections = [
 {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
 {name:"owner",height:60, type:"resources", options:gantt.serverList("people"),       map_to:"owner_id", default_value:8},                                  {name: "time", type: "duration", map_to: "auto"}
];

Resources control options

gantt.config.lightbox.sections = [
  { name:"description",height:38,map_to:"text",type:"textarea",focus:true },
  { name:"time",type:"duration",map_to:"auto" },
  { name:"rooms",type:"resources",map_to:"rooms", options:[        { key: 1, label: "room 1", unit: "hours" },          { key: 2, label: "room 2", unit: "hours" },         { key: 3, label: "room 3", unit: "hours" }       ]    }    ];
 
gantt.locale.labels.section_rooms = "Rooms";

Related sample: Resources control

You can also create a custom control to assign multiple resources to a task.

Initialization

To add the resources control to the lightbox, follow the steps below:

1. Add a section to the lightbox configuration:

var roomsMap =  [
    { key: 1, label: "room 1", unit: "hours" },
    { key: 2, label: "room 2", unit: "hours" },
    { key: 3, label: "room 3", unit: "hours" }
];
 
gantt.config.lightbox.sections = [
  { name:"description",height:38,map_to:"text",type:"textarea",focus:true },
  { name:"time",type:"duration",map_to:"auto" },
  { name:"rooms",type:"resources",map_to:"rooms", options:roomsMap}    ];

2. Set a label for the section:

gantt.locale.labels.section_resources = "Rooms";

Related sample: Resources control

Properties

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

name - (string) the section name
map_to - (string) the name of a data property that will be mapped to the section
type - (string) the type of the section control
options - (array) an array of objects. Defines select options of the control (used for the select, checkbox,radio and resources controls). Each object in the array specifies a single option and includes 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
- unit - (number) the unit of measurement of the resource
focus - (boolean) if set to true, the section will take focus on opening the lightbox
default_value - (any) the default value of the section's control. Applied if the value of the resource is underfined. Each option from the options array can have its own default value specified.

Populating control with data

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

gantt.config.lightbox.sections = [
  { name:"rooms",type:"resources",map_to:"rooms",
    options:[
      { key: 1, label: "room 1", unit: "hours" },   
      { key: 2, label: "room 2", unit: "hours" },   
      { key: 3, label: "room 3", unit: "hours" }  
    ]  
  }    
];

Items in the options parameter have 3 mandatory properties:

key - the option id
label - the option label
unit - the unit of measurement of the resource

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", height: 38, map_to: "text", type: "textarea", focus: true},
 {name: "resources", type: "resources", map_to: "owner_id", default_value:8,
    options: gantt.serverList("people")},
 {name: "time", type: "duration", map_to: "auto"}
];
 
gantt.init("gantt_here");
gantt.load("/data");