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.
