Cant rerender the table after formula applying

Tags: #<Tag:0x00007f8b1d6322e8>

Hi there,

I have these two functions setFormulas1(), setFormulas2().
I am calling them like that

setFormulas1(hot, cols.length);
setFormulas2(hot, cols.length);

Order does matter. After the apply of formulas in first function, second func setFormulas2 needs to work with a new hot instance(table). So how can i after calling a function setFormulas1(), rerender the table and call the setFormulas2() with the new instance of hot? These two functions work with the same instance of hot, and formulas not working properly.

function setFormulas1(hot, cols) {
        var letArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 
        'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM']; 
        
        for(let i = 0; i<cols; i++){
            hot.setDataAtCell(19, i, `=SUM(${letArr[i]}12:${letArr[i]}19)`);
            hot.setCellMeta(19,i,'readOnly', true);   
            hot.setDataAtCell(30, i, `=${letArr[i]}23-${letArr[i]}24+${letArr[i]}25+${letArr[i]}26+${letArr[i]}27+${letArr[i]}28+${letArr[i]}29-${letArr[i]}30`);
            hot.setCellMeta(30,i,'readOnly', true); 
            hot.setDataAtCell(60, i, `=${letArr[i]}59-${letArr[i]}60`);
            hot.setCellMeta(60,i,'readOnly', true); 
            hot.setDataAtCell(71, i, `=SUM(${letArr[i]}67:${letArr[i]}71)`);
        	hot.setCellMeta(71,i,'readOnly', true); 
        	hot.setDataAtCell(81, i, `=SUM(${letArr[i]}73:${letArr[i]}76)-${letArr[i]}77+SUM(${letArr[i]}78:${letArr[i]}81)`);
        	hot.setCellMeta(81,i,'readOnly', true);
            hot.setDataAtCell(141, i, `=${letArr[i]}136*(-1)-${letArr[i]}137+${letArr[i]}138+${letArr[i]}139+${letArr[i]}140+${letArr[i]}141`);
        	hot.setCellMeta(141,i,'readOnly', true); 
        	hot.setDataAtCell(163, i, `=${letArr[i]}143+SUM(${letArr[i]}144:${letArr[i]}146)-SUM(${letArr[i]}147:${letArr[i]}163)`);
        	hot.setCellMeta(163,i,'readOnly', true);
        	hot.setDataAtCell(168, i, `=${letArr[i]}165-${letArr[i]}166-${letArr[i]}167-${letArr[i]}168`);
        	hot.setCellMeta(168,i,'readOnly', true);
        	hot.setDataAtCell(176, i, `=SUM(${letArr[i]}172:${letArr[i]}176)`);
        	hot.setCellMeta(176,i,'readOnly', true);  операциям  1
        	hot.setDataAtCell(184, i, `=SUM(${letArr[i]}178:${letArr[i]}181)-${letArr[i]}182+${letArr[i]}183+${letArr[i]}184`);
        	hot.setCellMeta(184,i,'readOnly', true);
        	hot.setDataAtCell(189, i, `=SUM(${letArr[i]}187:${letArr[i]}189)`);
            hot.setCellMeta(189,i,'readOnly', true);
        	
        }
        //hot.render();
    }
    
    function setFormulas2(hot, cols) {
        var letArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 
        'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM']; 
        
        for(let i = 0; i<cols; i++){
            hot.setDataAtCell(21, i, `=${letArr[i]}20-${letArr[i]}21`);
        	hot.setCellMeta(21,i,'readOnly', true); 
        	hot.setDataAtCell(142, i, `=${letArr[i]}135-${letArr[i]}138+${letArr[i]}136+${letArr[i]}137-${letArr[i]}139-${letArr[i]}140-${letArr[i]}141`);
        	hot.setCellMeta(142,i,'readOnly', true); 
        	hot.setDataAtCell(185, i, `=${letArr[i]}164+${letArr[i]}169+SUM(${letArr[i]}170:${letArr[i]}176)+${letArr[i]}185`);
        	hot.setCellMeta(185,i,'readOnly', true);
        	hot.setDataAtCell(190, i, `=${letArr[i]}186-${letArr[i]}190`); 
        	hot.setCellMeta(190,i,'readOnly', true);
        	
        }
        //hot.render();
    }

Hi @ali19158

it seems that you have the same instance - hot, and only data changes.
If you’ like to run setFormulas2() after setFormulas1() wouldn’t you just call setFormulas2() before the closing char (" } ") of the setFormulas1() function?

Thank you, I tried that, but its still working with the same hot instance, even if i decommented the line with hot.render() in the setFormulas1(), then call the setFormulas2() within function setFormulas1(). Is my question clear to you? Little explanation - once function setFormulas1() finishes his job, the second function needs to work with the new values of cells that calculated by the setFormulas1().

the render() is not needed as the setDataAtCell method is already rerendering the table.
The setCellMeta is not triggering the render() but you can just place the cellMeta calls before calling setDataAtCell.

When it comes to the execution of the setFormulas1() method maybe you should call the setFormulas2()is a delay (setTimeout)? That would definitely put the execution of the 2nd method after everything in the body of function one is done.

If that won’t help please share your settings via JSFiddle and I’ll check what can be done.

Thanks @aleksandra_budnik , settimeout helped.
To be sure, when i m calling this functions
setFormulas1(hot, cols.length);
setFormulas2(hot, cols.length); in this order without settimeout,
does it work with the newest instance of hot or with the first instance?

I do not know if I would be able to answer this question, @ali19158
An Instance is something like a copy of the Handsontable class. You do not work on two different instances in the example above. You refer to the same instance in two different states of its dataset.

OK, thanks @aleksandra_budnik