.kendoMobileListView Web API and endlessScroll challenges

3 posts, 0 answers
  1. Karl
    Karl avatar
    6 posts
    Member since:
    Jun 2011

    Posted 15 Apr 2013 Link to this post

    I am having issues getting endlessScroll to work to work with API.  Maybe I am just not putting two and two together.  I have seen options of converting IEnumerable to IQueryable OData, but that did not work either.  Watching the Network trace, it appears that it is passing the correct parameters to the Web API controller.

    The current issue is that when I scroll down, the endlessScroll does not get triggered for more records.   It returns the pageSize specified but does not make another request to the Web API Get().  Please help!  And thanks in advance for the assistance.


    HERE IS MY INDEX.HTML PAGE SCRIPT.  BELOW IS MY WEB API GET()

    <script>
        var dataSource;
        function listViewInit(e) {
            dataSource = new kendo.data.DataSource({
                pageSize: 10,
                page: 1,
                serverPaging: true,
                transport: {
                    read: {
                        url: "/api/Message/?isArchive=false",
                        dataType: "json",
                        type: 'GET'
                    }
                },
                parameterMap: function (options) {
                    var parameters = {
                        take: options.take,
                        skip: options.skip,
                        pageSize: options.pageSize,
                        page: options.page //next page
                    };
                    return parameters;
                },
                schema: {
                    data: function (data) {
                        return data.Data;
                    },
                    total: function (data) {
                        return data.Count;
                    }
                }
            });
     
            e.view.element.find("#secure-inbox").kendoMobileListView({
                endlessScroll: true,
                dataSource: dataSource,
                template: $("#listTemplate").text(),
                scrollThreshold: 10
            })
            .kendoTouch({
                filter: ">li",
                enableSwipe: true,
                touchstart: touchstart_inbox,
                tap: navigate_inbox,
                swipe: swipe_inbox
            });
        }
     
        // Other Functions Removed For Forum Post //
    </script>


    // GET api/<controller>
           public object Get(bool isArchived = false, int page = 1, int pageSize = 20)
           {
               IEnumerable<Message> data;
     
               int count;
     
               triagedbEntities db = new triagedbEntities();
               db.Configuration.ProxyCreationEnabled = false;
     
               data = (from x in db.view_secure_messages
                           where (x.TriageDecision != null) == isArchived
                           select new Message
                           {
                               msg_id = x.MessageID,
                               message_subject = x.MessageSubject,
                               message_received = x.MessageReceived
                           }).OrderByDescending(a => a.message_received).Skip((page - 1)*pageSize).Take(pageSize).ToList();
               count = data.Count();
     
               return new
               {
                   Count = count,
                   Data = data
               };
           }
  2. Karl
    Karl avatar
    6 posts
    Member since:
    Jun 2011

    Posted 15 Apr 2013 Link to this post

    Wait!  I may have just solved a week of headaches on my own.  The "total" count in the Web API controller is the total count of records in the DB.  I was actually passing a return count based on the result set of the pageSize query. 

    Therefore: 
    int count = data.Count(); // data was the IEnumerable result set from the Linq query using Take(pageSize)

    Changes To:
    int count = db.view_secure_messages.Count();

    If anyone has any comments to my approach, please let me know.  I can also provide any help to others facing the same challenges.  I needed endlessScroll due to the large number of results returned from my Web API controller. 
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Apr 2013 Link to this post

    Hi Brian,

    Your approach is correct, server response should contain total count of records in the DataBase. Endless scroll functionality depends on the total amount of records. As soon as the total is reached, ListView will stop hitting the server. You will find more information on the subject in this forum thread.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top