Issue to load data from the database with lazy loading & Web Service web Method

[pranit@srcomsec]

We are trying to implement "Lazy loading big data" as per the sample below.
https://paramquery.com/pro/demos/background_load

If we set the data model location as "lazy" then the web service web method is not called & data is not loaded.

Code: [Select]

dataModel: {
                location: 'lazy',
If we set the data model location as "remote" then the web service web method is called & data is also loaded.

Code: [Select]

dataModel: {
                location: 'remote',
Please review the complete code below and advise how to fix it with 'lazy' location.

Code: [Select]

<div id="grid_infinite" style="margin: auto;"></div>

            <script class="ppjs">

                $(function () {
                    var obj =
                    {
                        numberCell: { width: 60 },
                        title: "Background loading of data",
                        resizable: true,
                        filterModel: { on: true, header: true, type: 'local' },
                        menuIcon: true,
                        //hoverMode: 'row',
                        selectionModel: { type: 'row', mode: 'block' },
                        editable:false,
                       
                        toolbar: {
                            items: [
                                {
                                    type: 'button',
                                    label: 'Toggle filter row',
                                    listener: function () {
                                        this.option('filterModel.header', !this.option('filterModel.header'));
                                        this.refresh();
                                    }
                                },
                                {
                                    type: 'button',
                                    label: 'Toggle filter row condition dropdown',
                                    listener: function () {
                                        this.option('filterModel.menuIcon', !this.option('filterModel.menuIcon'));
                                        this.refresh();
                                    }
                                },
                                {
                                    type: 'button',
                                    label: 'Reset filters',
                                    listener: function () {
                                        this.reset({ filter: true });
                                    }
                                }
                            ]
                        },
                     
                        pageModel: { rPP: 50 },
                        columnTemplate: {
                            filter: {
                                crules: [{ condition: 'contain' }]
                            }
                        },
                        colModel:
                            [
                                { title: "#", width: 100, dataIndx: "inRowIndex", align: "center" },
                                { title: "Exchange", width: 130, dataIndx: "Exchange" },
                                { title: "Symbol", width: 190, dataIndx: "Symbol" },
                                { title: "Type", width: 100, dataIndx: "OrderType", align: "center" },
                                { title: "B/S", width: 100, dataIndx: "BuySell", align: "center" },
                                { title: "O. Qty", width: 100, dataIndx: "Qty", align: "right" },
                                { title: "P. Qty", width: 100, dataIndx: "QtyRemaining", align: "right" },
                                { title: "Price", width: 100, dataIndx: "OrderPrice", align: "right" },
                                { title: "Status", width: 100, dataIndx: "OrderStatus" },
                                { title: "Time", width: 100, align: "right", dataIndx: "stCreationTime" },
                                { title: "Row Index", width: 120, dataIndx: "OrderUID" }
                            ]
                    };

                    var loData = "fiExchange=1&fsSymbol=&fiStatus=0&fiLastRawIndex=0";
                    obj.dataModel =
                    {
                        method: "GET",
                        location: "remote",                       
                        beforeSend: function (jqXHR, settings) {
                            jqXHR.setRequestHeader("Content-Type", "application/json");
                        },

                        getUrl: function () {
                            //alert("1a");
                            return {                               
                                url: "/paramquery-gridv8.aspx/getOrders",
                                data: loData
                            };
                        },

                        getData: function (response) {                       
                            var loOrderJS = $.parseJSON(response.d);
                            data = loOrderJS.OrdersByFilter;
                            return { data: data }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            //debugger;
                            alert(jqXHR.responseText);
                        }
                    };

                    var grid = pq.grid("#grid_infinite", obj);
                    grid.one('lazyProgress', function () {
                        this.flex();
                    });

                    grid.on("beforeCellKeyDown", function (event, ui)
                    {
                        console.log(event.key);
                        if (event.key == "Delete")
                        {
                            console.log(grid.SelectRow().getSelection());

                            this.deleteRow({
                                rowList: grid.SelectRow().getSelection()
                            })
                            return false; //to prevent default behaviour.
                        }
                    });
                });               

            </script>


[paramvir]

The issue I see is the use of dataModel.getUrl and dataModel.beforeSend callbacks in your code which are currently not supported by lazy loading.

Its support would be added in upcoming version, its ETA is by end of this week.

[pranit@srcomsec]

Ohkay Noted. Thanks