Inline Editors Erweiterung

Weitere Informationen zur Inline Editors Erweiterung finden Sie im Artikel Inline Editing in Grid.

Das inlineEditors Objekt bietet folgende API:

Methoden

Aktionen:

• startEdit (taskId, columnName): void - Öffnet einen Editor für die angegebene Aufgabe und Zelle, befüllt ihn mit dem zugeordneten Wert und fokussiert den Editor
  • taskId - (number | string) - Die Aufgaben-ID
  • columnName - (string) - Der Spaltenname
• show (taskId, columnName): void - Öffnet einen leeren Editor in der angegebenen Aufgabe und Zelle
  • taskId - (number | string) - Die Aufgaben-ID
  • columnName - (string) - Der Spaltenname
• setValue (): void - Befüllt den geöffneten Editor mit Werten aus der Aufgabe
• save (): void - Speichert die Änderungen und schließt den Editor
• hide (): void - Schließt den Editor ohne Änderungen zu speichern
• focus (): void - Setzt den Fokus auf den Editor
• getState (): object - Gibt das Statusobjekt zurück (id: taskId, columnName: columnName, placeholder: HTMLElement)
• getValue (): string - Gibt den aktuellen Wert des Editors zurück

Status:

• isChanged (): boolean - Prüft, ob sich der aktuelle Wert des Editors vom ursprünglichen Wert unterscheidet
• isVisible (): boolean - Prüft, ob der Editor aktuell geöffnet ist

Ereignisse:

• attachEvent (name, handler): string - Fügt dem inlineEditors Objekt einen Ereignis-Handler hinzu
  • name - (string) - Der Name des Ereignisses
  • handler - (Function) - Die Callback-Funktion, die beim Auslösen des Ereignisses ausgeführt wird
• detachEvent (id): void - Entfernt einen zuvor hinzugefügten Ereignis-Handler
  • id - (string) - Die ID des Ereignis-Handlers

Navigation:

• editNextCell (canChangeRow): void - Speichert den aktuellen Editor und wechselt zur nächsten Zelle
  • canChangeRow? - (boolean) - Gibt an, ob der Editor nach der letzten Zelle der aktuellen Zeile zur ersten Zelle der nächsten Zeile wechseln kann
• editNextRow (skipReadonly): void - Speichert den aktuellen Editor und öffnet einen Editor in der gleichen Zelle der darunterliegenden Aufgabe
  • skipReadonly? - (boolean) - Wenn true, werden schreibgeschützte Aufgaben übersprungen und der Editor wird in der ersten bearbeitbaren Aufgabe darunter geöffnet; wenn false (Standard), wird der Editor geschlossen, wenn die nächste Aufgabe schreibgeschützt ist
• editPrevCell (canChangeRow): void - Speichert den aktuellen Editor und wechselt zur vorherigen Zelle
  • canChangeRow? - (boolean) - Gibt an, ob der Editor nach der ersten Zelle der aktuellen Zeile zur letzten Zelle der vorherigen Zeile wechseln kann
• editPrevRow (skipReadonly): void - Speichert den aktuellen Editor und öffnet einen Editor in der gleichen Zelle der darüberliegenden Aufgabe
  • skipReadonly? - (boolean) - Wenn true, werden schreibgeschützte Aufgaben übersprungen und der Editor wird in der ersten bearbeitbaren Aufgabe darüber geöffnet; wenn false (Standard), wird der Editor geschlossen, wenn die vorherige Aufgabe schreibgeschützt ist
• getFirstCell (): string - Gibt den Namen der ersten bearbeitbaren Spalte im Grid zurück
• getLastCell (): string - Gibt den Namen der letzten bearbeitbaren Spalte im Grid zurück
• getNextCell (direction): string | null - Gibt den Namen der nächsten bearbeitbaren Spalte zurück
  • direction - (number) - Die Richtung: 1 für rechts, -1 für links

Hilfsfunktionen:

• locateCell (node): object | null - Prüft, ob ein angegebenes DOM-Element eine Aufgaben-Zelle ist, und gibt ggf. ein Editor-Statusobjekt zurück: (id: taskId, columnName: columnName)
  • node - (HTMLElement) - Das HTML-Element

Maus-/Tastatur-Mapping:

• setMapping (mapping): void - Setzt ein Mapping-Konfigurationsobjekt
  • mapping - (object) - Ein Objekt, das das Mapping definiert:
    • init - (Function): void - Initialisiert das Mapping
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors Objekt
      • grid - (any) - Die Grid-Layout-Ansicht
    • onShow - (Function): void - Wird aufgerufen, wenn der Inline-Editor geöffnet wird
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors Objekt
      • node - (HTMLElement) - Das HTML-Element
      • grid - (any) - Die Grid-Layout-Ansicht
    • onHide - (Function): void - Wird aufgerufen, wenn der Inline-Editor geschlossen wird
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors Objekt
      • node - (HTMLElement) - Das HTML-Element
      • grid - (any) - Die Grid-Layout-Ansicht
    • destroy - (Function): void - Bereinigt das Mapping
• getMapping (): object - Gibt das aktuell angewendete Mapping-Objekt zurück

Ereignisse

onBeforeEditStart

Argumente:

• state - (object) - Das Editor-Statusobjekt
  • id - (number | string) - Die ID der bearbeiteten Aufgabe
  • columnName - (string) - Der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
   return true;
});

onEditStart

Argumente:

• state - (object) - Das Editor-Statusobjekt
  • id - (number | string) - Die ID der bearbeiteten Aufgabe
  • columnName - (string) - Der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});

onBeforeSave

Wird ausgelöst, wenn der Editor kurz vor dem Schließen und Speichern der Änderungen steht

Argumente:

• state - (object) - Das Editor-Statusobjekt
  • id - (number | string) - Die ID der bearbeiteten Aufgabe
  • columnName - (string) - Der Spaltenname
  • oldValue - (any) - Der ursprüngliche Wert im Editor
  • newValue - (any) - Der aktuelle Wert im Editor, kann verändert werden

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
   return true;
});

onSave

Wird ausgelöst, nachdem eine Aufgabe über den Editor aktualisiert wurde

Argumente:

• state - (object) - Das Editor-Statusobjekt
  • id - (number | string) - Die ID der bearbeiteten Aufgabe
  • columnName - (string) - Der Spaltenname
  • oldValue - (any) - Der ursprüngliche Wert im Editor
  • newValue - (any) - Der aktuelle Wert im Editor

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
});

onEditEnd

Wird ausgelöst, nachdem der Inline-Editor geschlossen wurde

Argumente:

• state - (object) - Das Editor-Statusobjekt
  • id - (number | string) - Die ID der bearbeiteten Aufgabe
  • columnName - (string) - Der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditEnd", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});