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) - opens an editor in the specified task/cell, sets the mapped value and puts browser focus on the editor
• show(taskId,columnName) - opens an empty editor in specified task/cell
• setValue() - populates an opened editor with values from the task
• save() - saves changes and hides an editor
• hide() - hides an editor without saving changes
• focus() - puts browser focus on the editor
• getState() - gets the state object {id: taskId, columnName: columnName}
• getValue() - gets the current value of the editor

State:

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

Events:

• attachEvent(name,handler) - attaches an event handler to inlineEditors object
• detachEvent(id) - detaches a handler from an event (which was attached before by the attachEvent() method)

Navigation:

• editNextCell(canChangeRow) - saves the current editor and moves editor to the next cell
  • canChangeRow 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() - saves the current editor and opens an editor in the same cell of the task below
• editPrevCell(canChangeRow) - saves the current editor and moves editor to the previous cell
  • canChangeRow 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() - saves the current editor and opens an editor in the same cell of the task above
• getFirstCell() - gets the name of the first editable column in the grid
• getLastCell() - gets the name of the last editable column in the grid
• getNextCell(direction) - returns the name of the next editable column

Helpers:

• locateCell(node) - 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}

Mouse/Keyboard mapping:

• setMapping(mapping) - sets a mapping object
• getMapping() - returns a currently applied mapping object

Events

onBeforeEditStart

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

Arguments:

• state - the editor state object
  • id - the id of an edited task
  • columnName - the column name

onEditStart

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

Arguments:

• state - the editor state object
  • id - the id of an edited task
  • columnName - the column name

onBeforeSave

fires when an editor is about to close and save changes

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

Arguments:

• state - the editor state object
  • id - the id of an edited task
  • columnName - the column name
  • oldValue - the initial value of the editor
  • newValue - the current value of the editor, can be modified

onSave

fires after a task has been updated from the editor

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

Arguments:

• state - the editor state object
  • id - the id of an edited task
  • columnName - the column name
  • oldValue - the initial value of the editor
  • newValue - the current value of the editor

onEditEnd

fires after an inline editor has been hidden

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

Arguments:

• state - the editor state object
  • id - the id of an edited task
  • columnName - the column name

Back to top