Author Topic: Filter Not Working for Render Columns  (Read 130 times)

vijay@spinetechnologies

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 41
    • View Profile
Filter Not Working for Render Columns
« on: August 04, 2022, 07:05:56 pm »
Dear Paramvir,

We have implemented PQGrid with filters, But the Filters do Not work for Render Columns.
Below is our code for your reference

var data = [
            { empInfo: {name:ABC, code:A001}, salary: 50000.00 },
            { empInfo: {name:PQO, code:S001}, salary: 40000.00 },
         { empInfo: {name:FOO, code:B006}, salary: 35000.00 },
         { empInfo: {name:TYU, code:D004}, salary: 60000.00 }
         ];

var columns = [
            { title: "Employee Code", dataIndx: "code",render: function (ui) {
                     return ui.rowData.empInfo.code;
                  }
         },
            { title: "Employee Name", dataIndx: "name", render: function (ui) {
                     return ui.rowData.empInfo.name;
                  } 
         },
            { title: "Salary", dataIndx: "salary" }
         ]


var obj = {
            width: "80%",
            height: 400,
         colModel: columns,
         title: "Grid Data",
            dataModel: { data: data },
         filterModel: { mode: 'OR' },
         toolbar: {
                cls: "pq-toolbar-search",
                items: [                   
                    {
                        type: 'textbox',
                        label: 'Filter: ',
                        attr: 'placeholder="Enter your keyword"',
                        cls: "filterValue",
                        listener: { keyup: filterhandler }
                    },
                    {
                        type: 'select', cls: "filterColumn",
                        listener: 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',                         
                        cls: "filterCondition",
                        listener: 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" }
                        ]
                    }
                ]
            }
        };

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
   });
}

$("#grid").pqGrid(obj);

Kindly suggest.


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Filter Not Working for Render Columns
« Reply #1 on: August 05, 2022, 02:55:42 pm »
[ Only Pro members may read this post. ]