How to use change event of pager

[fzeker]

I strongly believe there is a bug in the "change" event for the pqPager.  If not, please explain what is incorrect.

Using your demo "Paging - local paging" (https://paramquery.com/pro/demos/paging_local), I put my modifications in for paging widget desirable functionality.  The paging controls do not work when the "change" event is incorporated, and the "500000 : All" text works fine when the event is not utilized, but breaks when it is set.

Please help me resolve this issue, it is a feature the client needs and I have spent an exhausting amount of time trying to resolve it, but I can only deduce that it's an API bug. 

This script put into the demo page javascript editor window will provide my frustrating experience:

Code: [Select]

    $(function () {
        var colM = [
            { title: "Order ID", width: 100, dataIndx: "OrderID" },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
    { title: "Required Date", width: 100, dataIndx: "RequiredDate" },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate" },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", width: 130, dataIndx: "ShipPostalCode" }
];
        var dataModel = {
            location: "remote",           
            dataType: "JSON",
            method: "GET",
            url: "/pro/invoice/get",
            //url: "/invoice.php", //for PHP
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        }
var rPP_recall = getCookie("pqPager-rPP");
rPP_recall = (rPP_recall > 1 ? rPP_recall : 25 )
        var grid1 = $("div#grid_paging").pqGrid({
            width: 900,
            height: 400,
            collapsible: false,
/* customized pageModel */
            pageModel: {
            type: "local",
rPP: rPP_recall,
strRpp: "{0}",
strDisplay: "{0} to {1} of {2}",
rPPOptions: [25, 50, 100, 500, 1000, 500000],
            change: function (evt, ui) {
                if (ui.rPP) {
                    setCookie("pqPager-rPP", ui.rPP, 365);
                }
            }
        },
            dataModel: dataModel,
            colModel: colM,
            wrap: false, hwrap: false,
            freezeCols: 1,           
            numberCell: { show: false, resizable: true, title: "#" },
            title: "Shipping Orders",
            resizable: true,
/* customized paging option:last-item on grid refreshing -- changes select text 500000 to show "All"  */
        refresh: function () {
            var pager = this.pager();
            if (pager) {
                pager.widget().find("option:last").html("All");
            }
        }
        });
   
/* customized dummy functions for my user pref. set & get values -- hardcoded return value=100 & simplified to make a console note of occurrence for debug */
    function setCookie(cname, cvalue, exdays) {
        console.log("setCookie: " + cname + " = " + cvalue)
    }

    function getCookie(cname) {
        console.log("getCookie: " + cname + " = 100");
        return 100;
    }

});


[fzeker]

I tossed a jsfiddle together for a populated data sample:

http://jsfiddle.net/vekf4md0/4/

[paramvir]

Thanks for the jsfiddle.

I've updated your jsfiddle with correct usage of change event. http://jsfiddle.net/acb7r5bz/1/

Code: [Select]

    //use change event of pager.
      grid1.pager().on("change", function(evt, ui) {
        if (ui.rPP) {
          setCookie("pqPager-rPP", ui.rPP, 365);
          console.log("row per page change:" + ui.rPP);
        }
      })


[fzeker]

You opened my eyes to a much better method of initialization and pq object referencing than the way I had been using.  That allowed me to reference everything is a simple way.  Thanks for your help, I truly appreciate the quick reply ! You've saved me so much frustration with finishing this feature solution.