Incorrect filter parameters

[dportal]

Hello,

we user paramquery pro release 6.0.0.

I want to use the filter as in example https://paramquery.com/demos/filter_local.

I get the error "uncaught exception: Incorrect filter parameters. Please check upgrade guide" but do not know which filter parameters are wrong.

My grid object:

Code: [Select]

var obj = {
        height: 1400,
        colModel: colModel,
        postRenderInterval: -1,
        dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ID",
                url: "data.php?ACTION=GET_GRID",
                getData: function (response) {
                    return { data: response.data };
                }
            },
            load: function (evt, ui) {
                var grid = this,
                    data = grid.option('dataModel').data;

                grid.widget().pqTooltip(); //attach a tooltip.

                grid.isValid({ data: data });
            },
        filterModel: { mode: 'OR' },
        pageModel: { type: 'local', rPP: 100, rPPOptions: [5,20,100,1000] },
        freezeCols: 3,
        wrap: false,
        editable: false,
        resizable: true,
        menuIcon: true,
            menuUI:{
                tabs: ['hideCols']
            },
        detailModel: { init: initDetail },
        toolbar: {
            cls: "pq-toolbar-search",
            items: [
            { type: "<span style='margin:5px;'>Filter</span>" },
                    { type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'keyup': 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[i];
                                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" },
                        { "regexp": "Regex" }
                        ]
                    },
            {
                    type: 'button',
                    icon: 'ui-icon-print',
                    label: 'Drucken',
                    listener: function () {
                        var exportHtml = this.exportData({ title: 'Druckansicht', format: 'htm', render: true }),
                            newWin = window.open('', '', 'width=1200, height=700'),
                            doc = newWin.document.open();
                        doc.write(exportHtml);
                        doc.close();
                        newWin.print();
                    }
                },{
                    type: 'select',
                    label: 'Export-Format: ',
                    attr: 'id="export_format"',
                    options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
                },
                {
                    type: 'button',
                    label: "Export",
                    icon: 'ui-icon-arrowthickstop-1-s',
                    listener: function () {
                        var format = $("#export_format").val(),
                            blob = this.exportData({
                                format: format,
                                nopqdata: true,
                                render: true
                            });
                        if(typeof blob === "string"){
                            blob = new Blob([blob]);
                        }
                        heute = new Date(); monat=heute.getMonth()+1;
                        timestamp = heute.getDate()+'_'+monat+'_'+heute.getFullYear()+'_'+heute.getHours()+'_'+heute.getMinutes();
                        saveAs(blob, "export_"+timestamp+"."+ format );
                    }
                }]
            }
    };



Thanks for help!

[paramvir]

colModel and filterhandler are missing from yours' shared definition of grid object.

Please remove filter listeners from the toolbar and check the result.

[dportal]

I get no result without filter listeners at the toolbar.

My filter handler:

Code: [Select]

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[i].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
            });
        }
        //filterRender to highlight matching cell text.
        function filterRender(ui) {
            var val = ui.cellData,
                filter = ui.column.filter;
            if (filter && filter.on && filter.value) {
                var condition = filter.condition,
                    valUpper = val.toUpperCase(),
                    txt = filter.value,
                    txt = (txt == null) ? "" : txt.toString(),
                    txtUpper = txt.toUpperCase(),
                    indx = -1;
                if (condition == "end") {
                    indx = valUpper.lastIndexOf(txtUpper);
                    //if not at the end
                    if (indx + txtUpper.length != valUpper.length) {
                        indx = -1;
                    }
                }
                else if (condition == "contain") {
                    indx = valUpper.indexOf(txtUpper);
                }
                else if (condition == "begin") {
                    indx = valUpper.indexOf(txtUpper);
                    //if not at the beginning.
                    if (indx > 0) {
                        indx = -1;
                    }
                }
                if (indx >= 0) {
                    var txt1 = val.substring(0, indx);
                    var txt2 = val.substring(indx, indx + txt.length);
                    var txt3 = val.substring(indx + txt.length);
                    return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
                }
                else {
                    return val;
                }
            }
            else {
                return val;
            }
        }

    //Spalten für Grid
    var colModel = [{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, copy: false,
                    menuInHide: true, menuUI: {tabs:['hideCols']}
                },
                    {title: "ID", width: 100, dataType: "integer", dataIndx: "ID", hidden: true, render: filterRender},
                    {title: "Column 1", width: 280,dataType: "html", dataIndx: "COLUMN1", hidden: true, render: filterRender},
                    {title: "Column 2", width: 290,dataType: "html", dataIndx: "COLUMN2", copy: false, render: filterRender},
                    {title: "Column 3", width: 450,dataType: "string", dataIndx: "COLUMN3", render: filterRender},
                    {title: "Column 4", width: 125,dataType: "date", dataIndx: "COLUMN4", render: filterRender},
                    {title: "Column 5", width: 125,dataType: "date", dataIndx: "COLUMN5", render: filterRender},
                    {title: "Column 6", width: 110,dataType: "string", dataIndx: "COLUMN6", render: filterRender},
                    {title: "", editable: false, minWidth: 60, sortable: false, copy: false,
                    render: function (ui) {
                        return "<input type='image' src='images/ed.png'>";
                    },
                    postRender: function (ui) {
                        var rowIndx = ui.rowIndx,
                            grid = this,
                            $cell = grid.getCell(ui);
                            var ID = grid.getRecId({ rowIndx: rowIndx });
                             //Button
                            $cell.find(".ds-edit").button({ icons: { primary: 'ui-icon-close'} })
                            .off("click")
                            .on("click", function (evt) {
                                ds_edit(data_file, ID);
                            });

                    }
                },
                {title: "", editable: false, minWidth: 60, sortable: false, copy: false,
                    render: function (ui) {
                        return "<input type='image' src='images/de.png'>";
                    },
                    postRender: function (ui) {
                        var rowIndx = ui.rowIndx,
                            grid = this,
                            $cell = grid.getCell(ui);
                             //Button
                            $cell.find(".ds_del").button({ icons: { primary: 'ui-icon-close'} })
                            .off("click")
                            .on("click", function (evt) {
                                ds_del(data_file, rowIndx, grid);
                            });

                    }
                },
                    {title: "Column 7", width: 210,dataType: "string", dataIndx: "COLUMN7", render: filterRender},
                    {title: "Column 8", width: 140,dataType: "string", dataIndx: "COLUMN8", render: filterRender},
                    {title: "Column 9", width: 250,dataType: "string", dataIndx: "COLUMN9", render: filterRender},
                    {title: "Column 10", width: 250,dataType: "string", dataIndx: "COLUMN10", render: filterRender},
                    {title: "Column 11", width: 190,dataType: "html", dataIndx: "COLUMN11", render: filterRender},
                    {title: "Column 12", width: 210,dataType: "string", dataIndx: "COLUMN12", render: filterRender},
                    {title: "Column 13", width: 300,dataType: "string", dataIndx: "COLUMN13", render: filterRender},
                    {title: "Column 14", width: 300,dataType: "string", dataIndx: "COLUMN14", render: filterRender},
                    {title: "Column 15", width: 300,dataType: "html", dataIndx: "COLUMN15", hidden: true, render: filterRender},
                    {title: "Column 16", width: 280,dataType: "string", dataIndx: "COLUMN16", hidden: true, render: filterRender},
                    {title: "Column 17", width: 125,dataType: "date", dataIndx: "COLUMN17", hidden: true, render: filterRender},
                    {title: "Column 18", width: 280,dataType: "string", dataIndx: "COLUMN18", hidden: true, render: filterRender},
                    {title: "Column 19", width: 125,dataType: "date", dataIndx: "COLUMN19", hidden: true, render: filterRender}

    ];

    function onTabsActive(evt, ui){
            //grid requires refresh whenever corresponding tab is refreshed.
            ui.newPanel.find(".pq-grid").pqGrid("refresh");
        };

    function initDetail(ui) {
            var rowData = ui.rowData,
                //get a copy of gridDetailModel
                detailobj = gridDetailModel( rowData ),
                detailobj2 = gridDetailModel2( rowData ),
                detailobj3 = gridDetailModel3( rowData ),
                //get markup of the detail template.
                html = $("#tmpl").html(),
                //create new detail place holder
                $detail = $("<div tabindex='0'></div>");

            for (var key in rowData) {
                var cellData = (rowData[key] == null) ? "" : rowData[key];
                html = html.replace("<#=" + key + "#>", cellData);
            }
            $detail.html(html);

            $detail.find(".pq-tabs").tabs().on("tabsactivate", onTabsActive);

            //append pqGrid in the 2nd tab.
            $("<div/>").appendTo($("#tabs-2", $detail)).pqGrid( detailobj );
            //append pqGrid in the 3nd tab.
            $("<div/>").appendTo($("#tabs-3", $detail)).pqGrid( detailobj2 );
            //append pqGrid in the 4nd tab.
            $("<div/>").appendTo($("#tabs-4", $detail)).pqGrid( detailobj3 );

            return $detail;
        };

    //Grid Objekt
    var obj = {
        height: 1400,
        colModel: colModel,
        postRenderInterval: -1,
        dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ID",
                url: "data.php?ACTION=GET_GRID",
                getData: function (response) {
                    return { data: response.data };
                }
            },
            load: function (evt, ui) {
                var grid = this,
                    data = grid.option('dataModel').data;

                grid.widget().pqTooltip(); //attach a tooltip.

                grid.isValid({ data: data });
            },
        filterModel: { mode: 'OR' },
        pageModel: { type: 'local', rPP: 100, rPPOptions: [5,20,100,1000] },
        freezeCols: 3,
        wrap: false,
        editable: false,
        resizable: true,
        menuIcon: true,
            menuUI:{
                tabs: ['hideCols']
            },
        rowInit: function (ui) {
                if (ui.rowData.COLUMN1 == 1)
                {
                    return {
                        style: "background:#e6fecd;"
                    };
                }
                if (ui.rowData.COLUMN2 == 1)
                {
                    return {
                        style: "background:#a4d96e;"
                    };
                }
            },
        detailModel: { init: initDetail },
        toolbar: {
            cls: "pq-toolbar-search",
            items: [
            { type: "<span style='margin:5px;'>Filter</span>" },
                    { type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'keyup': 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[i];
                                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" },
                        { "regexp": "Regex" }
                        ]
                    },
            {
                    type: 'button',
                    icon: 'ui-icon-print',
                    label: 'Drucken',
                    listener: function () {
                        var exportHtml = this.exportData({ title: 'Druckansicht', format: 'htm', render: true }),
                            newWin = window.open('', '', 'width=1200, height=700'),
                            doc = newWin.document.open();
                        doc.write(exportHtml);
                        doc.close();
                        newWin.print();
                    }
                },{
                    type: 'select',
                    label: 'Export-Format: ',
                    attr: 'id="export_format"',
                    options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
                },
                {
                    type: 'button',
                    label: "Export",
                    icon: 'ui-icon-arrowthickstop-1-s',
                    listener: function () {
                        var format = $("#export_format").val(),
                            blob = this.exportData({
                                format: format,
                                nopqdata: true,
                                render: true
                            });
                        if(typeof blob === "string"){
                            blob = new Blob([blob]);
                        }
                        heute = new Date(); monat=heute.getMonth()+1;
                        timestamp = heute.getDate()+'_'+monat+'_'+heute.getFullYear()+'_'+heute.getHours()+'_'+heute.getMinutes();
                        saveAs(blob, "export_"+timestamp+"."+ format );
                    }
                }]
            }
    };


[paramvir]

Please update your fiterhandler and filterRender functions for v6

Upgrade guide: https://paramquery.com/pro/upgrade/Index52

Ex: https://paramquery.com/pro/demos/filter_local

API for filter method: https://paramquery.com/pro/api#method-filter

[dportal]

Thank you, the new filter example works great!

[sshede]

"toUpperCase of undefined" filterRender giving error