Loading issue

Getting help Questions
1

Hi, I have purchased Handsontable PRO licence. I setup it in my website. I have thousands of records in my table. When i execute handsontable, it will take lots of time to load. I am using “MongoDb” for database.

Can you please give me solution to load records quickly?

2

Hi @wmachugh
Did you checked our performance tips? They are available here: https://docs.handsontable.com/pro/1.4.0/tutorial-performance-tips.html

If you use custom renderers it can also have an impact on the performance. May I ask how big is the table (row, col)? And the second question - do you use paginating (it also improves performance)?

3

-Approx 14-16 columns and rows are large(greater than 10000) records.
-And we are not using pagination…

4

Here’s a demo with 16 column and 10k rows: http://jsfiddle.net/9mz0etyj/
Your data should load this fast or slightly slower - it’s depends on the data.

Please try the performance tips provided above.

5
  • I refered performance tips and i checked in my handsontable configuration. it satisfy with performance tips.
  • I used with this demo (“data: Handsontable.helper.createSpreadsheetData(10000, 16)”) by putting it in my handsontable.but it takes too much load
  • I set “renderAllRows” to true… because if i set it to false, then if i edit any cell, it will take me on the top of screen
6

If you could share a demo (via js playground) with your implementation I can check if there’s something we can do to make it faster.

7

Hi, Aleksandra…
Here, i am going to share you a demo url that i have implemented . Please check this : https://jsfiddle.net/developertechnostacks/m7m635sd/5/

8

thanks @wmachugh
I can see it’s pretty heavy for JSFiddle to handle it. I had to wait few secs to add rowHeaders.

I made a function of your data and load 1000 rows, after a quick timeline session…
The showForPiece() takes nearlt 2seconds to execute and if I see it correctly it runs 2 times so it’s 4 secs more

stats.png1036×310 40.6 KB

and this is how it looks for 5000 rows

stats5k.png1037×312 40.9 KB

I can’t change this function for you but I guess you should take a closer look what can be done there.

9

@wmachugh
I digged a little deeper and have to say that Handsontable loads so long as the renderAllRows: true as you said before.

you also wrote

I set “renderAllRows” to true… because if i set it to false, then if i edit any cell, it will take me on the top of screen

it sounds like a bug to me, but I couldn’t reproduce it with the provided demo. I changed a value in ‘Counter’ column it’s not shifting me up.

The second case is - as @budnix told me that there’s an issue with your first column. You’re hiding something with the hideFirstCell class so the virtual rendering doesn’t load the data correctly.

10

-ok…i solved that shifted up issue…
-i set “renderAllRow” to false…It renders records virtually…
-I need “xyz” data only while i click on “showForPiece” and “abc” records only while click on “showForHourly” as radio button displayed…but it shows both records while click on any of them…
-Is there any functionality that i can differentiate them…?

11

I have to say I didn’t examine the whole code as the formatting was killing me but the scenario is always the same. After a radio is checked you destroy or update the table.

ps. as the rows are all the same I highly encourage to create a function that will return a table.

12
  • I just update handsontable data (i.e., hot.updateSettings) for “ShowForPiece” and “ShowForHourly” records
  • I just hide “Hourly” records if “ShowForPiece” selected and hide “Piece” records if “ShowForHourly” selected. But it shows all records… If i set “renderAllRow” to true, then it will work fine but takes too much time to load
  • Can you please give me demo or example to do for as you said ( I highly encourage to create a function that will return a table) ?
13

Hi @wmachugh

I was thinking about something like this: http://jsfiddle.net/2x2xvceL/

Here’s how you’re doing it now:

var myData = [
  { name: 'abc', surname: 'def'},
  { name: 'abc', surname: 'def'},
  { name: 'abc', surname: 'def'},
  { name: 'abc', surname: 'def'},
//..... and after 500 rows
 { name: 'abc', surname: 'def'}];

here’s an easier way, which takes only few lines

function myDataFunction(rows){
	var table = [], rowOfData = { name: 'abc', surname: 'def'};
  for(var i = 0; i < rows; i++){
  	table.push(rowOfData)
  }
  return table
}

executed by myDataFunction(500) for 500 rows

14
  • I also load data in loop as you described above…
  • All the records fetched from db… But, i just put some of data statically shared you for demo
15

That’s what I thought, cause it will be extremely time-absorbing to type it like in the example - that’s why it was only a ps. tip :slight_smile:

16

Now, i am sharing my full code with you…Please refer this link :

Go through this : http://expirebox.com/download/9e67280a4a9ef2483d7515cf01fc882c.html

17

Thanks but I’m not sure how can I help you with this? I thought that changing renderAllRows to false speeds up the process.

18

-Can you please check where i am missing for need “Piece” or “Hourly” records on particular selected…?
-Or any other way, to differentiate them?

19

This type of actions are a part of our commercial offer. If you would like to hire us to clean or optimize your code please write us at support@handsontable.com