Anpassen der Zeilenhöhe im Raster
Sie können die Höhe einzelner Zeilen im Raster anpassen.
Die dhtmlxGantt-Bibliothek bietet zwei Möglichkeiten, die Zeilenhöhe zu handhaben:
- Durch Festlegen der Zeilenhöhe und der Aufgabenbalkenhöhe für ein spezifisches Aufgabenobjekt;
- Durch Ziehen des unteren Rands einer Rasterzeile.
Diese Funktion ist ab Version 7.1 verfügbar.
Festlegen der Zeilenhöhe
Es ist möglich, die Höhe einer bestimmten Zeile nach Bedarf zu ändern.
Die individuelle Zeilenhöhe funktioniert momentan nicht mit statischer Hintergrunddarstellung.
Um dies zu tun, aktualisieren Sie die Eigenschaften row_height und bar_height des Aufgabenobjekts in Ihrem Datensatz:
Spezifizieren des Typs einer Aufgabe im Datensatz
gantt.parse({
data: [
{ id: 11, text: "Projekt #1", type: "project", progress: 0.6, open: true,
row_height: 70, bar_height: 60 }, { id: 12, text: "Aufgabe #1", start_date: "03-04-2018", duration: "5",
parent: "11", progress: 1, open: true },
{ id: 13, text: "Aufgabe #2", start_date: "03-04-2018", type: "project",
parent: "11", progress: 0.5, open: true }
],
links: []
});
Alternativ können Sie diese Änderungen dynamisch vornehmen:
gantt.getTask(11).row_height = 50;
gantt.getTask(11).bar_height = 25;
// Gantt neu rendern, um die Änderungen anzuwenden
gantt.render();
Wenn die Eigenschaften row_height und bar_height nicht angegeben oder leer gelassen werden (Standardzustand), werden die Werte von gantt.config.row_height und gantt.config.bar_height angewendet.
Zeilen durch Ziehen und Ablegen anpassen
Wenn Sie Benutzern erlauben möchten, Zeilen im Raster durch Ziehen des unteren Rands zu ändern, aktivieren Sie die Option gantt.config.resize_rows, indem Sie sie auf true setzen:
gantt.config.resize_rows = true;
Related sample: Resizable rows in grid
Sie können auch die minimale Zeilenhöhe während der Größenänderung mit der Option gantt.config.min_task_grid_row_height definieren:
gantt.config.min_task_grid_row_height = 45;
Ereignisse
Beim Ändern der Zeilenhöhe durch Ziehen stehen 4 Ereignisse zur Verfügung, um den Prozess zu verwalten:
- onBeforeRowResize - wird ausgelöst, bevor der Benutzer beginnt, die Zeilenhöhe zu ändern
- onRowResize - wird ausgelöst, während der Benutzer den Zeilenrand zieht, um die Höhe anzupassen
- onBeforeRowResizeEnd - wird ausgelöst, bevor der Größenänderungsprozess abgeschlossen ist
- onAfterRowResize - wird ausgelöst, nachdem die Größenänderung abgeschlossen ist