Hi,
https://jsfiddle.net/Arunkumar_Muthusamy/xpvt214o/773066/
In the above mentioned URL, i’m trying to attain a behaviour.
- Load More Above button prepends data to the source data of the handsontable.
- Load More Below button appends data to the source data of the handsontable.
- After each time i’m loading the data to handsontable using loadData method, the whole table is rendered.
I want to prepend the data from the last position. Like in that jsFiddle, initiallly the first record is A1,B1,C1.
After clicking the load more above, im generating a set of json and prepending it and doing load data. This makes it the new data(i.e Z0,Y0,X0) as first row. I want the A1,B1,C1 to stay there and after scrolling only it has to load the previous data.
How to do that?
- I tried to add data using alter function.
- I tried scrollViewToPort but was failing if the row size was too large.
Is there any other workaround
Hi @arunkumarresidentevi
currently even a single change in the table content triggers the renderer for the whole table.
I’m doing lazy loading to load the data. So at some point, I’ll perform an edit operation on a row. At that point, I’ll refresh the page and load the part of the data that contains the previously edited row. From now on I’ll load the data based on demand, if I scroll down I’ll append the data and do load data which was fine and if I scroll up I’ll prepend the data and do load data. This one makes the new data at the top of the table. This makes me difficult to track the previously operated row, I’ll want to scroll from the previously edited one to the latest rows one by one. Is there any way to achieve this. @aleksandra_budnik
What is an exact scenario?
Correct me if I am wrong.
- I change cell
A50
- Hit the
Load More Below
and here you would like the cell A50 to get selected?
I will make his question clear. I too faced the similar scenario and we are in need of help right now.
- I have 1000 records but I display only 200 records at a time and load the next 200 while scrolling.
- Now I am at 450th row and editing the same. After the edit, I will show this edited record to the user on refresh, retaining the scroll position.
- Now when I scroll backwards from the 450th row, HOT will try to load the previous 200 records. This is where the problem occurs.
- HOT will initialize the previous 200 records (i.e. records from 400-200 in our case) and move the scroll position to the 200th record instead of 400, instantly. (Jumping to the 200th record)
As per his concern, those records (400 - 200) are rendered properly but scroll jumps to 200th record instead of slowly moving back (i.e. from 400 - 200)
Note: If no record is modified, HOT will render data perfectly in both forward and backward scroll.
Awaiting your response.
Thank you.
Old Data that handsontable already loaded with - OLD_DATA(Rows named as row1,row2,…row100)
New Data to be loaded - NEW_DATA(Rows named as ROW1,ROW2…ROW100)
Initially handsontable is loaded with OLD_DATA with first row as “row1”
Now clicking on “load more above” button will create NEW_DATA and prepend it to the OLD_DATA.
It results in (ROW1,ROW2,…ROW100,row1,row2…row100).
After “load data above” is called and the resultant data is populated, scroll of the handsontable is set to the first record of the NEW_DATA, i.e “ROW1”
Instead I want the scroll to stay in the previously scrolled position ( For example: if no vertical scroll event is triggered and “load data above” is clicked, I want “row1” of OLD_DATA to be the first element. )
But what happens is, it shows “ROW1” from NEW_DATA as the first record, which makes it difficult to find the “row1” of the OLD_DATA.
As the loadData doesn’t have an option to set a selection on new or old data you may want to call selectCell method inside the afterChange() hook where source parameter is loadData.
Still we are not able to change the scroll speed or smoothness. It will just instantly change the selection area.