Custom Inline Editor

Hi everyone!

Is there any example of how to do a custom inline editor?

Which I’m trying to do is to make a custom percentage editor, with the objective that the input has a 0 to 100 input option, but before the value is saved, the input value is divided by 100.

Until now this is my code, but I’ve come to nowhere.

gantt.config.editor_types.percentage = {
  show:(id, column, config, placeholder)  => {
    // called when input is displayed, put html markup of the editor into placeholder 
    // and initialize your editor if needed:
        var html = "<div><input type='number' name='" + + "'></div>";
        placeholder.innerHTML = html;
  hide: () => {
    // called when input is hidden 
    // destroy any complex editors or detach event listeners from here
  set_value: (value, id, column, node) => {
    // set input value
  get_value: (id, column, node) => {
    // return input value
  is_changed: (value, id, column, node)  => {
    // called before save/close. Return true if new value differs from the original one
    // returning true will trigger saving changes, returning false will skip saving 
  is_valid: (value, id, column, node) => {
    // validate, changes will be discarded if the method returns false
    if (typeof value === 'number'){          
      if(value >= 0 || value <= 100){
        return true;
    return false
  save: (id, column, node)  =>{
     // only for inputs with map_to:auto. complex save behavior goes here
  focus: (node) => {

Thanks for all!

Here is an example of a custom inline editor:

You can specify hours in the inline editor and it will be saved.

Here is an example how the progress calculation might be implemented: