Infinite Scroll with SAPUI5 and HandsOnTable

Question

I am trying to implement infinite scroll i.e., load data on demand in a table rendered using HandsOnTable Plugin. The table is the part of the XML view designed using SAPUI5. I tried something mentioned here. But the position value that is returned by scrollTop method is greater than the document and window height even when the user has not scrolled till the end of the table. For e.g. the value returned by scrollTop is 670 and the $(window).height() value is 325.

I also tried using InfiniteScroll Plugin, but with no luck. My XML View is designed as follows.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="poc.itemdesc" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
    <content>
        <Panel xmlns="sap.m" id="iPanel" headerText="Items table"
            width="100%" height="auto" expandable="false" expanded="false"
            expandAnimation="true" expand="">
            <content>
                <HTML xmlns="sap.ui.core" id="HTMLCon" busy="false"
                    busyIndicatorDelay="1000" visible="true"
                    content="&lt;div id='sheetContainer' style='width: 100%; height: 550px; overflow: auto' data-originalstyle='width: 100%; height: 450px; overflow: auto' class='handsontable'&gt;&lt;/div&gt;"
                    preferDOM="true" sanitizeContent="false" afterRendering="HandsOnTbl">
                </HTML>
            </content> <!-- sap.ui.core.Control -->
        </Panel>
    </content>
</Page>

The code into the controller for HandsOnTable goes as follows,

HandsOnTbl : function(oEvent){
    var container = document.getElementById('sheetContainer');
    console.log(container);
    var settingsHOT = {
        data : Handsontable.helper.createSpreadsheetData(500, 10),
        colHeaders : [ "Item #",
                       "Attribute Name", "Attribute Value",
                       "Attribute Name", "Attribute Value", 
                       "Attribute Name", "Attribute Value",
                     ],
        contextMenuCopyPaste : {
            swfPath : "res/ZeroClipboard.swf"
        },
        search : true,
        rowHeaders : true,
        contextMenu : true
    };
    HOT = new Handsontable(container, settingsHOT);
}

Please help implement the infinite scroll.

score 0 · Answer 1 · answered Mar 30 '15 at 16:22

Infinite scroll is already implemented with handsontable since it uses virtual rendering (assuming you specified a width and height and/or set the overflow property to "auto").

You are correct in using scrollTop. The reason you're getting such a big number is that it's the position from the top of the scrolling element. So if you call scrollTop before scrolling, you'll get a value of 0. If you call it after scrolling down 670 pixels, you'll get a value of 670. This is a good behavior since it helps you know how far you've scrolled.

What you could do is calculate how many rows you've scrolled by first calculating the height of a row and (assuming they're all the same height) just divide the value of scrollTop by this value. I think handosntable sets the height to 23 pixels so if scrollTop gave you 670, then I think you must've scrolled past about 30 rows; confirm that to make sure this is the correct approach.

Now, if you're trying to lazy load, you can set an event on scrolling which, upon passing a certain threshold of number of rows, calls whatever function you want. That should do it!

Thank you @ZekeDroid for your answer. I will definitely try this out. However since the requirement on which I was working have changed and infinite scroll is not in the requirement, so I have not tried yet. Also, I do not know if there is direct method to determine number of rows in the HandsOnTable methods[https://github.com/handsontable/handsontable/wiki/Methods] — Maruthi Revankar, Apr 01 '15 at 09:11
However, there is a method to find row height and a method to find number of visible rows. Therefore, that can be used. — Maruthi Revankar, Apr 01 '15 at 09:29
Sure, whichever method you want to use works. I just wanted to make clear that scrollTop gives really useful information which is non-intuitive at first glance. Good luck and please close the question if you think it was answered. — ZekeDroid, Apr 01 '15 at 14:38

Infinite Scroll with SAPUI5 and HandsOnTable

1 Answers1