Row filter not working

[thossain]

following is my json array.

Code: [Select]

[{
"ID": 1033,
"DeviceName": "353722052579226",
"ImeiNumber": "353722052579226",
"MobileNumber": "353722052579226",
"TruckNumber": "353722052579226",
"mLatitude": 00.8003275,
"mLongitude": 00.0083328,
"mtime": 1523289146780,
"Locality": "Sector 13",
"District": "ঢাকা"
}]

following my js code.

Code: [Select]

var colModel = [
                        {
                            title: "ID", //title of column.
                          //  width: 10, //initial width of column
                            //width: "100",
                            dataType: "integer", //data type of column
                            dataIndx: "ID" //should match one of the keys in row data.
                            , hidden: true
                        },
                        {
                            title: "Name",
                            dataType: "string",
                            width: "30%",
                            align: "center",
                            dataIndx: "DeviceName"
                            , hidden: false
                        },
                        {
                            title: "ImeiNumber",
                            //width: 150,
                            dataType: "string",
                            align: "center",
                            dataIndx: "ImeiNumber"
                            , hidden: true
                        },
                        {
                            title: "Truck",
                            width: "30%",
                            dataType: "string",
                            align: "center",
                            dataIndx: "TruckNumber",
                            hidden: true
                        },
                        {
                            title: "Mobile",
                            //width: 150,
                            dataType: "string",
                            align: "center",
                            dataIndx: "MobileNumber",
                             hidden: true
                        },
                        {
                            title: "mLatitude", //title of column.
                            //width: 100, //initial width of column
                            dataType: "string", //data type of column
                            dataIndx: "mLatitude" //should match one of the keys in row data.
                            , hidden: true
                        },
                        {
                            title: "mLongitude",
                            //width: 100,
                            dataType: "string",
                            dataIndx: "mLongitude"
                            , hidden: true
                        },
                        {
                            title: "mtime",
                            //width: 100,
                            dataType: "string",
                            align: "right",
                            dataIndx: "mtime"
                            , hidden: true
                        },
                       
                        {
                            title: "Locality",
                            //width: 150,
                            //dataType: "string",
                            align: "center",
                            dataIndx: "Locality",
                            filter: {
                                type: "select",
                                condition: 'equal',
                                prepend: { '': '--Select--' },
                                valueIndx: "Locality",
                                labelIndx: "Locality",
                                listeners: ['change']
                            }
                        },
                        {
                            title: "District",
                            //width: 150,
                            dataType: "string",
                            align: "center",
                            dataIndx: "District",
                            filter: {
                                type: 'select',
                                condition: 'equal',
                                valueIndx: "District",
                                labelIndx: "District",
                                groupIndx: "District",
                                prepend: { '': '' },
                                //listeners: 'change',
                                init: function (ui) {
                                    console.log(".......");
                                    console.log(ui);
                                   // ui.$editor.pqSelect({ checkbox: true, radio: true, width: '100%' });
                                }
                            }
                        }
                    ];

                    var obj22 = {
                        height: 600,
                        editable: false,                     
                        collapsible: { on: true, collapsed: false },
                        scrollModel: { autoFit: true },
                        numberCell: { show: false },
                        colModel: colModel,
                        load: function () {
                            console.log("aaaaa");
                            var grid = this;
                            var filter = grid.getColumn({ dataIndx: "Locality" }).filter;
                            filter.cache = null;
                            filter.options = grid.getData({ dataIndx: ["Locality"] });

                            filter = grid.getColumn({ dataIndx: "District" }).filter;
                            filter.cache = null;
                            filter.options = grid.getData({ dataIndx: ["District", "District"] });

                        },
                        dataModel: { data: data },
                        filterModel: { on: true, mode: "AND", header: true },
                        selectionModel: { type: 'cell', mode: 'block' },
                        cellClick: function (evt, ui) {
                            close_up(ui.rowData.ImeiNumber);
                        },
                        selectChange: function (evt, ui) {
                            var address = ui.selection.address();
                        }
                    };
                    var grid = pq.grid("#grid_json", obj22);
                    var filter = grid.getColumn({ dataIndx: "District" }).filter;
                    $.extend(filter, {
                        attr: "multiple",
                        condition: "range",
                        prepend: { '': '[ Empty ]' },
                        value: [],
                        cache: null
                    });
                    grid.filter({ oper: 'add', rules: [] });
                    grid.refresh();


i want achieve row filter. i followed  https://paramquery.com/pro/demos/filter_header_local

However it is not working. am i missing something. please help.