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.php");

where the types.php is a server-side script, retrieving the events loaded to the scheduler, and the 'type' options collection loaded to the Select control:

//types.php
<?php
    require_once('../../../../connector-php/codebase/scheduler_connector.php');
    include ('../../common/config.php');
 
    $list = new OptionsConnector($res, $dbtype);
    $list->render_table("types","typeid","typeid(value),name(label)");
 
    $scheduler = new schedulerConnector($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 retrieving options

Retrieving JSON data from the server

To retrieve data from the server in JSON format, you need to:

  • Client side: specify the 2nd parameter in the init method and set it to 'json' value
scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"type",map_to:"type",type:"select",options:scheduler.serverList("type")},
    {name:"time", ...}
];
 
scheduler.load("./data/types.php", 'json');
  • Server side: use the JSONOptionsConnector connector
<?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)");
?>

Related sample:  Populating a select editor with JSON data from the server

Back to top