Inline Editors Erweiterung

Weitere Informationen zur Inline Editors Erweiterung finden Sie im Artikel Inline-Bearbeitung im 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};
});

Zurück nach oben