ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: bsolteam on July 18, 2014, 08:19:55 pm
-
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);
-
I couldn't make out from your message about the exact issue.
Could you please provide more details of the issue along with a screenshot.
-
hi ParaQuerryTeam
have u got my reply mail (snapshots) for this filtering issue
it showed error so thats why just for confirmation
Thanks
BSOL Team
-
i attached my screen shots it is always failing (attachment failed due to high MB or you might double clicked or refreshed)
please tell me some alternative way to send my screen shots. i tried with small MB also it is failing
-
Please refer to this demo:
http://paramquery.com/pro/demos/filter_local
Now enter a in the textbox.
If you want the filtered results for Customer ID to appear first, then in the dropdown choose CustomerID.
Please let know whether it answers your concern.
-
In my scenario i have only one column.
if i type b, b vessel should display first in my grid it is highlighting but not coming in the first that is the issue.
It seems i have missed something in my code.
Please check my code and suggest me what modification is required.
Thanks
-
I can't test your code as it's dependent upon server response.
Though I can suggest you to modify filterHandler as below:
function filterhandler(evt, ui) {
var $toolbar = $grid.find('.pq-toolbar-search'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = "begin",
filterObject;
filterObject = [{ dataIndx: 'vsl_name', condition: condition, value: value}];
$("#grid_json").pqGrid("filter", {
oper: 'replace',
data: filterObject
});
$("#grid_json").pqGrid("refreshDataAndView");
}
-
i changed filter handler code as you said but i am getting same result as prior
it is highlighting in the grid but not coming as a first grid. i think there might be problem in my obj
How to move the highlighted grid at first ??why it is not moving ...please check and give ur suggestion
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 obj = {
height:300,
numberCell:false,
editable: false,
resizable:false,
sortable:false,
columnBorders: true,
scrollModel:{autoFit:false, theme:false},
draggable:false,
collapsible: { on: false, collapsed: false },
showTitle: false,
showBottom:false,
dataModel: dataModel,
colModel: colModel,
numberCell: { show: false },
stripeRows : false,
track: true,
selectionModel: { type: 'none', subtype:'incr', cbHeader:true, cbAll:false},
filterModel: { mode: 'OR' },
toolbar: {
cls: 'pq-toolbar-search',
items: [
{ type: "<span style='margin:5px;'>Vessels</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'keyup': filterhandler}] },
]
},
editable: false,
scrollModel: { horizontal: false },
showTitle: false,
columnBorders: true
};
var $grid = $("#grid_json").pqGrid(obj);
my filter handler code
$(function () {
function filterhandler(evt, ui) {
var $toolbar = $grid.find('.pq-toolbar-search'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = "begin",
filterObject = [{ dataIndx: 'vsl_name', condition: condition, value: value}];
$("#grid_json").pqGrid("filter", {
oper: 'replace',
data: filterObject
});
$("#grid_json").pqGrid("refreshDataAndView");
}
-
1) you need to remove $("#grid_json").pqGrid("refreshDataAndView"); from filterhandler function and dataModel.getData callback.
2) When dataModel.location is remote you are supposed to implement remote server side filtering as shown in this demo:
http://paramquery.com/pro/demos/filter
Have you implemented server side filtering?
If you don't want to implement server side filtering then either modify dataModel.location to 'local' and modify the way you load data into grid as shown in this demo
http://paramquery.com/pro/demos/filter_local
or
add { type: 'local' } to filterModel.
Reference: http://paramquery.com/pro/api#option-filterModel
-
thank you for your suggestion now it is working fine