Inline Editors Extension

Read details about the Inline editors extension in the article Inline Editing in Grid.
The inlineEditors object possesses the following API:

Methods

Actions:

  • startEdit (taskId, columnName): void - opens an editor in the specified task/cell, sets the mapped value and puts browser focus on the editor
    • taskId - (number | string) - the task ID
    • columnName - (string) - the column name
  • show (taskId, columnName): void - opens an empty editor in specified task/cell
    • taskId - (number | string) - the task ID
    • columnName - (string) - the column name
  • setValue (): void - populates an opened editor with values from the task
  • save (): void - saves changes and hides an editor
  • hide (): void - hides an editor without saving changes
  • focus (): void - puts browser focus on the editor
  • getState (): object - gets the state object {id: taskId, columnName: columnName, placeholder: HTMLElement}
  • getValue (): string - gets the current value of the editor

State:

  • isChanged (): boolean - checks whether the current value of the editor differs from the initial value
  • isVisible (): boolean - checks whether the editor is opened

Events:

  • attachEvent (name, handler): string - attaches an event handler to inlineEditors object
    • name - (string) - the name of the event handler
    • handler - (Function) - the function that will be called when the event fires
  • detachEvent (id): void - detaches a handler from an event (which was attached before by the attachEvent() method)
    • id - (string) - the id of the attached event handler

Navigation:

  • editNextCell (canChangeRow): void - saves the current editor and moves editor to the next cell
    • canChangeRow? - (boolean) - the parameter specifies whether it can move the editor to the first cell of the next row after the last cell of the current one
  • editNextRow (skipReadonly): void - saves the current editor and opens an editor in the same cell of the task below
    • skipReadonly? - (boolean) - the parameter specifies whether it can skip the read-only task and open an editor in the cell of the first editable task. The default false state of the parameter closes the editor if the next task is read-only.
  • editPrevCell (canChangeRow): void - saves the current editor and moves editor to the previous cell
    • canChangeRow? - (boolean) - the parameter specifies whether it can move editor to the last cell of the row above after reaching the first cell of the current row
  • editPrevRow (skipReadonly): void - saves the current editor and opens an editor in the same cell of the task above
    • skipReadonly? - (boolean) - the parameter specifies whether it can skip the read-only task and open an editor in the cell of the first editable task. The default false state of the parameter closes the editor if the previous task is read-only.
  • getFirstCell (): string - gets the name of the first editable column in the grid
  • getLastCell (): string - gets the name of the last editable column in the grid
  • getNextCell (direction): string | null - returns the name of the next editable column
    • direction - (number) - the parameter specifies in which direction it should iterate the following cell. 1 - right, -1 - left.

Helpers:

  • locateCell (node): object | null - checks whether a provided DOM element is a task cell object and returns an editor state object, if it is so: {id: taskId, columnName: columnName}
    • node - (HTMLElement) - the HTML element

Mouse/Keyboard mapping:

  • setMapping (mapping): void - sets a mapping object
    • mapping - (object) - an object with the mapping configuration:
      • init - (Function): void - the method to initialize mapping
        • inlineEditors - (InlineEditorMethods) - the inlineEditors object
        • grid - (any) - the Grid layout view
      • onShow - (Function): void - the method that will be called when the inline editor is opened
        • inlineEditors - (InlineEditorMethods) - the inlineEditors object
        • node - (HTMLElement) - the HTML element
        • grid - (any) - the Grid layout view
      • onHide - (Function): void - the method that will be called when the inline editor is closed
        • inlineEditors - (InlineEditorMethods) - the inlineEditors object
        • node - (HTMLElement) - the HTML element
        • grid - (any) - the Grid layout view
      • destroy - (Function): void - the method to destroy mapping
  • getMapping (): object - returns a currently applied mapping object

Events

onBeforeEditStart

Arguments:

  • state - (object) - the editor state object
    • id - (number | string) - the id of an edited task
    • columnName - (string) - the column name
var inlineEditors = gantt.ext.inlineEditors;
 
inlineEditors.attachEvent("onBeforeEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
   return true;
});

onEditStart

Arguments:

  • state - (object) - the editor state object
    • id - (number | string) - the id of an edited task
    • columnName - (string) - the column name
var inlineEditors = gantt.ext.inlineEditors;
 
inlineEditors.attachEvent("onEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});

onBeforeSave

fires when an editor is about to close and save changes

Arguments:

  • state - (object) - the editor state object
    • id - (number | string) - the id of an edited task
    • columnName - (string) - the column name
    • oldValue - (any) - the initial value of the editor
    • newValue - (any) - the current value of the editor, can be modified
var inlineEditors = gantt.ext.inlineEditors;
 
inlineEditors.attachEvent("onBeforeSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
   return true;
});

onSave

fires after a task has been updated from the editor

Arguments:

  • state - (object) - the editor state object
    • id - (number | string) - the id of an edited task
    • columnName - (string) - the column name
    • oldValue - (any) - the initial value of the editor
    • newValue - (any) - the current value of the editor
var inlineEditors = gantt.ext.inlineEditors;
 
inlineEditors.attachEvent("onSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
});

onEditEnd

fires after an inline editor has been hidden

Arguments:

  • state - (object) - the editor state object
    • id - (number | string) - the id of an edited task
    • columnName - (string) - the column name
var inlineEditors = gantt.ext.inlineEditors;
 
inlineEditors.attachEvent("onEditEnd", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});
Back to top