I have a scenario where I am updating around 1000 rows in the table. For this I am already using the well known technique where instead of calling ht.setDataAtCell() in loop, I am pushing data in array first and then when the loop ends I finally call ht.setDataAtCell(updateArray). All this works fine, and amazingly 1000 rows update very fast. I also have the business logic to validate cells. So in the afterChange event I am validating cells, and accordingly I am updating the respective cellProperties ‘valid’ attribute, so cells turn red or green. But I do not want the render event to fire when I am updating 1000 rows in the table for example. So basically in the afterChange hook I have a function validateColumn(row,col). This function also gets called during bulk update of 1000 rows, and also when I simply move from one cell to other when making changes. So basically what I want is that validateColumn(row,col) should only render table when there is no bulk update. But it should not render table when bulk updates are happening(and my screen stalls ). What is the best technique to achieve this?. I tried some ways like, when bulk update starts, I set some global variable, and then the validateColumn(), will render table or not based on the value of that variable. But I did not like this technique, nor it is working.
Hi @a_ntn
Did you tried the loadData() method as well? It should speed up the process and boost the performance.
If you could create a JSFiddle demo with the example above I’d be happy to take a look.
Yes Thanks for your feedback. So basically suppose that I have say a QTY column and this column is to be validated by some business logic in the afterChange event. So when I move away from the QTY column after entering the qty, I check if QTY column satisfies that rule, and accordingly I make that cell invalid (I set valid=false for that Cell metadata). Then I call hot.render() so that the cell turns red, which I want. All fine. But here is the problem . In some other scenario, when I copy QTY value to all rows(say 1000 rows), then for each change in QTY column afterChange event is being fired and hot.render() will also be there, which I want to avoid. So only when the Copy function is completed I want to render the table. So what’s the approach generally in such situations, please let me know. I will also try to JSFiddle Demo.
Hi @a_ntn
At the first glance it looks like it’s not safe to block the callback but I guess with a demo it will be easier to judge.
You can use this demo as a base if it would help: http://jsfiddle.net/n41vumo0/
So basically by manipulating the source array on which table data was based, I could achieve what I wanted. So during the copy operation , I copy values in the source array, and then call render() for the table, and it works!. So I overlooked the fact for a while, that changing the source array changes the table data(and is seen after render() ). Thanks for your hint for loadData() !.