Migration von älteren Versionen

8.0 -> 9.0

Das Update auf v9.0 bringt mehrere Breaking Changes mit sich.

Skins auf CSS-Variablen umgestellt

CSS-Skins (Themes) wurden komplett überarbeitet und nutzen jetzt CSS-Variablen. Während die HTML-Struktur der Komponente und die CSS-Klassennamen größtenteils unverändert geblieben sind, funktionieren CSS-Styles, die für ältere Versionen des Gantt geschrieben wurden, unter Umständen nicht mehr wie erwartet mit v9.0.

Beispielsweise wurde folgender Stil verwendet, um Aufgaben je nach Priorität einzufärben:

<style>    /* allgemeine Styles zum Überschreiben von Rahmen-/Fortschrittsfarbe */
    .gantt_task_line{
        border-color: rgba(0, 0, 0, 0.25);
    }
    .gantt_task_line .gantt_task_progress {
        background-color: rgba(0, 0, 0, 0.25);
    }
 
    /* hoch */
    .gantt_task_line.high {
        background-color: #03A9F4;
    }
    .gantt_task_line.high .gantt_task_content {
        color: #fff;
    }
 
    /* mittel */
    .gantt_task_line.medium {
        background-color: #f57730;
    }
    .gantt_task_line.medium .gantt_task_content {
        color: #fff;
    }
 
    /* niedrig */
    .gantt_task_line.low {
        background-color: #e157de;
    }
    .gantt_task_line.low .gantt_task_content {
        color: #fff;
    }
</style>

Ab v9.0 wird derselbe Effekt mit folgendem Stil erreicht:

<style>    /* hoch */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* mittel */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* niedrig */
    .gantt_task_line.low {
        --dhx-gantt-task-background: #fff;
        --dhx-gantt-task-color: #fff;
    }
</style>

Die verfügbaren Variablen finden Sie auf der Seite Skins-Anpassung.

Bei der Migration ist es wahrscheinlich notwendig, bestehendes CSS zu aktualisieren, um das gewünschte Design zu erzielen.

Einzelne CSS-Datei

Alle Themes sind jetzt in einer einzigen dhtmlxgantt.css Datei enthalten.

Um ein bestimmtes Skin zu aktivieren, verwenden Sie die Eigenschaft gantt.skin:

gantt.skin = "material";

Oder die Methode setSkin:

gantt.setSkin("material");

Beachten Sie, dass gantt.setSkin() das Gantt neu zeichnet.

Wenn Sie ein Skin außer terrace verwenden, sind folgende Migrationsschritte erforderlich:

1) Ersetzen Sie die CSS-Datei des Skins durch die Datei dhtmlxgantt.css:

<!-- ALT -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt_material.css" type="text/css">
<!-- NEU -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt.css" type="text/css">

2) Aktivieren Sie das gewünschte Skin per JavaScript:

gantt.setSkin("material");
gantt.init("gantt_here");

Eingebaute Unterstützung für Baselines, Deadlines und Constraints

Früher mussten Baselines manuell über die API gantt.addTaskLayer hinzugefügt werden. Mit Gantt 9.0 gibt es nun eine eingebaute Unterstützung für Baseline-Entitäten sowie Deadlines und Aufgaben-Constraints.

Falls Sie die Standardeinstellungen deaktivieren und Baselines und Deadlines manuell rendern möchten, können Sie die entsprechenden Konfigurationsoptionen verwenden: baselines und deadlines:

// eingebaute Baseline-Funktionalität deaktivieren
gantt.config.baselines = false;
 
// eingebaute Deadlines-Funktionalität deaktivieren
gantt.config.deadlines = false;

Die eingebaute Anzeige von Aufgaben-Constraints kann ebenfalls über die erweiterte auto_scheduling-Konfiguration deaktiviert werden:

gantt.config.auto_scheduling = {
  enabled: true, 
  show_constraints: false };

Dadurch wird die Standardanzeige von Aufgaben-Constraints deaktiviert, während die Auto-Scheduling-Funktionalität weiterhin aktiv bleibt.

Feste Labels in der Timeline

Ab v9.0 sind Zeitskalen-Labels standardmäßig "sticky". Das bedeutet, dass die Labels beim Scrollen sichtbar bleiben und dem Viewport folgen, bis sie natürlich aus dem Bildbereich verschwinden. In früheren Versionen waren die Labels zentriert in ihren Zellen und blieben beim Scrollen nicht sichtbar.

Wenn Sie das alte Verhalten wiederherstellen und die festen Labels deaktivieren möchten, können Sie die Eigenschaft sticky des scale Objekts auf false setzen:

gantt.config.scales = [
  {unit: "year", step: 1, format: "%Y", sticky: false},
  {unit: "month", step: 1, format: "%F", sticky: false},
  {unit: "day", step:1, format: "%j", sticky: false}
];

Promise-Implementierung

Die Bluebird-Bibliothek wurde aus dem Gantt-Bundle entfernt. Promise verwendet jetzt die native Promise-Implementierung.

Lightbox-Größenanpassung

Seit v9.0 ist die Methode resizeLightbox veraltet und wurde aus dem Gantt-Code entfernt. Sie wird nicht mehr benötigt, da die Größenanpassung der Lightbox jetzt automatisch funktioniert. Beachten Sie, dass Sie die Methode resizeLightbox() aus Ihrer Konfiguration entfernen sollten, um Fehler zu vermeiden, falls sie noch vorhanden ist.

7.1 -> 8.0

Ressourcen-Zuweisungen

In früheren Versionen von DHTMLX Gantt wurden Änderungen an Ressourcen-Zuweisungen als Eigenschaften von Aufgabenobjekten an das Backend gesendet, was die Integration mit Backend-APIs in manchen Fällen unnötig erschwerte.

Ab DHTMLX Gantt v8.0 können Änderungen an Ressourcen und Ressourcen-Zuweisungen über den dataProcessor geleitet werden. Weitere Informationen finden Sie im Abschnitt Routing CRUD actions of resources and resource assignments.

Export-Service

Ab v8.0 ist die Import/Export-Funktionalität in die Gantt-Bibliothek integriert.

Falls Sie bereits https://export.dhtmlx.com/gantt/api.js auf Ihrer Seite eingebunden haben, um den Online-Export-Service zu nutzen, z.B.:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

müssen Sie die Datei entfernen und die export_api-Erweiterung mit der gantt.plugins Methode aktivieren:

gantt.plugins({
    export_api: true
});

Veraltete Klassennamen

Seit v8.0 wurden die folgenden veralteten Klassennamen entfernt und durch neue ersetzt:

".dhtmlx-info" -> ".gantt-info"
".dhtmlx-error" -> ".gantt-info"
".dhtmlx_popup_title" -> ".gantt_popup_title"
".dhtmlx_popup_text" -> ".gantt_popup_text"
".dhtmlx_popup_controls" -> ".gantt_popup_controls"
".dhtmlx_ok_button" -> ".gantt_ok_button"
".dhtmlx_click_me_button" -> ".gantt_click_me_button"
".dhtmlx_popup_button" -> ".gantt_popup_button"
".dhtmlx_modal_box" -> ".gantt_modal_box"
".dhtmlx-" + config.type -> ".gantt-" + config.type
".dhtmlx_" + btn.label.toLowerCase() + "_button" -> ".gantt_" + btn.label.toLowerCase() + "_button"

7.0 -> 7.1

Version 7.1 bringt keine Breaking Changes mit sich, die eine Anpassung des bestehenden Codes erfordern würden.

Es gibt eine kleine visuelle Änderung in der Darstellung von Meilensteinen, die bei Bedarf per Code wieder rückgängig gemacht werden kann. Große Projekte, die das Ressourcen-Panel verwenden, können eine mögliche Performance-Verschlechterung durch die neue Logik der Ressourcen-Zuweisungen erfahren. Diese kann durch das Deaktivieren der nicht benötigten Logik gemindert werden.

Meilensteine

Die Größe der Meilenstein-Elemente wurde im Vergleich zu früheren Versionen geändert, damit die Meilensteine die gleiche Höhe wie reguläre Balken haben.

Wenn Sie möchten, dass die Meilensteine wie in früheren Versionen aussehen, können Sie die Höhe der Meilenstein-Elemente mit der Eigenschaft bar_height anpassen:

{
    id:23, text:"Mediate milestone", start_date:"13-04-2018", 
    type:"milestone", parent:"15", bar_height: 35
}

Ressourcen-Zuweisungen

Version 7.1 fügt eine komplexe Logik für Ressourcen-Zuweisungen hinzu, die es ermöglicht, Daten der Ressourcen-Zuweisungen anzugeben und mit den Ressourcen-Zuweisungen über DataStore zu arbeiten. Dies sollte den bestehenden Code nicht beeinflussen, kann jedoch zu spürbarem Performance-Overhead bei Ressourcenberechnungen führen.

Wenn Sie keine Ressourcen bestimmten Terminen von Aufgaben zuweisen müssen, können Sie die neue Funktionalität mit der Konfiguration process_resource_assignments deaktivieren, um die Performance zu verbessern:

gantt.config.process_resource_assignments = false;

Neue optionale Eigenschaften von Aufgabenobjekten

Folgende Eigenschaften des Aufgabenobjekts werden jetzt vom Gantt verarbeitet und beeinflussen die Anzeige der Aufgaben:

"task.row_height"
"task.bar_height"
"task.hide_bar"
"task.rollup"

Wenn Sie benutzerdefinierte Eigenschaften mit denselben Namen verwenden, sollten Sie diese umbenennen, um Konflikte zu vermeiden.

Deep Copy beim Daten-Parsing

Gantt hat von v6.3.2 bis v7.1 eine Deep Copy von Datenobjekten beim Parsing durchgeführt.
Ab v7.1 ist diese Funktionalität standardmäßig deaktiviert.

Sie können das alte Verhalten wieder aktivieren, indem Sie gantt.config.deepcopy_on_parse auf true setzen:

gantt.config.deepcopy_on_parse = true;

Veraltete Konfiguration

Die Eigenschaft gantt.config.task_height ist seit v7.1 veraltet. Obwohl die Eigenschaft weiterhin funktioniert und die task_height-Konfiguration verwendet wird, wenn sie angegeben ist, sollten Sie besser die neue Option gantt.config.bar_height verwenden:

gantt.config.bar_height = 50;

6.3 -> 7.0

Erweiterungen und Sprachdateien

Das neueste Update v7.0 bringt zwei große Änderungen in der Struktur des Gantt-Pakets:

1) Alle Dateien der Erweiterungen sind jetzt im dhtmlxgantt.js-File gebündelt. Um eine der zusätzlichen Erweiterungen von dhtmlxGantt zu aktivieren, müssen Sie einen API-Aufruf verwenden.

Falls Sie bereits eine Erweiterungsdatei aus dem integrierten Paket auf Ihrer Seite eingebunden haben, z.B.:

<script src="../codebase/dhtmlxgantt.js"></script>
<script src="../codebase/ext/dhtmlxgantt_auto_scheduling.js"></script>

oder

import "dhtmlx-gantt";
import "dhtmlx-gantt/ext/dhtmlxgantt_auto_scheduling";

müssen Sie die Erweiterungsdatei entfernen und die Erweiterung mit der gantt.plugins Methode aktivieren:

gantt.plugins({
   auto_scheduling: true
});

Die vollständige Liste der Erweiterungen finden Sie hier.

Wenn Sie eine modifizierte Version von Erweiterungsdateien verwenden oder eigene Erweiterungen entwickelt haben, können Sie diese wie bisher als Datei auf einer Seite einbinden und sie funktionieren weiterhin.
Hinweis: Die Erweiterungen dhtmlxgantt_smart_rendering.js und dhtmlxgantt_csp.js wurden komplett entfernt und müssen nicht mehr manuell aktiviert werden.

2) Alle Sprachdateien sind jetzt im dhtmlxgantt.js-File enthalten. Um sie zu aktivieren, verwenden Sie einen API-Aufruf.

Wenn Sie eine Sprachdatei auf einer Seite eingebunden haben, müssen Sie diese entfernen und die gewünschte Sprache mit gantt.i18n.setLocale aktivieren:

gantt.i18n.setLocale("de");

Wenn Sie eine eigene Sprachdatei verwenden, kann diese wie bisher geladen werden.

Standard-Arbeitszeit-Einstellungen geändert

In allen Versionen vor 7.0 waren die Standard-Arbeitszeiten von 8:00 bis 17:00 Uhr, also 9 Stunden pro Tag.
Ab v7.0 sind die Arbeitszeiten 8:00-12:00, 13:00-17:00 Uhr, also 8 Stunden pro Tag.

Wenn Sie zu den vorherigen Einstellungen zurückkehren möchten, müssen Sie diese manuell setzen:

gantt.setWorkTime({hours: [8, 17]});

Content Security Policy

Die ext/dhtmlxgantt_csp.js-Erweiterung wird nicht mehr benötigt, da sie entfernt und durch die csp config ersetzt wurde, die standardmäßig aktiviert ist; die Erweiterung sollte aus dem Gantt entfernt werden.

Da die csp-Eigenschaft zur dhtmlxGantt-Bibliothek hinzugefügt wurde, werden gültige HTML5-Attribute, die in jedem Browser mit HTML5-Doctype verwendet werden können, allen Elementen des Gantt zugewiesen.

Daher empfehlen wir, bereits bestehende Attribute durch die neuen zu ersetzen:

"task_id" -> "data-task-id"
"link_id" -> "data-link-id"
"resource_id" -> "data-resource-id"
"column_index" -> "data-column-index"

Die alten Attribute sind jedoch weiterhin im Markup enthalten. Wenn Sie die Namen der Attribute nicht ändern, funktioniert Ihr Code weiterhin.

Styling von Gitterzellen

Früher wurde die Ausrichtung der Gitterzellen über display:inline-block realisiert. Ab Version 7.0 wird stattdessen display:flex verwendet und die Zellen werden in einem Flex-Container positioniert.

Diese Änderung hat keine Auswirkungen auf die für den Benutzer sichtbare Benutzeroberfläche (sie bleibt zu 100% identisch) und sollte keine Migrationsprobleme verursachen. Allerdings können einige Regressionen beim Styling der Gitterzellen mit diesem Update zusammenhängen.

"xml_date"-Konfiguration und -Template sowie "xml_format"-Templates entfernt

In Version 6.2 veraltete Konfigurationen und Templates wurden in Version 7.0 entfernt und durch neue ersetzt:

gantt.config.xml_date → gantt.config.date_format
gantt.templates.xml_date → gantt.templates.parse_date
gantt.templates.xml_format → gantt.templates.format_date

Falls Sie die alten Namen bereits in Ihrem Code definiert haben, funktionieren diese weiterhin. Andernfalls verwenden Sie bitte die neuere Version der API.

6.2 -> 6.3

Multi-Task-Auswahl

Seit Version 6.3 ermöglicht die ext/dhtmlxgantt_multiselect.js-Erweiterung automatisch das horizontale Verschieben mehrerer gleichzeitig ausgewählter Aufgaben. Wenn Sie diese Funktion deaktivieren möchten, verwenden Sie die drag_multiple-Eigenschaft und setzen Sie sie auf false (standardmäßig ist sie aktiviert).

gantt.config.drag_multiple = false;

Google Roboto-Schriftart ist nicht mehr im Material-Skin enthalten

Bis Version 6.3 war die Google Roboto-Schriftart über die import-Anweisung in den 'Material'-Skin von dhtmlxGantt eingebunden. Ab Version 6.3 wurde der Import entfernt, daher müssen Sie die Roboto-Schriftart manuell hinzufügen:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">

Verwendung mit Require.JS

Früher konnten Sie beliebige Namen für verschiedene Dateien der dhtmlxGantt-Bibliothek verwenden, die in eine auf RequireJS basierende App eingebunden wurden:

requirejs.config({
  paths: {
    "gantt": "../../codebase/dhtmlxgantt",
    "tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "marker": "../../codebase/ext/dhtmlxgantt_marker",
    "locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "tooltip": ["gantt"],
    "marker": ["gantt"],
    "locale_de": ["gantt"],
  }
});
requirejs(["gantt", "tooltip", "marker", "locale_de"],
function (dhx) {
  var gantt = dhx.gantt;
 ...
});

Ab Version 6.3 müssen die Namen der Module entsprechend der Ordnerstruktur der dhtmlxGantt-Bibliothek festgelegt werden:

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "ext/dhtmlxgantt_critical_path": "../../codebase/ext/dhtmlxgantt_critical_path",
    "locale/locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "ext/dhtmlxgantt_tooltip": ["dhtmlxgantt"],
    "ext/dhtmlxgantt_critical_path": ["dhtmlxgantt"],
    "locale/locale_de": ["dhtmlxgantt"],
  }
});
 
requirejs(["dhtmlxgantt", "ext/dhtmlxgantt_tooltip", "ext/dhtmlxgantt_critical_path", 
            "locale/locale_de"], 
function (dhx) {
  var gantt = dhx.gantt;
...
});

Stellen Sie sicher, dass der Modulname für jede Datei im Paket als relativer Pfad innerhalb des 'codebase'-Ordners des Pakets plus Dateiname angegeben wird, zum Beispiel:

Kernbibliothek:

"dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"

Erweiterungen:

"ext/dhtmlxgantt_critical_path": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_critical_path"
"ext/dhtmlxgantt_tooltip": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_tooltip"

Sprachpakete:

"locale/locale_de": "./vendor/dhtmlxgantt/locale/locale_de"
"locale/locale_be": "./vendor/dhtmlxgantt/locale/locale_be"

Inline-Editoren

Vor Version 6.3 waren die minimalen und maximalen Werte des date Inline-Editors auf die im Zeitstrahl sichtbaren Daten beschränkt, sofern keine benutzerdefinierten Min-/Max-Werte angegeben wurden.

Ab Version 6.3 gibt es keine Standardgrenzen für die minimalen und maximalen Werte von Datumseditoren mehr.

Um das vorherige Verhalten wiederherzustellen, können Sie dynamische min/max-Werte angeben:

const dateEditor = {type: "date", map_to: "start_date", 
  min: function(taskId){
    return gantt.getState().min_date
  },
  max: function( taskId ){
    return gantt.getState().max_date
  }
};

6.1 -> 6.2

Das Update auf Version 6.2 ist im Allgemeinen kompatibel mit Version 6.1 und sollte keine Codeänderungen erfordern. Allerdings wurde das Verhalten einiger Komponenten geändert (das alte Verhalten kann über die Konfiguration wiederhergestellt werden) und einige APIs wurden als veraltet markiert.

Smart Rendering und statischer Hintergrund

Die Smart-Rendering-Funktionalität wurde aktualisiert und ist jetzt in die Komponente eingebettet. Sie funktioniert nun sowohl im Haupt-Timeline-Bereich als auch in Ressourcen-Panels. Ab sofort sollten alle Zeitachsen nur noch die aktuell sichtbaren Zeilen und Zellen rendern.

Smart Rendering kann über die smart_rendering-Konfiguration deaktiviert werden, wodurch Gantt wieder das Standardverhalten von Version 6.1 annimmt:

gantt.config.smart_rendering = false;

Die dhtmlxgantt_smart_rendering-Erweiterung wird nicht mehr benötigt und sollte aus Gantt entfernt werden. Die Erweiterung selbst ist weiterhin im Paket enthalten, falls es zu Kompatibilitätsproblemen kommt. Wenn die Erweiterung der Seite hinzugefügt wird, wechselt Gantt in den Smart-Rendering-Modus von Version 6.1.

Das Verhalten der static_background-Konfiguration wurde ebenfalls aktualisiert. Ab Version 6.2 werden PNG-Hintergründe UND alle Zellen gerendert, denen über eine Template-Funktion eine CSS-Klasse zugewiesen wurde.

Wenn Sie zum Verhalten von Version 6.1 zurückkehren möchten, verwenden Sie die static_background_cells-Konfiguration:

gantt.config.static_background_cells = false;

Zeitskalen-Einstellungen

Die Konfiguration der Zeitskala wurde vereinfacht. Anstatt für jede Skala eine Vielzahl von Einstellungen separat anzugeben, sollten Sie nun eine einzige Konfigurationsoption scales verwenden, die mehrere Skalenobjekte mit deren Einstellungen enthält.

Insgesamt sind folgende Zeitskalen-APIs veraltet:

gantt.config.scale_unit
gantt.config.step
gantt.config.date_scale
gantt.templates.date_scale
gantt.config.subscales

Beispielsweise sieht der folgende Code:

gantt.config.scale_unit = "day"; 
gantt.config.step = 1; 
gantt.config.date_scale = "%d %M"; 
gantt.templates.date_scale = null; 
gantt.config.subscales = [];

Jetzt so aus:

gantt.config.scales = [ { unit:"day", step: 1, format: "%d %M"} ];

task_cell_class-Template umbenannt

Das Template, das die CSS-Klasse für die Zellen im Timeline-Bereich definiert, wurde wie folgt umbenannt:

gantt.templates.task_cell_class → gantt.templates.timeline_cell_class

Ein Beispiel für die Verwendung des umbenannten Templates:

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
 
gantt.templates.timeline_cell_class = function(task,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

"xml_date"-Konfiguration und -Template sowie "xml_format"-Templates umbenannt

Nachfolgend das Schema zum Ersetzen der bisher verwendeten API:

gantt.config.xml_date → gantt.config.date_format
gantt.templates.xml_date → gantt.templates.parse_date
gantt.templates.xml_format → gantt.templates.format_date

Seit Version 6.2 sind die Standardwerte der xml_date-Konfiguration und der xml_date- und xml_format-Templates undefined. Wenn Sie ihnen also keinen Wert zuweisen, funktionieren sie nicht.

Gantt verwendet jedoch weiterhin die alten Namen der Konfiguration und Templates. Wenn Sie diese APIs in Ihrem Code überschrieben haben, funktionieren sie wie zuvor. Zum Beispiel:

// funktioniert weiterhin korrekt
gantt.templates.xml_date = function(datestring){
    return new Date(datestring);
};

Nicht verwendete API entfernt

Die gantt.config.api_date-Konfiguration und das gantt.templates.api_date-Template wurden aus der API entfernt, da sie im Gantt-Code nicht verwendet wurden. Falls Sie diese in Ihrem Code verwendet haben, müssen Sie sie erneut deklarieren.

gantt.config.api_date = "%d-%m-%Y %H:%i";
gantt.templates.api_date = gantt.date.date_to_str(gantt.config.api_date);

6.0 -> 6.1

Zeitliche Einschränkungen und automatisches Scheduling

Die dhtmlxgantt_auto_scheduling.js-Erweiterung wurde um die tasks constraints-Funktionalität erweitert. Da diese Funktion das Standardverhalten des automatischen Schedulings ändert, unterstützt Gantt einen Kompatibilitätsmodus, mit dem Sie das vorherige Verhalten wiederherstellen und Aufgabenbeschränkungen beim automatischen Scheduling ignorieren können.

Um den Kompatibilitätsmodus zu aktivieren, verwenden Sie folgende Konfigurationsoption:

gantt.config.auto_scheduling_compatibility = true;

Anzeigebereich für Tooltips

Vor Version 6.1 wurden Tooltips nur innerhalb des Timeline-Bereichs angezeigt. Ab Version 6.1 ist die Anzeige von Tooltips nicht mehr eingeschränkt, und ein Tooltip folgt der Bewegung des Mauszeigers.

Falls erforderlich, können Sie das vorherige Verhalten wiederherstellen, indem Sie den folgenden Code vor der Initialisierung von Gantt verwenden:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);

5.2 -> 6.0

In Version 6.0 ist die Methode getSlack() veraltet. Stattdessen wurden zwei Methoden hinzugefügt:

getFreeSlack – gibt den freien Puffer (free slack) einer Aufgabe zurück
getTotalSlack – gibt den gesamten Puffer (total slack) einer Aufgabe zurück

Methoden, die in v4.0 als veraltet markiert wurden, funktionieren in v6.0 nicht mehr. Die Definition des dhtmlx-Objekts wurde aus dhtmlxgantt.js entfernt.

Falls Sie eine der veralteten Methoden verwenden, müssen Sie diese gemäß der untenstehenden Tabelle durch unterstützte Implementierungen ersetzen. Es wurden keine Änderungen an den Argumenten oder am Verhalten der Methoden vorgenommen.

Veraltete Methoden	Funktionierende Methoden
dhtmlx.alert	gantt.alert
dhtmlx.confirm	gantt.confirm
dhtmlx.modalbox	gantt.modalbox
dhtmlx.uid	gantt.uid
dhtmlx.copy	gantt.copy
dhtmlx.mixin	gantt.mixin
dhtmlx.defined	gantt.defined
dhtmlx.bind	gantt.bind
dhtmlx.assert	gantt.assert
window.dataProcessor	gantt.dataProcessor

3.x -> 4.0

Version 4.0 bringt einige Änderungen in der öffentlichen API mit sich, insbesondere:

Legacy-Module sowie Module, die mit dhtmlxSuite-Modulen überschneiden, werden von der dhtmlxGantt-Bibliothek nicht mehr definiert
Häufig verwendete Module wie dhtmlxMessage, dataProcessor, Ajax wurden in den window.gantt-Namespace verschoben und sind nun Teil der öffentlichen API von dhtmlxGantt

Ein Fallback zur alten API ist in v4.x enthalten, sodass Code, der für v3.3 und früher geschrieben wurde, weiterhin funktioniert. In einigen Fällen sind jedoch Anpassungen erforderlich. Im Allgemeinen sind alle globalen Deklarationen außer window.gantt und window.Gantt (nur Enterprise-Version) veraltet und werden in Version 5.0 entfernt.

Veraltete API

Es gibt Methoden, die als veraltet markiert wurden. Sie funktionieren weiterhin in v4.x, lösen jedoch bei jedem Aufruf eine Konsolenwarnung aus (für Endnutzer nicht sichtbar).

Überblick:

Das dhtmlxMessage-Modul wurde vom window.dhtmlx-Objekt zum window.gantt-Objekt verschoben. Mehr zu Message Boxes hier
Der dhtmlxDataProcessor-Konstruktor wurde von window.dataProcessor zu window.gantt.dataProcessor verschoben
Hilfsmethoden wie dhtmlx.copy, dhtmlx.uid und dhtmlx.mixin wurden zum window.gantt-Objekt verschoben

Wenn Sie diese Methoden verwenden, funktioniert Ihre Anwendung nach dem Update auf v4.0 weiterhin ohne sofortige Änderungen. Zukünftig wird empfohlen, auf die neuere API-Version umzusteigen.

Die vollständige Liste der veralteten Methoden umfasst:

Bis Version 3.3	Ab Version 4.0
dhtmlx.alert	gantt.alert
dhtmlx.confirm	gantt.confirm
dhtmlx.modalbox	gantt.modalbox
dhtmlx.uid	gantt.uid
dhtmlx.copy	gantt.copy
dhtmlx.mixin	gantt.mixin
dhtmlx.defined	gantt.defined
dhtmlx.bind	gantt.bind
dhtmlx.assert	gantt.assert
window.dataProcessor	gantt.dataProcessor

Überholte API

Einige Methoden sind überholt und werden in v4.x nicht mehr verwendet. Wenn Sie diese Methoden oder Objekte noch nutzen, müssen Sie entweder den Code der Anwendung anpassen oder die Datei dhtmlxgantt_deprecated.js in die Seite einbinden.

Überblick:

window.dhx4 wird von dhtmlxgantt.js nicht mehr definiert
Umgebungsvariablen, die zuvor in window.dhx4 definiert waren, sind jetzt im Objekt gantt.env verfügbar
Das Ajax-Modul wurde von dhx4.ajax zu gantt.ajax verschoben
gantt.event, gantt.eventRemove sollten anstelle von dhtmlxEvent/dhtmlxDetachEvent verwendet werden

Die vollständige Liste der überholten API ist unten aufgeführt:

Bis Version 3.3	Ab Version 4.0
window.dhtmlxEvent	gantt.event
window.dhtmlxDetachEvent	gantt.eventRemove
window.dhx4.isIE	gantt.env.isIE
window.dhx4.isIE6	gantt.env.isIE6
window.dhx4.isIE7	gantt.env.isIE7
window.dhx4.isIE8	gantt.env.isIE8
window.dhx4.isOpera	gantt.env.isOpera
window.dhx4.isChrome	gantt.env.isChrome
window.dhx4.isKHTML	gantt.env.isKHTML
window.dhx4.isFF	gantt.env.isFF
window.dhx4.isIPad	gantt.env.isIPad

2.0 -> 3.0

1) Um CSS-Konflikte mit dhtmlxScheduler zu vermeiden, wurden die Klassennamen, die von beiden Komponenten verwendet wurden, in dhtmlxGantt umbenannt (alle Klassen bezogen sich auf die Lightbox). Wenn Sie das Styling der Lightbox angepasst haben, besteht die Migration darin, die Klassen entsprechend umzubenennen.

Es gibt zwei umbenannte Muster:

Ersetzen Sie '.dhx_gantt_' durch '.gantt_' (.dhx_gantt_duration -> .gantt_duration)
Ersetzen Sie das Präfix '.dhx_' durch '.gantt_' (.dhx_custom_button -> .gantt_custom_button)

Falls Sie Schwierigkeiten bei der Migration der CSS-Klassen haben, finden Sie die vollständige Liste der umbenannten Klassen hier.

2) Die Standardwerte der Konfigurationen buttons_right und buttons_left wurden wie folgt geändert:

gantt.config.buttons_left = [
        "dhx_save_btn",
        "dhx_cancel_btn"
];
gantt.config.buttons_right = [
        "dhx_delete_btn"
],
 
-->
 
gantt.config.buttons_left = [
        "gantt_save_btn",
        "gantt_cancel_btn"
];
gantt.config.buttons_right = [
        "gantt_delete_btn"
];

Alte Konfigurationen ("dhx_save_btn", "dhx_cancel_btn", "gantt_delete_btn") funktionieren weiterhin. Änderungen beeinträchtigen kein bestehendes Verhalten.

3) Die folgenden Funktionen sind jetzt nur noch in der Commercial- oder Enterprise-Version der Komponente verfügbar (nicht in der GPL-Version von dhtmlxGantt):

Möglichkeit, Tage in Wochen-, Monats- und Timeline-Ansicht auszublenden
Projekte, Meilensteine und andere benutzerdefinierte Typen

1.0 -> 2.0

1) Verschiedene Objekte (GanttProjectInfo, GanttTaskInfo, GanttChart, GanttProject, GanttTask) wurden durch ein statisches Objekt ersetzt – gantt.
Das gantt-Objekt enthält eine Reihe von Methoden und zwei Haupt-Properties: config und templates.

gantt.config – Konfigurationsoptionen für Daten, Skala, Steuerelemente usw.
gantt.templates – Formatvorlagen für Datums- und Beschriftungsanzeigen im Gantt-Diagramm.

2) dhtmlxGantt wird über die Methode init initialisiert
var gantt = new GanttChart() -> gantt.init("gantt_div").

3) Anstelle von GanttProject und GanttTask werden die Daten als ein Array von einfachen Objekten mit einer Reihe von Pflichtfeldern und beliebigen benutzerdefinierten Eigenschaften gespeichert:

{
    data:[
        {id:1, text:"Project #2", start_date:"01-04-2013", duration:18,
    progress:0.4, open: true},
        {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,
    progress:0.6, parent:1},
        {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,
    progress:0.6, parent:1}
    ],
    links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
  ]
}

4) Das XML-Format wurde geändert, aber das alte XML-Format kann weiterhin geladen werden.

gantt.load("tasks.xml","oldxml");

5) Designzeit-Objekte:

Methoden des GanttProjectInfo-Objekts wurden ersetzt durch:
- addTask -> gantt.addTask()
- deleteTask -> gantt.deleteTask()
- getTaskById -> gantt.getTask()
Methoden des GanttTaskInfo-Objekts wurden ersetzt durch:
- addChildTask -> gantt.addTask() (Eigenschaft "parent" des Task-Objekts legt das übergeordnete Element fest)

6) Laufzeit-Objekte:

dhtmlxGantt 2.0 verwendet keine unterschiedlichen Typen mehr für Projekt- und Aufgabenobjekte. Stattdessen kann jedes Aufgabenobjekt ein übergeordnetes Objekt und beliebig viele untergeordnete Aufgaben haben.

GanttProject
- Anstelle von getDuration(), getId(), getName(), getPercentCompleted(), getStartDate() werden Projekteigenschaften über gantt.getTask(projectTaskId).{name_of_property} abgerufen
GanttTask
- Anstelle von getDuration(), getId(), getName(), getParentTaskId(), getPercentCompleted(), getPredecessorTaskId(), setDuration(, ) werden Aufgaben-Eigenschaften über gantt.getTask(taskId).{name_of_property} abgerufen

Eine Liste der Methoden zum Abrufen von Eltern-/Kindobjekten:

Die ID der übergeordneten Aufgabe kann über gantt.getTask(task_id).parent abgerufen werden. Das Wurzelelement hat keine 'parent'-Eigenschaft.

Zurück nach oben