Radio

Набор радиокнопок

примечание

Включите расширение editors, чтобы использовать элемент управления в лайтбоксе

scheduler.plugins({
    editors: true /*!*/
});

const 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"}
];

Радиокнопка в лайтбоксе

Инициализация

Чтобы добавить элемент Radio в lightbox, выполните следующие шаги:

1. Включите на странице расширение 'editors':

scheduler.plugins({
    editors: true
});

2. Добавьте секцию в конфигурацию лайтбокса:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"radiobutton", height:58, options:priorities, 
    map_to:"priority", type:"radio", vertical:true},
    { name:"time", ...}
];

3. Задайте метку для секции:

scheduler.locale.labels.section_priority = 'Priority';

Радиокнопка в лайтбоксе

Свойства

Следующие свойства наиболее важны и обычно устанавливаются для элемента управления 'radio' (см. полный список здесь):

name	(string) имя секции
height	(number) высота секции
map_to	(string) имя свойства данных, которое будет отображено в секции
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) тип элемента управления секции
options	(array of objects) задаёт варианты выбора элемента управления (для контролов 'select', 'multiselect', 'radio', 'combo'). Каждый объект массива задаёт одну опцию и имеет следующие свойства: key - (string) идентификатор опции. Это свойство сравнивается с данными события, чтобы назначать опции событиям label - (string) метка опции
vertical	(boolean) указывает, следует ли располагать радиокнопки вертикально (true) или горизонтально (для контролов 'multiselect' и 'radio')

Заполнение элемента данными

Как правило, для задания значений радиокнопкам следует использовать параметр options:

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

Элементы в параметре options должны иметь 2 обязательных свойства:

• key - (string) идентификатор опции
• label - (string) метка опции

Получение значений радиокнопок с сервера

Чтобы задать значения радиокнопкам, используя данные, полученные с сервера, используйте метод serverList:

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

scheduler.load("/api/types");

Ответ данных для метода load должен содержать коллекцию с именем списка сервера, указанным в JSON в следующем формате:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2027-03-02 15:00:00",
          "end_date":"2027-03-04 16:00:00",
          "text":"Interview",
          "priority":1
      },
      {
          "id":"2",
          "start_date":"2027-03-02 17:00:00",
          "end_date":"2027-03-04 18:00:00",
          "text":"Performance review",
          "type":2
      }
   ], 
   "collections": {/*!*/
      "type":[/*!*/      
         {"value":1,"label":"Low"},/*!*/
         {"value":2,"label":"Medium"},/*!*/
         {"value":3,"label":"High"}/*!*/
      ]/*!*/
   }/*!*/
}

Пример обработчика бэкенда (Node.js/Express):

app.get("/api/types", async (req, res) => {
  const data = await eventsService.list();
  const collections = {
    type: [
      { value: 1, label: "Low" },
      { value: 2, label: "Medium" },
      { value: 3, label: "High" }
    ]
  };
  res.json({ data, collections });
});

примечание

Примечание: вы можете использовать метод updateCollection для обновления списка полученных опций

Обработка событий для радиоконтроля

По умолчанию API dhtmlxScheduler не предоставляет специальных обработчиков событий для радиокнопок в лайтбоксе Scheduler.

Но вы можете назначить обработчик клика для радиокнопок лайтбокса следующим образом:

1. Получите элементы радиокнопок после открытия лайтбокса.

scheduler.attachEvent("onLightbox", function(){
    const node = scheduler.formSection("type").node;
    const radios = node.getElementsByTagName("input");
    ...
});

2. Назначьте событие onclick найденным радиокнопкам лайтбокса.

scheduler.attachEvent("onLightbox", function(){
    ...
    for(let i = 0; i < radios.length; i++){
      radios[i].onclick = onRadioClick; 
    }
});

3. Наконец, задайте функцию, которая будет выполняться после нажатия радиокнопки.

function onRadioClick(event){
    let e = event || window.event,
        node = this;
  
    dhtmlx.message(node.value);
}

Связанный пример Обработка событий для радиоконтроля