Select

var alert_opts = [
    { key: 1, label: 'None' },
    { key: 2, label: 'On start date' },
    { key: 3, label: '1 day before' }
];
 
scheduler.locale.labels.section_select = 'Alert';
 
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:40, map_to:"type", type:"select", options:alert_opts},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Related sample:  Basic select editor in the lightbox

Initialization

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

  1. Add the section to the lightbox configuration:
    scheduler.config.lightbox.sections = 
        { name:"description", ... },
        { name:"alert", height:40,map_to:"type",type:"select", options:alert_opts},
        { name:"time", ...}
    ];
  2. Set the label for the section:
    scheduler.locale.labels.section_select = "Alert";

Related sample:  Basic select editor in the lightbox

Properties

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

Populating the control with data

Generally, to set values for the Select control you should use the options parameter:

scheduler.config.lightbox.sections = 
    {   name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'None'},
            { key: 2, label: 'On start date'},
            { key: 3, label: '1 day before'}
    ]},
    ...
];

Items in the options parameter must have 2 mandatory properties:

  • key - the option's id
  • label - the option's label

Populating the 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:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"type",map_to:"type",type:"select",options:scheduler.serverList("type")},
    {name:"time", ...}
];
 
scheduler.load("./data/types");

The data response for the load method should contain a collection with the server list name specified in JSON of the following format:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Interview",
          "type":"1"
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Performance review",
          "type":"2"
      }
   ], 
   "collections": {      "type":[               {"value":"1","label":"Interview"},         {"value":"2","label":"Performance review"},         {"value":"3","label":"Request"}      ]   }}

If you use PHP Connector library, the server code may look like the following:

//types.php
<?php
    require_once('../../../../connector-php/codebase/scheduler_connector.php');
    include ('../../common/config.php');
 
    $list = new JSONOptionsConnector($res, $dbtype);
    $list->render_table("types","typeid","typeid(value),name(label)");
 
    $scheduler = new JSONSchedulerConnector($res, $dbtype);
    $scheduler->set_options("type", $list);
    $scheduler->render_table(
        "tevents",
        "event_id",
        "start_date,end_date,event_name,type"
    );
?>

Related sample:  Populating a select editor from the server

Note, you can use the updateCollection method to update the list of retrieved options

Back to top