Render speed

I’m using version 5.0.0 and i like to create a spreadsheet like this:

The real spreadsheet has more columns, I left out the columns with privacy data. As you can see, it has several types of columns and a lot of cells with a color. This color depends on the value of one or more columns and some of them can be changed by double clicking on the column. I build this spreadsheet with a modified asp.net repeater object. The first problem with this spreadsheet is that i never found a solution for the headers. These should be fixed. The second problem is that when there are a lot of records, it is slow.

I had hoped that I could build the same functionality with Handsontable. I managed to create the skeleton of the spreadsheet with all the different types of columns. Now I want to add the colors to the cells, I used the cellProperties.renderer function for this. But now it is extremely slow. Is there an other way of doing this? Is it even possible to create such a spreadsheet with Handsontable?

Hi @paul.poels

using a lot of cell dependencies, styling and calculation with a relatively large dataset can produce performance issues (especially in IE).

What code do you use to color these cells? Maybe I’ll be able to help you to optimize the code a little bit.

I use the following code to color the cells (I use FF):

var intRef = 0

function cellColorRenderer(instance, td, row, col, prop, value, cellProperties) {
var intValue = 0;

Handsontable.renderers.TextRenderer.apply(this, arguments);

if ((col === 11) || (col === 13) || (col === 15) || (col === 18) || (col === 21) || (col === 24) || (col === 27)) {
    intValue = parseInt(value);

    if (intValue === 0) {
        td.style.color = 'white';
        td.style.background = 'white';
    }
    else if (intValue === 1) {
        td.style.color = '#ffc000';
        td.style.background = '#ffc000';
    }
    else if (intValue === 2) {
        td.style.color = 'red';
        td.style.background = 'red';
    }
    else {
        td.style.color = '#32b53f';
        td.style.background = '#32b53f';
    }
}
else if (col === 16) {
    intValue = parseInt(value);

    if (intValue < 14) {
        td.style.background = 'red';
    }
    else if ((intValue >= 14) && (intValue < 16)) {
        td.style.background = '#ffc000';
    }
    else {
        td.style.background = '#32b53f';
    }
}
else if (col === 31) {
    intRef = parseInt(value);
}
else if (col === 32) {
    if (intRef <= 0) {
        td.style.background = 'red';
    }
    else {
        td.style.background = 'ligthgray';
    }
}
}

hot = new Handsontable(container, {
    :
cells: function (row, col) {
    var cellProperties = {};

    if ((col === 11) || (col === 13) || (col === 15) || (col === 16) || (col === 18) || (col === 21) || (col === 24) || (col === 27) || (col === 31) || (col === 32)) {
        cellProperties.renderer = cellColorRenderer;
    }

    return cellProperties;
}
},
);

For operations that require coloring of cells based on their coordinates I highly encourage to use cells method provided with classes instead of style.background.

It should noticeably boost the performance.

I tried td,className = ‘RedTB’ with .RedTB { color: red, background-color: red }. If i use the class RedTB in a normal table cell, both the text color and the background color are red. But if i use it in the cellColorRenderer function, only the text color is red. The background isn’t changed. So this doesn’t seems to work. And i don’t see any change in the speed. The same behavior when i use setCellMeta(row, col, ‘className’, ‘RedTB’). But this is much slower.

Can you give me a working example for this?

You should compose the class settings as

.handsontable .RedTB as handsontable overwrite some settings.

Please test that and let me know if it helps.

I changed it, it works and it is faster. But I found an other problem, when i change the background of a dropdown list/date column, the arrow button is not showed:

The first column is a dropdown list column with background is white, the third column is also a dropdown list colum, but with no background assigned. As you see the first columns doesn’t show the arrow button.

Hi @paul.poels

sorry for a delay. Is there any progress on that case? If not, please send me the latest demo where the issue can be replicable.