Messages

1

Help for ParamQuery Grid (free version) / scroll with filter does now work pls help me out

« on: February 23, 2018, 05:46:58 pm »

scroll with filter does now work pls help me out. code is below

 $(function () {
            function filterhandler(evt, ui) {
                var $toolbar = $grid.find('.pq-toolbar-search'),
                    $value = $toolbar.find(".filterValue"),
                    value = $value.val(),
                    condition = $toolbar.find(".filterCondition").val(),
                    dataIndx = $toolbar.find(".filterColumn").val(),
                    filterObject;

                if (dataIndx == "") {//search through all fields when no field selected.
                    filterObject = [];
                    var CM = $grid.pqGrid("getColModel");
                    for (var i = 0, len = CM.length; i < len; i++) {
                        var dataIndx = CM.dataIndx;
                        filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
                    }
                }
                else {//search through selected field.
                    filterObject = [{ dataIndx: dataIndx, condition: condition, value: value }];
                }
                $grid.pqGrid("filter", {
                    oper: 'replace',
                    data: filterObject
                });
            }


            var pq = {
                totalRecords: 0,
                requestPage: 1,
                pending: false,
                rpp: 50, //records per request.
                data: [],               
            };
           // pq.init();
            var obj = {
                selectionModel: { type: 'row' },
                scrollModel: {
                    autoFit: true
                },
                editable:false,
                numberCell: { width: 60 },
                title: "Infinite Scrolling",
                virtualX: true, virtualY: true,
                resizable: true,
                filterModel: { on: true, header: false, type: 'remote' },
                beforeSort: function () {
                    pq.data = [];
                    pq.requestPage = 1;
                },
                beforeTableView: function (evt, ui) {
                    var finalV = ui.finalV,
                        data = pq.data;
                       // data=item_uom;
                    if (ui.initV == null) {
                        return;
                    }
                    if (!pq.pending && finalV >= data.length - 1 && data.length < pq.totalRecords) {
                        pq.requestPage++;
                        pq.pending = true;
                        //request more rows.
                        $(this).pqGrid('refreshDataAndView');
                        //$(this).pqGrid('refreshView');
                    }
                },
                //filterModel: { mode: 'OR' },
                toolbar: {
                    cls: "pq-toolbar-search",
                    items: [
                        { type: "<span style='margin:5px;'>Filter</span>" },
                        { type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': filterhandler }] },
                        {
                            type: 'select', cls: "filterColumn",
                            listeners: [{ 'change': filterhandler }],
                            options: function (ui) {
                                var CM = ui.colModel;
                                var opts = [{ '': '[ All Fields ]' }];
                                for (var i = 0; i < CM.length; i++) {
                                    var column = CM;
                                    var obj = {};
                                    obj[column.dataIndx] = column.title;
                                    opts.push(obj);
                                }
                                return opts;
                            }
                        },
                        {
                            type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
                            listeners: [{ 'change': filterhandler }],
                            options: [
                            { "begin": "Begins With" },
                            { "contain": "Contains" },
                            { "end": "Ends With" },
                            { "notcontain": "Does not contain" },
                            { "equal": "Equal To" },
                            { "notequal": "Not Equal To" },
                            { "empty": "Empty" },
                            { "notempty": "Not Empty" },
                            { "less": "Less Than" },
                            { "great": "Great Than" }
                            ]
                        }
                    ]
                },
            };

            obj.colModel = [
                  { title: "uom_code", dataIndx: "uom_code", width: 100 },
            { title: "uom_description", width: 180, dataIndx: "uom_description" },
            ];
            obj.dataModel = {
                dataType: "JSON",
                location: "remote",
                url: '@Url.Action("get","uom")',
                postData: function () {
                    return {
                        pq_curpage: pq.requestPage,
                        pq_rpp: pq.rpp
                    };
                },
                getData: function (response) {
                   // item_uom.length = 0;
                   // $.merge(item_uom, response.data);
                    console.log(response.data);
                    //return { data: response.data };
                     var data = response.data,
                   // var data = item_uom,
                        len = data.length,
                        curPage = response.curPage,
                        pq_data = pq.data,
                      // pq_data = item_uom,
                        init = (curPage - 1) * pq.rpp;
                    pq.pending = false;
                    pq.totalRecords = response.totalRecords;
                    for (var i = 0; i < len; i++) {
                        pq_data[i + init] = data;
                    }
                 
                     return { data: pq_data }


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //alert(errorThrown);
                }
            };
            var $grid = $("#grid_search").pqGrid(obj);           
        });