Radio

Eine Gruppe von Radiobuttons

Hinweis

Aktivieren Sie die editors-Erweiterung, um die Steuerung im Lightbox verwenden zu können

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

Radiobutton im Lightbox

Initialisierung

Um die Radio-Steuerung dem Lightbox hinzuzufügen, befolgen Sie diese Schritte:

1. Aktivieren Sie die 'editors'-Erweiterung auf der Seite:

scheduler.plugins({
    editors: true
});

2. Fügen Sie den Abschnitt zur Lightbox-Konfiguration hinzu:

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

3. Legen Sie die Beschriftung für den Abschnitt fest:

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

Radiobutton im Lightbox

Eigenschaften

Hier sind die wichtigsten Eigenschaften, die üblicherweise für das 'radio'-Steuerelement gesetzt werden (die vollständige Liste finden Sie lightbox):

name	(string) der Name des Abschnitts
height	(number) die Höhe des Abschnitts
map_to	(string) der Name einer Daten-Eigenschaft, die dem Abschnitt zugeordnet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) der Typ des Steuerelements des Abschnitts
options	(array of objects) definiert die Optionen des Steuerelements (für 'select', 'multiselect', 'radio', 'combo'-Steuerungen). Jedes Objekt im Array spezifiziert eine einzelne Option und besitzt diese Eigenschaften: key - (string) die Option-ID. Dieses Attribut wird mit der Daten-Eigenschaft des Events verglichen, um Optionen den Events zuzuordnen label - (string) die Bezeichnung der Option
vertical	(boolean) gibt an, ob Radiobuttons vertikal (true) oder horizontal (für die 'multiselect' und 'radio'-Steuerungen) angeordnet werden sollen

Das Steuerelement mit Daten befüllen

Im Allgemeinen sollten Sie zum Festlegen der Werte für die Radiobuttons den options-Parameter verwenden:

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

Items im [options]-Parameter müssen zwei Pflicht-Eigenschaften besitzen:

• key - die Option-ID
• label - die Bezeichnung der Option

Werte der Radiobuttons vom Server abrufen

Um Werte für Radiobuttons festzulegen, die aus dem Server abgerufen werden, verwenden Sie die Methode serverList:

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

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

Die Datenantwort für die Methode [load] sollte eine Sammlung enthalten, deren Name der Serverliste im JSON dem folgenden Format entspricht (siehe JSON mit Sammlungen):

{ 
   "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"}/*!*/
      ]/*!*/
   }/*!*/
}

Beispiel-Backend-Handler (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 });
});

Hinweis

Hinweis, Sie können die updateCollection-Methode verwenden, um die Liste der abgerufenen Optionen zu aktualisieren

Ereignisbehandlung für die Radio-Steuerung

Standardmäßig bietet die dhtmlxScheduler API keine spezifischen Ereignis-Handler für Radiobuttons im Scheduler Lightbox an.

Sie können jedoch einen Click-Handler für die Lightbox-Radio-Steuerungen wie folgt zuweisen:

1. Ermitteln Sie die Radiobutton-Elemente, nachdem die Lightbox geöffnet wurde.

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

2. Weisen Sie den gefundenen Radiobuttons der Lightbox das onclick-Ereignis zu.

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

3. Schließlich sollten Sie eine Funktion festlegen, die nach dem Klicken des Radiobuttons ausgeführt wird.

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

Verwandtes Beispiel Event handling for the Radio Control