title: Why custom renderer do not work as expected and cause strange table cells behavior?
body: <p>Wh my custom renderer cause strange cell's behavior in handsontable? When I try to edit cell then after that cursor goes down to other cell automatically and other cells are haywire and whole editing process is crashed from that moment.</p>
  
  <p>I need to colorize some cells according to the values and that's why I need to use some mechanism, I've chosen defining type in column definition like that:</p>
  
  <pre><code>columns: { data: "some-property", type: {renderer: colorRenderer, editor:colorRenderer}}
  </code></pre>
  
  <p>Unfortunately when I do this then some strange behavior occurs during cell edit. Please just take a look at jsfiddle here: <a href="http://jsfiddle.net/6QEtF/3/" rel="nofollow">http://jsfiddle.net/6QEtF/3/</a>
  line: 191 is the problematic issue.</p>
  
  <p>How can I colorize cells in other way without using renderer or what is wrong with my renderer?</p>
  
  <p>Please help...</p>
  
  <p>Here is my sample code, fully working is on JsFiddle (link above).</p>
  
  <pre><code>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&lt;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 &lt;--- 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;
      }
  };
  </code></pre>