Verwendung von DHTMLX Gantt Properties in ReactGantt

Diese Seite bietet einen Überblick über die von React Gantt unterstützten Props und erklärt, wie sie den Funktionen von DHTMLX Gantt entsprechen.

Verfügbare Props

Prop	Typ	Beschreibung
tasks	Task[]	Ein Array von Task-Objekten.
links	Link[]	Ein Array von Link-Objekten.
templates	GanttTemplates	Überschreibt gantt.templates, wie z.B. task_text, task_class, scale_cell_class.
config	GanttConfig	Wird in gantt.config gemerged, einschließlich Optionen wie scales, columns, autosize.
resources	Resource[]	Ein Array von Ressourcen-Objekten.
baselines	Baseline[]	Ein Array von Baseline-Objekten.
markers	Marker[]	Ein Array von Marker-Objekten für Timeline-Marker.
plugins	GanttPlugins	Gantt-Erweiterungen, die aktiviert werden sollen (Beispiele: critical_path, auto_scheduling).
data	{ load?: string, save?: string\|RouterFunction, batchSave?: BatchChanges}	Unterstützt das Laden von Daten über den integrierten Gantt-Transport und bietet Callbacks zur Verarbeitung von Änderungen an Gantt-Daten.
locale	string	Setzt gantt.i18n.setLocale(locale). Standard ist "en".
theme	string	Wendet gantt.setSkin(theme) an. Standard ist "terrace".
customLightbox	ReactElement \| null	Eine React-Komponente, die die Standard-Lightbox ersetzt (siehe Custom Lightbox).
inlineEditors	{ [editorType: string]: React.ComponentType }	Ermöglicht die Zuordnung von React-basierten Inline-Editoren zur Inline-Editor-Schnittstelle von DHTMLX.
groupTasks	GroupConfig \| boolean \| null	Spezifiziert Gruppierungskonfiguration oder deaktiviert Gruppierung, wenn auf false oder null gesetzt (siehe Grouping Tasks).
filter	((task: Task) => boolean) \| null	Eine Funktion, um die angezeigten Gantt-Aufgaben zu filtern.
resourceFilter	((resource: Resource) => boolean) \| null	Filtert Ressourcen, die im Resource Panel angezeigt werden.
modals	GanttModals	Erlaubt benutzerdefinierte Komponenten als Ersatz für `onBeforeTaskDelete` und `onBeforeLinkDelete`-Modals.
(Event Props)	Function	Der Wrapper unterstützt Event-Handler-Props, die DHTMLX Gantt-Events entsprechen, wie onTaskClick, onAfterTaskAdd usw. Props mit passenden Namen werden automatisch angebunden.

Beispielnutzung

<ReactGantt
  tasks={tasks}
  links={links}
  theme="material"
  locale="en"
  config={ {
    scales: [
      { unit: "year", step: 1, format: "%Y" },
      { unit: "month", step: 1, format: "%M" }
    ],
    columns: [
      { name: "text", tree: true, width: '*' },
      { name: "start_date", align: "center" },
      { name: "duration", align: "center" },
      { name: "add" }
    ],
    // beliebige weitere gantt.config-Einstellungen
  } }
  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}
  templates={ {
    task_text: (start, end, task) => `#${task.id}: ${task.text}`,
  } }
/>

Verwendung von Event Props

Jedes DHTMLX Gantt-Event kann als Prop übergeben werden. Zum Beispiel:

<ReactGantt
 
  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}
 
/>

Wenn Sie eine Prop wie onBeforeTaskAdd bereitstellen, ruft der Wrapper intern gantt.attachEvent("onBeforeTaskAdd", handler) auf. Eine vollständige Liste der Events finden Sie unter DHTMLX Gantt API.

Kombinieren von Props und der DHTMLX API

Die Bibliothek @dhx/react-gantt ist darauf ausgelegt, möglichst deklarativ zu arbeiten und die meisten Anforderungen über Standard-Props wie tasks, links, resources, templates und mehr abzudecken. Es gibt jedoch Situationen, in denen ein tieferer Zugriff auf die Gantt-Engine notwendig ist, beispielsweise:

Arbeitszeitberechnungen
Auto Scheduling oder erweiterte Funktionen wie Ressourcenberechnungen
Nutzung bestimmter Methoden aus der Gantt API

Für diese Fälle gibt es zwei Ansätze, um direkt mit der zugrundeliegenden DHTMLX Gantt-Funktionalität zu interagieren:

React-Hooks des Wrappers, die mit den Gantt-Datastores und der Scheduling-Logik verbunden sind
Direkter Zugriff auf die Gantt-Instanz über ein ref, falls die Hooks nicht alle Anforderungen abdecken

Verwendung integrierter Hooks

Die Bibliothek @dhx/react-gantt bietet mehrere optionale Hooks, die React-Komponenten mit den internen Gantt-APIs verbinden. Diese Hooks dienen als Brücke zu den Methoden und Datastores von Gantt. Sie können sie direkt in Ihren Komponenten verwenden oder zu eigenen Hooks für spezielle Features wie Ressourcen-Histogramme kombinieren.

useGanttDatastore(ganttRef, storeName)

Der Hook useGanttDatastore bietet Lesezugriff auf einen bestimmten Gantt-Datastore. Er wird häufig verwendet, um auf Ressourcen-Stores, Baselines oder andere eingebaute oder benutzerdefinierte Stores zuzugreifen.

Er beinhaltet folgende Funktionen:

getItem(id) – holt ein bestimmtes Element aus dem Datastore
getItems() – gibt alle Elemente des Datastores zurück
hasChild(id: string | number) – prüft, ob ein Element Kinder hat
getChildren(id: string | number) – gibt die Kindelemente zurück

import { useMemo } from 'react';
import { useGanttDatastore } from '@dhx/react-gantt';
 
function MyResourceList({ ganttRef }) {
  const resourceStore = useGanttDatastore(ganttRef, 'resource');
 
  const resourceIds = resourceStore.getItems().map(item => item.id);
 
  // Zu Demonstrationszwecken: Ausgabe der Daten
  useMemo(() => {
    console.log('Resource IDs:', resourceIds);
  }, [resourceIds]);
 
  return null; 
}

Dieser Hook ist nützlich, wenn Sie direkten Zugriff auf Low-Level-Daten eines bestimmten Datastores benötigen, z.B. um zu bestimmen, ob eine Ressource eine Gruppe oder ein Individuum ist.

useResourceAssignments(ganttRef)

Der Hook useResourceAssignments stellt Methoden rund um Ressourcen bereit, darunter das Abrufen von Zuweisungen für eine Ressource oder das Auflisten von Ressourcen, die einer Aufgabe zugewiesen sind.

Er bietet folgende Funktionen:

getResourceAssignments(resourceId, taskId?) – entspricht getResourceAssignments
getTaskResources(taskId) – entspricht getTaskResources

import React from 'react';
import { useResourceAssignments } from '@dhx/react-gantt';
 
export function ResourceUsage({ ganttRef, taskId }) {
  const { getTaskResources } = useResourceAssignments(ganttRef);
 
  const resources = getTaskResources(taskId);
  return (
    <div>
      Task {taskId} assigned to: 
      {resources.map(r => r.text).join(', ')}
    </div>
  );
}

Dieser Hook ist praktisch, um eigene Logik rund um Ressourcennutzung zu implementieren, z.B. zur Berechnung zugeteilter Stunden oder Gruppierung von Aufgaben nach Besitzer.

useWorkTime(ganttRef)

Dieser Hook bietet Zugriff auf eingebaute DHTMLX Gantt-Arbeitszeitfunktionen wie isWorkTime, calculateEndDate und calculateDuration.

Er ist nützlich, um Arbeits- und Nichtarbeitszeiten basierend auf den Gantt-Arbeitskalendereinstellungen hervorzuheben und Datumsberechnungen im Einklang mit Arbeitskalendern durchzuführen.

Bereitgestellte Funktionen sind:

isWorkTime({ date:Date, unit?: string, task?:Task }) – entspricht isWorkTime
calculateEndDate({start:Date, duration:number, unit?: string, task?: Task}) – entspricht calculateEndDate
calculateDuration({start:Date, end:Date, task?: Task}) – entspricht calculateDuration
getClosestWorkTime({ date:Date, unit?: string, task?: Task, dir?: "past"|"future" }) – entspricht getClosestWorkTime

import { useEffect, useRef, useState } from 'react';
import ReactGantt, {GanttTemplates, useWorkTime} from "@dhx/react-gantt";
import "@dhx/react-gantt/dist/react-gantt.css";
 
export default function GanttTemplatesDemo() {
  const ganttRef = useRef<ReactGanttRef>(null);
 
  const { isWorkTime }= useWorkTime(ganttRef);
  ...
  const templates: GanttTemplates = {
    timeline_cell_class: (task: Task, date: Date) => {
      return isWorkTime({date, task}) ? "" : "weekend";
    }
  };
  ...

Eigene Hooks aus den Basis-Hooks zusammensetzen

Es ist empfehlenswert, eigene domänen- oder projektspezifische Hooks zu erstellen, indem Sie diese Basis-Hooks kombinieren. Um beispielsweise ein Ressourcen-Histogramm zu erstellen, könnten Sie einen eigenen Hook entwickeln, der Kapazitätswerte cached und Ressourcennutzung summiert:

import { useMemo } from 'react';
import { useGanttDatastore, useResourceAssignments } from '@dhx/react-gantt';
 
export function useResourceHistogram(ganttRef) {
  const resourceStore = useGanttDatastore(ganttRef, 'resource');
  const { getResourceAssignments } = useResourceAssignments(ganttRef);
 
  // Eigene Logik: Kapazitäts-Caching, Gruppenerkennung, etc.
  // ...
  return {
    // z.B. getCapacity, getAllocatedValue
  };
}

Direkter Zugriff auf die Gantt-Instanz mit ref

Während die Hooks die meisten erweiterten Anforderungen abdecken, ist der direkte Zugriff auf die gesamte Gantt-Instanz weiterhin über ein ref möglich:

import React, { useRef, useEffect } from 'react';
import ReactGantt, { ReactGanttRef } from '@dhx/react-gantt';
 
export function DirectRefExample({ tasks, links }) {
  const ganttRef = useRef<ReactGanttRef>(null);
 
  useEffect(() => {
    const gantt = ganttRef.current?.instance;
    if (!gantt) return;
 
    // Hier können Sie JEDE Gantt-API-Methode aufrufen
    console.log('All tasks:', gantt.getTaskByTime());
    gantt.showDate(new Date());
  }, []);
 
  return (
    <ReactGantt
      ref={ganttRef}
      tasks={tasks}
      links={links}
    />
  );
}

Beachten Sie, dass Sie tasks oder links, die Sie direkt an der Gantt-Instanz ändern, synchronisieren oder die Daten neu parsen sollten, wenn Sie sie auch als React-Props bereitstellen. Andernfalls kann der nächste Render von React manuelle Änderungen überschreiben.

Wenn Sie Aktionen ausführen müssen, die nicht durch Props abgedeckt sind, können Sie weiterhin direkt Gantt-Methoden aufrufen. Weitere Details finden Sie unter Accessing the Underlying Gantt API.

Zurück nach oben