I'm doing this because my dataIndx on every arrayData row is an integer (or there is no dataIndx provided). This method works well for me when single filter object (for one column) is provided. Yes, I know search is other than filter in behaviour, but I use filter behaviour for search as I want to show only those records whose matches the filter phrase. So, this is my code:
//colModel (don't look at the listeners, I used them for header filter and it worked well, but I don't want to use header filters at all. I left them here just for possible future cases):
colModelDetailsS = new Array();
colModelDetailsS.push({title:'Number',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(0, $(this).val(),'grid_summary');
}
}]
},
dataType: 'integer', width:45,align:'left'});
colModelDetailsS.push({title:'Title 1',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(1, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'left'});
colModelDetailsS.push({title:'Title 2',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(2, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'right'});
colModelDetailsS.push({title:'Title 3',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(3, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'right'});
colModelDetailsS.push({title:'Title 4',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(4, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'right'});
colModelDetailsS.push({title:'Title 5',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(5, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'right'});
colModelDetailsS.push({title:'Title 6',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(6, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:100,align:'right'});
colModelDetailsS.push({title:'Title 7',filter: {
type: 'textbox', condition: 'contain',
listeners: [{
change: function (evt, ui) {
filter(7, $(this).val(),'grid_summary');
}
}]
},
dataType: 'string', width:50,align:'right'});
//previous filter method for header filtering - worked well - not important in my case
function filter(dataIndx, value, gridDivElementId) {
$("#" + gridDivElementId).pqGrid("filter", {
data: [{ dataIndx: dataIndx, value: value }]
});
}
//my dataArray:
var arrayDataS=[[0, 'Test 1', ' 290', ' 3', ' 37', ' 428', '8', '30'],
[1, 'Test 2', ' 61', ' 7', ' 8', ' 95', ' 2', '35'],
[2, 'Test 3', '5', '69', '8', '9', '5', '4'],
[3, 'Test 4', ' 90', '50', ' 1', ' 1', '3', '8'],
[4, 'Test 5', '9', '5', '4', '1', '2', '3'],
[5, 'Test 6', '33', '23', '32', '44', '1', '3'],
];
//grid declaration:
var obj = {
dataModel: {
data: arrayDataS,
sorting: "local",
},
colModel: colModelDetailsS,
width: 1000,
height: 400,
title: "test grid",
resizable: false,
flexHeight: false,
freezeCols: 1,
filterModel: { on: true, mode: "OR", header: false }, //turned on, but no header filtering needed
numberCell: { show: true },
editable: false,
selectionModel: { type: 'cell' },
scrollModel: { autoFit: true},
hwrap: false,
wrap: false,
toolbar: {
cls: "pq-toolbar-search",
items: [
{ type: "<span style='margin:5px;'>Search</span>" },
{ type: 'textbox', style: "border:1px solid #aaa;padding:1px 5px;", cls: "filterValue" },
{
type: 'select', style: "margin:0px 5px;", cls: "filterCondition", options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "end": "Ends With" },
{ "less": "Less Than" },
{ "great": "Great Than" }
]
},
//I don't need filterColumn as I want to search by every column which is not hidden
//{
// type: 'select', cls: "filterColumn", options: function (ui) {
// var CM = ui.colModel;
// var opts = [];
// 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: 'separator' },
{ type: 'button', label: 'Filter', icon: 'ui-icon-search', listeners: [{ click: filterhandler }] }
]
},
};
Current filterhandler method is in previous post. It uses
var filterObject = [{ dataIndx: 0, condition: condition, value: value }, { dataIndx: 1, condition: condition, value: value },{ dataIndx: 2, condition: condition, value: value }];
just for test case, but later I want to use it for every column selected for searching, like:
var filterObject = new Array();
for (n in selectedForSearchColumns) {
filterObject.push({ dataIndx: selectedForSearchColumns[n].indx, condition: condition, value: value });
}
and so on. Plus how to, using this filter method, yellowmark phrase in every filtered record passing the match, and how to use multiple words phrase for filtering?
//EDIT:
Changed: filterModel: { on: true, mode: "OR", header: false }, //turned on, but no header filtering needed
and filtering works, let's say. So how to:
using this filter method, yellowmark phrase in every filtered record passing the match, and how to use multiple words phrase for filtering?
