Hi, I have 2 different filters on the one grid, a filter in the toolbar and filters in the column headers. I initially set a column filter to true to display all rows that are visible which works great. When I then use the filter in the toolbar it works to filter, but the column filter seems to not be working as it hen displays all rows that are set to visible and not visible even though the column header filter is set to true to only show visible rows. some code below.
------Column filter code----------
{
title: "<ins><b>Visible?</b></ins>", minWidth: 70, dataIndx: "Visible", type: 'checkbox', dataType: 'bool', filter: {
type: "select",
value: ['true'],
on: true,
condition: 'equal',
prepend: { '': '-ALL-' },
valueIndx: "Visible",
labelIndx: "Visible",
listeners: ['change']
}
}
------Toolbar filter code----------
function filterhandler(evt, ui) {
var $toolbar = $gridEmployee.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 = $gridEmployee.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 }];
}
$gridEmployee.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;
}
}
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 ]' }];
var obj1 = {};
obj1[CM[2].dataIndx] = CM[2].title;
obj1[CM[1].dataIndx] = CM[1].title;
obj1[CM[0].dataIndx] = CM[0].title;
opts.push(obj1);
obj1 = null;
for (var i = 3; i < CM.length; i++) {
var column = CM;
var obj = {};
if (column.hidden != true) {
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" }
]
}, {
type: 'button', icon: 'ui-icon-plus', label: '<h3 style="color:green;">New Employee</h3>', listener: function () {
//append empty row at the end.
var rando = randomStr();
var rowData = { Visible: true, ID: rando }; //empty row
//var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
try {
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true, rowIndx: 0 });
this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
catch (err) {
alert(err);
}
}
},
{ type: 'button', label: '<h3 style="color:red;">Delete Employee</h3>', listeners: [{ click: deleteEmployeeRow }], icon: 'ui-icon-minus' },
{
type: 'button',
cls: 'blue',
icon: 'ui-icon-pencil',
label: '<h3 style="color:blue;"><b>Save All Updated Rows</b></h3>',
options: { disabled: false },
listener: function () {
saveChanges(this);
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: '<h3 style="color:grey;"><b>Refresh Grid</b></h3>',
options: { disabled: false },
listener: function () {
this.refreshDataAndView();
}
}]
}
