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.
