LoadMore button appearing when there are no more results

[Kelly]

I have a page that loads an ajax request into a mobilelistview. Everything works fine except the loadmore button appears no matter if there is more data or not. Here's my code:

$(document).ready(function () {

        $("#memberList").kendoMobileListView({
            dataSource: new kendo.data.DataSource({
                pageSize: 10,
                serverPaging: true,
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            CustomerID: { type: "string" },
                            EmailAddress: { type: "string" },
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            MemberID: { type: "string" },
                            MemberTypeName: { type: "string" },
                            PlayerTypeName: { type: "string" }
                        }
                    }
                },
                transport: {
                    read: {
                        url: "@Url.Action("MemberListRead", "Club")",
                        type: "POST",
                        data: {
                            firstName: $('input[name="FirstName"]').val(),
                            lastName: $('input[name="LastName"]').val()
                        }
                    }
                }
            }),
            template: kendo.template($("#memberTemplate").html()),
            loadMore: true
        });
    });

I have confirmed total and pageSize return the correct information but even if total is 0 the load more button appears. Is this a kendo bug or have I done something screwy with the code?

[Kiril Nikolov]

Hi Paul,

Currently the "Press to Load More" button appears after every load of data. The way its implemented, the ListView cannot determine if there are more items to load after the current load is finished. This is why the button will appear even after all items are loaded and when pressed again after that the button will disappear. 

Here is a quick example of the this:

http://jsbin.com/aluzuh/5/edit

I would like to let you know that if the total is set to 0, by default the ListView will never hide the "Press to Load More" button. This is why I suggest you to check if the "Total" variable that you get is actually in the correct format and the desired information is passed to the ListView. If the problem still persists, can you please send us the JSON data that you pass to the widget, so we can investigate?

Regards,
Kiril
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

[Kelly]

I was able to get the load more button to stop appearing when it should by adding the following code:

change: function () {
    if (this.pageSize() > this.total() || !this.view()[9]) {
          $("#memberList").data("kendoMobileListView").stopLoadMore();
    }
}

I don't know if this is the desired behavior or if the load more button should automatically appear but I have it working.

Unfortunately I've noticed another issue. Currently we are using the listview to display search results and everything works fine if the user does not enter any information. However if the user runs a search with data in a field, gets results and then presses the load more button we see strange results. Instead of appending the extra results to bottom of the list it replaces the previous results with the new results. In other words if the search returns 14 items the first 10 (based on pageSize) are shown. Once the load more button is pressed the first 10 items are deleted and the next 4 are shown. I'm not sure if this is an issue with the load button or how we are doing our search but I find it weird that behavior is different based solely on the search fields.

Note: The search fields send an empty string value if no information is entered.

For readability here is the new code including the above change:

$(document).ready(function () {

        $("#memberList").kendoMobileListView({
            dataSource: new kendo.data.DataSource({
                pageSize: 10,
                serverPaging: true,
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            CustomerID: { type: "string" },
                            EmailAddress: { type: "string" },
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            MemberID: { type: "string" },
                            MemberTypeName: { type: "string" },
                            PlayerTypeName: { type: "string" }
                        }
                    }
                },
                change: function () {
                    if (this.pageSize() > this.total() || !this.view()[9]) {
                        $("#memberList").data("kendoMobileListView").stopLoadMore();
                    }
                },
                transport: {
                    read: {
                        url: "@Url.Action("MemberListRead", "Club")",
                        type: "POST",
                        data: {
                            firstName: $('input[name="FirstName"]').val(),
                            lastName: $('input[name="LastName"]').val()
                        }
                    }
                }
            }),
            template: kendo.template($("#memberTemplate").html()),
            loadMore: true
        });

    });

[Kelly]

The display problem on my listview was caused by running the stopLoadMore function so I'm back to square one. The loadmore button will disappear if the next page is blank but that might seem confusing the user.

I think the listview needs to be updated to compare the total results to the total shown assuming total and serverpaging are correctly created. Is there a function or some sort of css that can be accessed to hide this button after my logic check in the change function?

[Kiril Nikolov]

Hi Paul,

You are right about the total and this is what our next implementation will do. Regarding your question about hiding the LoadMore button - this is what the stopLoadMore() method basically does. However if you want to hide the the Load More button with CSS you can use:

.km-load-more {
       display:none;
}

Regards
Kiril Nikolov
Telerik