PullParameters function along with Pull To Refresh

5 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 22 Feb 2014 Link to this post

    Hello,

    I'm trying to have my ListView working with Pull To Refresh. Nevertheless, I can't have the listview refresehd.

    basically, when a user trigger pull to refresh, it should replace the whole content of the list view.

    Here is how I have handled my list view and the pull to refresh:


    $.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(
    function( response )
        {
            var dataToBeCached = new Array();
     
            //In order not to cache the same results twice
            var previousContent;
     
            if( response.containsResults )
            {
                var results = response.results;
                //On chope le nombre de resultats. Si !=limit, il y a de grandes chances qu'il n'y ai plus de resultats par la suite.
                // resultLength = data.length;
     
                // //On progresse dans les resultats
                // //Et on adapte offset et limit
                // offset += resultLength;
                // limit = offset + 20 ;
     
                //Merge the previous content with the new one
                // previousContent = JSON.parse( getItem("contentEvent") );
                // if ( previousContent != null )
                // {
                //  var dataToBeCached = dataToBeCached.concat(previousContent);
                // };
     
                //Remove previous markers
                Map.clearMarkers();
     
                // Add Markers on the map
                Map.setMarkerPosition( position.coords.latitude, position.coords.longitude, "grey" );
                for ( var i=0; i<results.length; i++ )
                {
                    Map.setMarkerPosition( results[i].lat, results[i].lng, "green");
                    results[i]["index"] = i;
                }
     
                setItem("events", JSON.stringify( results ), 1);
     
                var template = Handlebars.compile( $( '#eventListTemplate' ).html() );
                $("#list-container").kendoMobileListView({
                    template : template,
                    dataSource: kendo.data.DataSource.create(results),
                    fixedHeaders: false,
                    pullToRefresh: true,
                    pullParameters: function(item) {
                        console.log("pull");
                        //Here, another AJAX call to get the new results
                        $.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done( function( response )
                        {
                            console.log("when");
                            //I can see I'm getting my results properly here.
                            console.log(response.results);
                            //Doesn't work ...
                            return response.results;
                        });
                    }
                });
     
                //We remove those fucking classes added by default with Kendo UI
                // $("#list-container").removeClass("km-widget km-listview km-list");
                // $(".post-actions [data-role='button']").removeClass("km-widget km-button");
     
                $( document ).trigger( "wallReady" );
     
                //Retrieve the different user conversations:
                updateListOfChats();
     
            }
    });


    What should I put into the pullParameters function to make it work ? Thanks.
  2. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 22 Feb 2014 in reply to Yohann Link to this post

    I'm posting the code again without the unnecessary comments for clarity purpose. (How do we edit posts ?)

    function handle_geolocation_query( position )
    {
        $.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done( function( response )
        {
            var dataToBeCached = new Array();
     
            //In order not to cache the same results twice
            var previousContent;
     
            if( response.containsResults )
            {
                var results = response.results;
                 
                //Remove previous markers
                Map.clearMarkers();
     
                // Add Markers on the map
                Map.setMarkerPosition( position.coords.latitude, position.coords.longitude, "grey" );
                for ( var i=0; i<results.length; i++ )
                {
                    Map.setMarkerPosition( results[i].lat, results[i].lng, "green");
                    results[i]["index"] = i;
                }
     
                setItem("events", JSON.stringify( results ), 1);
     
                var template = Handlebars.compile( $( '#eventListTemplate' ).html() );
                $("#list-container").kendoMobileListView({
                    template : template,
                    dataSource: kendo.data.DataSource.create(results),
                    fixedHeaders: false,
                    pullToRefresh: true,
                    pullParameters: function(item) {
                        console.log("pull");
                        //Here, another AJAX call to get the new results
                        $.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done( function( response )
                        {
                            console.log("when");
                            //I can see I'm getting my results properly here.
                            console.log(response.results);
                            //Doesn't work ...
                            return response.results;
                        });
                    }
                });
     
                $( document ).trigger( "wallReady" );
     
                //Retrieve the different user conversations:
                updateListOfChats();
            }
        } );
    };
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Feb 2014 Link to this post

    Hello Yohann,

    I think that you have asked the same question in StackOverflow - please check my response there.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 26 Feb 2014 in reply to Petyo Link to this post

    yes.

    Thanks for your answer. I've commented your answer :)
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 28 Feb 2014 Link to this post

    Hello Yohann,

    Like I replied in stack overflow, the pull parameters function should return the parameters about to be passed in the next request, which is performed by the datasource component itself. 

    In your case, instead of returning query parameters object, you perform a request. Returning the result in the ajax promise callback does not help much. This is a return statement in the promise callback itself - it won't unwind to a return statement of the pullParameters function itself. 

    I hope that my explanations are clear. In case you have missed it, please refer to the code sample I linked.

    Regards,
    Petyo
    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