Hi I am facing issues in filtering the data, but the rendering function is working fine it is highlighting. i am not getting filtered data at first of grid. i am scrolling and seeing the highlighted data
my code for your view
$(function () {
function filterhandler(evt, ui) {
var $toolbar = $grid.find('.pq-toolbar-search'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = "begin",
dataIndx = "",
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_json").pqGrid("filter", {
oper: 'replace',
data: filterObject
});
$("#grid_json").pqGrid("refreshDataAndView");
}
//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);
//alert(txt1);
var txt2 = val.substring(indx, indx + txt.length);
//alert(txt2);
var txt3 = val.substring(indx + txt.length);
return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
$("#grid_json").pqGrid("refreshDataAndView");
$('#grid').jqxGrid('ensurerowvisible', 20);
}
else {
return val;
}
}
else {
return val;
}
}
var colModel = [
{ title: "", width: '5%', dataType: "bool", align: "center",type:'checkBoxSelection',
dataIndx:'state'},
{ title: "Vessel Name", width: "95%",align: "left",dataIndx:"vsl_name",render:filterRender,
},
];
var dataModel = {
location: "remote",
dataType: "JSON",
sorting:"local",
recIndex:"vsl_name",
method: "GET",
getUrl: function () {
var obj = {
url: "getvesselname",
};
return obj;
},
getData: function (response) {
return { data: response.data };
$("#grid_json").pqGrid("refreshDataAndView");
}
};
var obj = {
height:300,
numberCell:false,
editable: false,
resizable:false,
sortable:false,
columnBorders: true,
scrollModel:{autoFit:false, theme:false},
draggable:false,
collapsible: false,
showTitle: false,
showBottom:false,
dataModel: dataModel,
colModel: colModel,
selectionModel: { type: 'cell', subtype:'incr', cbHeader:true, cbAll:true},
filterModel: { mode: 'OR' },
toolbar: {
cls: 'pq-toolbar-search',
items: [
{ type: "<span style='margin:5px;'>Filter Vessels</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" }
]
}
]
},
editable: false,
scrollModel: { horizontal: false },
showTitle: false,
columnBorders: true
};
var $grid = $("#grid_json").pqGrid(obj);
