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