Radio

A set of radio buttons

Include the ext/dhtmlxscheduler_editors.js file to use the control in the lightbox

var priorities = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'Low' }
];
 
scheduler.locale.labels.section_priority = 'Priority';
 
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"priority", height:58, options:priorities, 
                map_to:"priority", type:"radio", vertical:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Related sample:  Radio button in the lightbox

Initialization

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

  1. Include the 'ext/dhtmlxscheduler_editors.js' extension file on the page:
    <script src="../codebase/ext/dhtmlxscheduler_editors.js"></script>
  2. Add the section to the lightbox configuration:
    scheduler.config.lightbox.sections = [
        { name:"description", ... },
        { name:"radiobutton", height:58, options:priorities, 
        map_to:"priority", type:"radio", vertical:true},
        { name:"time", ...}
    ];
  3. Set the label for the section:
    scheduler.locale.labels.section_priority = 'Priority';

Related sample:  Radio button in the lightbox

Properties

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

Populating the control with data

Generally, to set values for the radio buttons you should use the options parameter:

scheduler.config.lightbox.sections = 
    {   name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'High' },
            { key: 2, label: 'Medium' },
            { key: 3, label: 'Low' }
    ]},
    ...
];

Items in the options parameter must have 2 mandatory properties:

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

Getting the radio buttons values from the server

To set values for radio buttons, using data retrieved from the server, use the serverList method:

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

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",
          "priority":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":"Low"},         {"value":2,"label":"Medium"},         {"value":3,"label":"High"}      ]   }}

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"
    );
?>

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

Back to top