Handsontable Performance Issues On Updating Comments to Cells

Question

I have a function that updates a comment to every single cell in a row. This function is called many times by a higher level function that loops through every row in the table and determines what comments to apply.

This all works fine. See a simplified version of the code below.

// Loop through all hot rows and determine comment to apply
var loopThroughHotRows = function (hot) {
   var rows = hot.getSourceData().length;
   for (var i = 0; i < rows; i++) {
       var comment = "some comment determined by another function";
       applyResponseCommentsToRow(hot, comment, i);
   }
}

// Apply comments to a whole row in a passed handsontable
var applyCommentsToRow = function (hot, comment, logicalrow) {
  var cols = hot.countCols();
  var commentsPlugin = hot.getPlugin('comments');
  for (var i = 0; i < cols; i++) {
    // render being issued for each comment set.
    // need to restrict rendering somehow.
    commentsPlugin.setCommentAtCell(logicalrow, i, comment);
  }
}

The problem is that each time a comment is applied to a cell. The rendering of the entire handsontable instance is initiated. Causing the web browser to get blocked/chug/become very slow and responsive until all the rendering is complete.

So my question is. Is there some way to prevent Handsontable from rendering each time that a new comment is applied to a cell? Either by temporarily disabling all rendering or adding the comments in a different manner?

Answer 1

I actually ended up figuring out a solution to this on my own. If you set the comment of the cell by calling the hot.getCellMeta() function.

This actually bypasses the re-rendering of the handsontable. See updated function below.

// Apply comments to a whole row in a passed handsontable
var applyCommentsToRow = function (hot, comment, logicalrow) {
  var cols = hot.countCols();
  for (var i = 0; i < cols; i++) {
    // New method of writing comment to cell. Does not cause handsontable re-render.
    hot.getCellMeta(logicalrow, i).comment = {'value':responseComments};
  }
  // Call render once after all comments have been assigned to row!
  hot.render();
}