Add class to cell, get: Uncaught Error: TR was expected to be rendered but is not

Tags: #<Tag:0x00007efc64e4a5e0>
#1

Hello, using v8.3.2, but this error is also present on 9+. I have a simple table set up, and it works well. But when I use the Cells function under updateSettings to add a class to a cell, then force a repaint by scrolling I get the above error. No matter how I try to add the class, the error is thrown. Also, even before I scroll, if I change multiple cells using my function, only the last one persists. Once I scroll, the entire page JS breaks because of the error. Here’s the codepen.

var data = [];

for (i = 0; i < 200; i++) {
  data.push({
    lastname: "",
    firstname: "",
    email: "",
    courses: "",
    duration: "",
    analyst: ""
  });
}
var container = document.getElementById("example");
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  //colHeaders: true,
  colHeaders: [
    "First Name",
    "Last Name",
    "email",
    "courses",
    "duration",
    "analyst"
  ],
  columns: [
    { data: "firstname" },
    { data: "lastname" },
    { data: "email", className: "email" },
    {
      data: "courses",
      editor: "select",
      selectOptions: [
        "all: Fundamentals + Q-Bank",
        "Fundamentals",
        "Q-Bank",
        "Fundamentals + Q-Bank CME",
        "Fundamentals CME",
        "Q-Bank CME"
      ],
      className: "courses"
    },
    { data: "duration" },
    { data: "analyst" }
  ],
  colWidths: [120, 120, 250, 225, 100, 100],
  filters: true,
  dropdownMenu: true,
  manualColumnMove: true,
  contextMenu: false,
  dropdownMenu: false,
  licenseKey: "non-commercial-and-evaluation"
});

function colorRow(rowChange,colChange) {
  hot.updateSettings({
    cells: function (row, col, prop) {
      var cell = hot.getCell(row, col);
      if (row==rowChange && col==colChange) {
        $(cell).addClass("green");
        //cell.className = 'green';
        //var cellMeta = hot.getCellMeta(row, col);
        //hot.setCellMeta(row, col, 'className', 'green');
      }
      return cell;
    }
  });
  //hot.render();
}
colorRow(3,3);
#2

Hi @bensmith.md
getCell() method, as we described in our documentation, might return null in some situations (read more about getCell).

On the other hand, the cells option defined as a function should return the cell meta-object. As you can find in the documentation, we run the cells function each time we want to collect all necessary information about particular cells (read more about cells option).
The default renderer will use the className property from cell meta to set it into the DOM element.

The adjusted demo you can find here: https://codepen.io/swistach/pen/eYWdYmZ

#3

Thanks. Now if I want these classNames to persist while running the function a second time, how would the code be adjusted?

colorRow(3,3);
colorRow(3,4);
#4

actually, I figured it out. I’ll just store the fields I’d like to colorize in an array. Here’s the example with multiple rows highlighted in different colors:
https://codepen.io/utnuc/pen/MWmjWRo?editors=0110

2 Likes
#5

Thank you, @bensmith.md, for sharing your example. Perhaps someone else with a similar problem will find a possible solution thanks to you.

#6