LightSwitch HTML infinite scrolling bug

Question

Dears,

In my screen I have a columns layout "Root" with a height of "Stretch to Container", inside it there are 2 rows layouts A and B, both have a height of "Stretch to Container" too. Each of A and B contains a table control (grid) of tens of thousands of records. This is OK since LightSwitch pages the results, fetching only 45 records at a time, until you scroll to the bottom then it fetches the next 45 records etc... (infinite scrolling)

Note: Both grids have vertical alignments of "Fit to Content".

However try to set layout A's isVisible = false (in the designer, or in the postRender method: contentItem.isVisible = false) and run the app, now B occupies the entire horizontal space as expected, but the table contained within B does not know when to step fetching records even though you don't scroll to the bottom, it keeps fetching 45 records after 45 records until the app stops responding and the browser crashes. Same behavior happens to A's table if you hide B and show A.

We tried tracing the problem in the LightSwitch JS files to no avail. And we could not come up with a satisfactory workaround.

Has anyone encountered this strange behavior and found a solution? We need to implement this tab-like functionality of multiple layouts and showing one at a time by setting isVisible=false on the others.

Answer 1

This flaw appears to be in the tryLoadMoreEntities function in Microsoft's LightSwitch library.

This function decides if more items should be added to the table (needMoreItems) by comparing the table's height against the height of the view area (scrollHelper.viewHeight).

Unfortunately, when the table is sized to "Fit to Content" and is hidden, the table's height evaluates to zero and this always results in more items being loaded by calling the loadMoreEntities method.

Having said this, you should be able to correct this flaw by revising this function as follows:

function tryLoadMoreEntities(table) {
    var collection = table._collection;
    if (!collection) {
        return;
    }
    if (collection.state === _VisualCollectionState.idle) {
        var scrollHelper = table._scrollHelper,
            needMoreItems =
                table.data._isActivated &&
                table._tableElement.is(":visible") &&
                table._tableElement.height() - scrollHelper.viewTop <
                    2 * scrollHelper.viewHeight;
        if (needMoreItems) {
            loadMoreEntities(table);
        } else {
            endLoading(table);
        }
    }
}

This revision introduces an additional check of the table element's visibility which should prevent the continuous loading you're experiencing.