SAPUI5 GridList growing feature not showing "Load More" button with manual server-side pagination using a JSONModel

Question

We are trying to implement efficient server-side pagination for an sap.f.GridList. Our goal is to load an initial set of items, and when the user clicks "Load More", fetch the next set from the server and append them to the list.

The Problem:

We are manually fetching the first 5 items from our OData service and populating a JSONModel. The GridList is configured with growing="true" and growingThreshold="5". The list correctly displays the first 5 items.

However, even though our OData service response (__count) confirms that there are more than 5 items in total on the server, the "Load More" button (or trigger) never appears. This prevents us from loading the next page.

What We Have Tried:

We attempted to use the growingStarted event to manually trigger a fetch for the next page, but this doesn't feel right and hasn't worked as expected. The core issue seems to be that the GridList's growing feature doesn't know that more data exists on the server when it's bound to a simple JSONModel.

Is there a way to fix our manual JSONModel implementation?

B) Or, should we switch to a programmatically created ODataModel in the controller? If so, what is the simplest way to configure the GridList binding to handle server-side paging, static filtering, and dynamic search correctly with this model type?

.xml file

<f:GridList
                    id="gridList"
                    items="{/results}"
                    growing="true"
                    growingThreshold="5"
                    growingStarted=".onGridUpdateFinished">

controller file

onInit: function () {
            this._bIsLoading = false;
            this.data = { results: []};  
            this.loadData(false); // Load initial page
        },

        loadPageData: function (bAppend) {
            var that = this;
            if (this._bIsLoading) {
                return;
            }
            var skip = bAppend ? this.data.results.length : 0;
            var top = 5; 
            var query = "&$orderby=ModifiedAt%20desc&$top=" + top + "&$skip=" + skip + "&$inlinecount=allpages&$format=json";

            // We use a custom factory to get the OData model and call 'findAll'
            var latestDataAndAllCount = ModelFactory.getInstance().getOdataModel("dummy.svc",
                "dummypath").findAll({
                    "where": query
                }, {
                    async: true
                });
            
            $.when(pageRequest).done(function (oLatestData) {
                if (bAppend) {
                        that.data.results = that.data.results.concat(oLatestData.d.results);
                        that.getView().getModel().refresh();
                    } else {
                        that.data = oLatestData.d;
                        var oModel = new JSONModel(that.data);
                        that.getView().setModel(oModel);
                    }
            });
        },

        // Our attempt to manually trigger the next fetch
        onGridUpdateFinished: function (oEvent) {
            var that = this;
            var sReason = oEvent.getParameter("reason");
            if (sReason === "Growing") {
                that._bIsLoading = false;
            }
            that.loadData(true);
            if (sReason === "Change") {
                that._bIsLoading = true;
            }
        }
    });

What do you mean by "server-side pagination"? The similar term server-drive paging refers to a paging mechanism driven by the server (the server decides the number of entities in one response) with hints in the response like __next (in OData V2) or @odata.nextLink (in V4). But your code snippet with $skip and $top indicates client-side paging (The client controls the number of entities in the request). Does your OData V2 service include __next in the JSON response? — Boghyon Hoffmann
– Boghyon Hoffmann, Commented Oct 3 at 16:55

Boghyon Hoffmann · Accepted Answer · 2025-10-03 17:00:24Z

0

To answer your question:

We are manually fetching the first 5 items from our OData service and populating a JSONModel.
[...] should we switch to a programmatically created ODataModel in the controller?

If possible, try to avoid fetching entities manually, as the documentation recommends to "bind controls directly to the OData model [...]." Not only is JSONModel purely a client-side model, non-metadata driven Controls such as sap.f.GridList are not aware of your data service capabilities either.

When bound with the ODataModel directly, the corresponding ODataListBinding and the control will take care of paging automatically for you.

answered Oct 3 at 17:00

Boghyon Hoffmann

18.3k16 gold badges96 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SAPUI5 GridList growing feature not showing "Load More" button with manual server-side pagination using a JSONModel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related