scroll with filter does now work pls help me out. code is below
$(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
});
}
var pq = {
totalRecords: 0,
requestPage: 1,
pending: false,
rpp: 50, //records per request.
data: [],
};
// pq.init();
var obj = {
selectionModel: { type: 'row' },
scrollModel: {
autoFit: true
},
editable:false,
numberCell: { width: 60 },
title: "Infinite Scrolling",
virtualX: true, virtualY: true,
resizable: true,
filterModel: { on: true, header: false, type: 'remote' },
beforeSort: function () {
pq.data = [];
pq.requestPage = 1;
},
beforeTableView: function (evt, ui) {
var finalV = ui.finalV,
data = pq.data;
// data=item_uom;
if (ui.initV == null) {
return;
}
if (!pq.pending && finalV >= data.length - 1 && data.length < pq.totalRecords) {
pq.requestPage++;
pq.pending = true;
//request more rows.
$(this).pqGrid('refreshDataAndView');
//$(this).pqGrid('refreshView');
}
},
//filterModel: { mode: 'OR' },
toolbar: {
cls: "pq-toolbar-search",
items: [
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': 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" }
]
}
]
},
};
obj.colModel = [
{ title: "uom_code", dataIndx: "uom_code", width: 100 },
{ title: "uom_description", width: 180, dataIndx: "uom_description" },
];
obj.dataModel = {
dataType: "JSON",
location: "remote",
url: '@Url.Action("get","uom")',
postData: function () {
return {
pq_curpage: pq.requestPage,
pq_rpp: pq.rpp
};
},
getData: function (response) {
// item_uom.length = 0;
// $.merge(item_uom, response.data);
console.log(response.data);
//return { data: response.data };
var data = response.data,
// var data = item_uom,
len = data.length,
curPage = response.curPage,
pq_data = pq.data,
// pq_data = item_uom,
init = (curPage - 1) * pq.rpp;
pq.pending = false;
pq.totalRecords = response.totalRecords;
for (var i = 0; i < len; i++) {
pq_data[i + init] = data;
}
return { data: pq_data }
},
error: function (jqXHR, textStatus, errorThrown) {
//alert(errorThrown);
}
};
var $grid = $("#grid_search").pqGrid(obj);
});
