LoadMore button appearing when there are no more results

5 posts, 1 answers
  1. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 18 Jun 2013 Link to this post

    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?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Jun 2013 Link to this post

    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!

  3. Kendo UI is VS 2017 Ready
  4. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 19 Jun 2013 Link to this post

    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
            });
     
        });
  5. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 20 Jun 2013 Link to this post

    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?
  6. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 21 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready