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) - the method to initialize mapping
  - onShow - (Function) - the method that will be called when the inline editor is opened
  - onHide - (Function) - the method that will be called when the inline editor is closed
  - destroy - (Function) - 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};
});