Groups

Group-Übersicht

Eine Group ist eine eigenständige Art von Diagram-Element. Sie können einfache oder komplexere Schemata erstellen, indem Sie Formen oder andere Groups auf unterschiedliche Weise gruppieren. Sie können sowohl einstufige als auch verschachtelte Groups erstellen und deren Erscheinungsbild und Verhalten konfigurieren.

Hinweis

Groups sind nur im Standardmodus von Diagram/Diagram Editor verfügbar (type: "default").

Groups erstellen

Um eine Group zu erstellen, geben Sie "$group" als Wert des Attributs type innerhalb des Group-Objekts an, während Sie die zugehörige JSON-Struktur zum Laden in das Diagram vorbereiten:

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "User Access"
        },
        groupChildren: ["1.1", "1.2"]
    },
    {
        type: "it",
        id: "1.1",
        x: 50,
        y: 75,
        text: "Remote Desktop"
    },
    {
        type: "it",
        id: "1.2",
        x: 200,
        y: 75,
        text: "Login Server"
    },
];

// Diagram initialisieren
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Eigenschaften

Weitere Informationen finden Sie in der vollständigen Liste der Konfigurationseigenschaften eines group-Objekts, mit denen Sie die Positionierung und das Erscheinungsbild der Group konfigurieren können.

Formen im PERT-Modus gruppieren

Um die Formtypen "task" und "milestone" im PERT-Modus des Diagram zu gruppieren, verwenden Sie das "project"-Objekt im Datensatz eines Diagram. Das "project"-Objekt dient als Container für Aufgaben und Meilensteine und funktioniert wie eine Group. Es ermöglicht die Erstellung von PERT-Diagrammen mit verschiedenen Verschachtelungsebenen und bietet eine visuelle Gruppierung.

const data = [
    {
        "id": "4.2",
        "text": "QA Testing",
        "type": "project",
        "parent": "4",
        "start_date": new Date(2026, 1, 18),
        "duration": 3,
        "progress": 0,
        "open": true
    },
    {
        "id": "4.2.1",
        "text": "Functional Testing",
        "type": "task",
        "parent": "4.2",
        "start_date": new Date(2026, 1, 18),
        "duration": 2
    },
    {
        "id": "4.2.2",
        "text": "Usability Testing",
        "type": "task",
        "parent": "4.2",
        "start_date": new Date(2026, 1, 20),
        "duration": 1
    }
];

Eigenschaften

Weitere Informationen finden Sie in der vollständigen Liste der Konfigurationseigenschaften eines "project"-Objekts, mit denen Sie die Positionierung und das Erscheinungsbild von Aufgaben und Meilensteinen im Projekt konfigurieren können.

Group-Kopfzeile konfigurieren

Die Kopfzeile der Group ist standardmäßig deaktiviert. Um eine Group mit Kopfzeile zu erstellen, müssen Sie die Eigenschaft header im Konfigurationsobjekt der Group angeben.

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {}
    }
];

Die Eigenschaft enthält mehrere Attribute, mit denen Sie die Konfiguration der Group-Kopfzeile einfach anpassen können. Sie können beispielsweise die Höhe der Kopfzeile und ihre Position festlegen, den Text für Ihre Kopfzeile angeben und ihre Einstellungen anpassen.

Sehen Sie sich die vollständige Liste der API-Eigenschaften des Group-Objekts an.

Ein Kopfzeilen-Symbol

Um eine Group ein- oder auszuklappen, aktivieren Sie das Attribut closable der Eigenschaft Kopfzeile. Dadurch wird der Kopfzeile ein Symbol hinzugefügt, mit dem ein Benutzer eine Group ein- oder ausklappen kann.

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "Top and collapsed header with tеxt alignment",
            closable: true
        }
    }
];

Sie können die Farbe des Symbols über das Attribut iconColor des Group-Objekts ändern.

Verhalten von Group-Elementen konfigurieren

Standardmäßig können Sie jedes untergeordnete Element der Group aus der Group herausziehen und in eine andere Group hineinziehen. Um zu ändern, wie sich die Group-Elemente verhalten, verwenden Sie die Attribute groupBehavior und padding der Eigenschaft exitArea des Group-Objekts.

Hinweis

Die Eigenschaft exitArea definiert nur das Verhalten der untergeordneten Elemente der ersten Ebene der konfigurierbaren Group.

Mit den Werten "unbound" und "boundBorderExtension" des Attributs groupBehavior können Sie festlegen, ob die untergeordneten Elemente aus der Group herausbewegt werden können, und bewirken, dass sich die Ränder der Group erweitern, wenn ein Benutzer versucht, ein Element nach außen zu ziehen. Bei Bedarf können Sie die Möglichkeit, Elemente aus der Group herauszuziehen, auch über den Wert "boundNoBorderExtension" deaktivieren.

Wenn groupBehavior auf "boundNoBorderExtension" oder "boundBorderExtension" gesetzt ist, können Sie den Abstand zwischen der Group und dem Rand des Elements festlegen, wenn das Element innerhalb der Group verschoben wird. Verwenden Sie dazu das Attribut padding:

const data = [
    {
        type: "$group",
        id: 1,
        width: 830,
        height: 400,
        x: 0,
        y: 0,
        exitArea: {
            groupBehavior: "boundBorderExtension",
            padding: 10
        },
        //fixed: true,
        groupChildren: ["1.1", "1.2", "1.3"]
    },
    // ...
];