Pager widget - adding the "All" paging opton

[fzeker]

I believe this may help some folks, I had been trying to achieve the Paging control option for an "All" option after finding this is not a built-in feature.  I think my code addresses the paging option cleanly with no extra toolbar buttons.  Please review and correct if I'm wrong, or share for the community. Thanks!

var gridSample = $("#divGrid").pqGrid({
title: "Frank Z. sample",
pagemodel: {type: "local", rPP: 25},
dataModel: datModel,
colModel: colModel,
refresh: function (ui) {
                var $pager = this.pager().widget();
                if ($pager && $pager.length) {
                    var nAll=( $pager.pqPager("option", "totalRecords") );
                                        $pager.pqPager( "option", "rPPOptions", [10,25,nAll] );
                                        $($pager).find("select:last-of-type").find("option:last-of-type").html("All");
                }
});

[paramvir]

Just add a very large arbitrary number in pageModel.rPPOptions

Code: [Select]

pageModel: { type: "local", strRpp: "{0}", strDisplay: "{0} to {1} of {2}", rPPOptions:[10, 25, 100, 100000] },

followed by a simpler version of refresh callback.

Code: [Select]

refresh: function () {
      var pager = this.pager();                 
      if(pager) pager.widget().find("option:last").html("All");                 
},


[fzeker]

I had tested both ways and thought the arbitrary number was a bit of a pitfall for a "community" solution.  Thanks for the simplified version, however I am still having trouble digesting the pager().widget() model, now I constantly run into an event failure.

After initializing the grid object, I am saving (to cookie) the user's last selected preference for the pager: options, rPP
However, I cannot get the .on('change') event to progress/work properly.  What object / select do I use inside the function on event  pager:change( function(event,ui){... 

What am I doing wrong with this event handler ? 

Code: [Select]

var grid_obj = {
        /*...init. setup options...*/
        bubble: {on: true},
        refresh: function () {
            var pager = this.pager();
            if (pager) { pager.widget().find("option:last").html("All"); }
        },
        create: function () {
            var pager = this.pager();
            if (pager) {
                pager.widget().pqPager({
                    change: function (evt, ui) {
                        $(this).find("option:last").html("All");  // <-- THIS fails to work and also on select list change, refresh fails

                        //the following is basically working without error
                        if (ui.rPP){
                            setCookie("pqPager-" + sModel, ui.rPP, 365);
                            return true;
                        }
                    }
                });
            }
        }
}


[paramvir]

There is no need to add html( "All" ) at two places. It's already there in grid refresh event and it works fine for every case?

[paramvir]

Your question about usage of change event has been split into new topic:

https://paramquery.com/forum/index.php?topic=2398.0