Hi
Search seems to work only if column is specified. [ All fields] gives "No rows to display" and no yellow marking (even is column is specified).
Any ideas? Thanks in advance.
...
<script>
$(function(){
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
});
}
//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;
}
}
var data = [
{ rank: 'abc', company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
{ rank: 'abc', company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
{ rank: 'abcd', company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
{ rank: 'abcd', company: 'BP', revenues: 267600.0, profits: 22341.0 },
{ rank: 'abcd', company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
{ rank: 'abcd', company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
{ rank: 'abcd', company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
{ rank: 'abcd', company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
{ rank: 'abcd', company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
{ rank: 'abcd', company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
{ rank: 'abcd', company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
{ rank: 'abcd', company: 'Total', revenues: 152360.7, profits: 15250.0 },
{ rank: 'abcd', company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
{ rank: 'abcd', company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
{ rank: 'abcd', company: 'AXA', revenues: 129839.2, profits: 5186.5 },
{ rank: 'abcd', company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
{ rank: 'abcd', company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
{ rank: 'abcd', company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
{ rank: 'abcd', company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
{ rank: 'abcd', company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
];
var obj = {
toolbar: {
cls: "pq-toolbar-search",
items: [
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'keyup': filterhandler}] },
{ type: 'select', cls: "filterColumn",
listeners: [{ 'change': 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', style: "margin:0px 5px;", cls: "filterCondition",
listeners: [{ 'change': 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" }
]
}
]
},
numberCell: true,
filterModel: { on: true, header: true },
numberCell: { show: true },
flexWidth: true,
flexHeight: true,
//width: 1000,
//height: 700,
hoverMode: "row",
scrollModel: { autoFit: true },
title: "TITLE",
pageModel: { type: "local", rPP: 100 },
colModel: [
{title:"TEST1", width:200, dataIndx: "rank", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{title:"TEST2", width:150, dataType: "string", align: "left", dataIndx: "company",
filter: { type: 'select',
condition: 'equal',
valueIndx: "company",
labelIndx: "company",
prepend: { '': '--Select--' },
//prepend: { '': '' },
listeners: ['change'],
init: function () {
$(this).pqSelect({ checkbox: true, width: '100%' });
}
}
},
{title:"TEST3", width:150, dataType:"string", align: "left", dataIndx: "revenues"},
{title:"TEST4", width:200, dataType:"string", align: "left", dataIndx: "profits"}
],
dataModel: {data:data}
}
var $grid = $("#grid_array").pqGrid( obj );
var column = $grid.pqGrid("getColumn", { dataIndx: "company" });
var filter = column.filter;
filter.cache = null;
filter.options = $grid.pqGrid("getData", { dataIndx: ["company"] });
var filter = $grid.pqGrid("getColumn", { dataIndx: "company" }).filter;
$.extend(filter, {
attr: "multiple",
condition: "range",
prepend: { '': '[ Empty ]' },
value: [],
cache: null,
style: "height:30px;"
});
//refresh the filter and view.
$grid.pqGrid("filter", { oper: 'add', data: [] })
.pqGrid("refresh");
var $grid = $("#grid_search").pqGrid( obj);
});
</script>
...
