Почему пользовательский рендерер не работает должным образом и вызывает странное поведение ячеек таблицы?

Question

Какой пользовательский рендерер вызывает поведение странных ячеек в режиме handsontable? Когда я пытаюсь редактировать ячейку, то после этого курсор автоматически переходит в другую ячейку, а другие ячейки haywire, и с этого момента происходит сбой всего процесса редактирования.

мне нужно раскрасить несколько ячеек в соответствии со значениями, и поэтому мне нужно использовать какой-то механизм, я выбрал определение типа в определении столбца так:

columns: { data: "some-property", type: {renderer: colorRenderer, editor:colorRenderer}} 

К сожалению, когда я делаю это, то некоторые странное поведение происходит во время редактирования ячейки. Пожалуйста, просто взгляните на jsfiddle здесь: http://jsfiddle.net/6QEtF/3/ строка: 191 проблема.

Как я могу раскрасить ячейки другим способом без использования средства визуализации или что не так с моим рендерером?

Пожалуйста, помогите ...

Вот мой пример кода, полностью рабочий на JsFiddle (ссылка выше).

var COLUMN_TYPES = new Object(); 

// JSON fetched via Ajax from backend: 
var res = getJSON(); 

// Create grid header names and definitions based on fetched JSON: 
var column_names = []; 
var column_defs = []; 
for (var i=0; i<res.headers.length; i++) { 
    column_names[i] = res.headers[i].name; 
    column_defs[i] = { 
     data: "valueDTO." + i + ".value", 
     type: {renderer: colorRenderer, editor:colorEditor}, // 1 way <--- cause a problem! 
     //type: res.headers[i].type, // 2nd way is correct but without custom renderer which I need to colorize some cells. 
     source: res.headers[i].sources, 
     readOnly: res.headers[i].readOnly, 
     strict: res.headers[i].strict 
    }; 
    COLUMN_TYPES["valueDTO."+i+".value"] = res.headers[i].type; 
} 

// Create grid table: 
createHandsontable(res.rows, column_names, column_defs, res.values); 

function createHandsontable(row_names, column_names, column_defs, values) { 
    var $container = $("#spreadsheet"); 
    var $parent = $container.parent(); 
    $container.handsontable({ 
     startRows: 4, 
     startCols: 20, 
     manualColumnResize: true, 
     manualColumnMove: true, 
     columnSorting: true, 
     contextMenu: true, 
     rowHeaders: row_names, 
     colHeaders: column_names, //grid.headers, 
     data: values, // data init only once at start 
     columns: column_defs, 
     cells: function (row, col, prop) { 
      //return {type: {renderer: colorRenderer, editor: colorEditor}}; 
     } 
    }); 
} 

function colorRenderer (instance, td, row, col, prop, value, cellProperties) { 
    switch (COLUMN_TYPES[prop]) { 
     case 'text': 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      if (value != null) { 
       if (value.toString().toLowerCase() === "green") { 
        $(td).css({ 
         background: '#00DC00' 
        }); 
       } 
       else if (value.toString().toLowerCase() === "amber") { 
        $(td).css({ 
         background: '#FAE600' 
        }); 
       } 
       else if (value.toString().toLowerCase() === "red") { 
        $(td).css({ 
         background: 'red' 
        }); 
       } 
      } 
      break; 
     case 'autocomplete': 
      Handsontable.AutocompleteCell.renderer.apply(this, arguments); 
      Handsontable.AutocompleteCell.editor.apply(this, arguments); 
      break; 
     case 'checkbox': 
      Handsontable.CheckboxCell.renderer.apply(this, arguments); 
      Handsontable.CheckboxCell.editor.apply(this, arguments); 
      break; 
     case 'numeric': 
      Handsontable.NumericCell.renderer.apply(this, arguments); 
      Handsontable.NumericCell.editor.apply(this, arguments); 
      break; 
     case 'date': 
      Handsontable.DateCell.renderer.apply(this, arguments); 
      Handsontable.DateCell.editor.apply(this, arguments); 
      break; 
     case 'handsontable': 
      Handsontable.HandsontableCell.renderer.apply(this, arguments); 
      Handsontable.HandsontableCell.editor.apply(this, arguments); 
      break; 
     default: 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
    } 
}; 

function colorEditor (instance, td, row, col, prop, value, cellProperties) { 
    switch (COLUMN_TYPES[prop]) { 
     case 'text': 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
     case 'autocomplete': 
      Handsontable.AutocompleteCell.renderer.apply(this, arguments); 
      Handsontable.AutocompleteCell.editor.apply(this, arguments); 
      break; 
     case 'checkbox': 
      Handsontable.CheckboxCell.renderer.apply(this, arguments); 
      Handsontable.CheckboxCell.editor.apply(this, arguments); 
      break; 
     case 'numeric': 
      Handsontable.NumericCell.renderer.apply(this, arguments); 
      Handsontable.NumericCell.editor.apply(this, arguments); 
      break; 
     case 'date': 
      Handsontable.DateCell.renderer.apply(this, arguments); 
      Handsontable.DateCell.editor.apply(this, arguments); 
      break; 
     case 'handsontable': 
      Handsontable.HandsontableCell.renderer.apply(this, arguments); 
      Handsontable.HandsontableCell.editor.apply(this, arguments); 
      break; 
     default: 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
    } 
}; 

Answer 1

Попробуйте обновить до latest version:

http://handsontable.com/ 

И посмотреть на conditional formatting