1
Help for ParamQuery Pro / Re: Incorrect filter parameters
« on: November 13, 2019, 10:45:46 pm »
Thank you, the new filter example works great!
ParamQuery Grid
Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Pages: [1]
2
Help for ParamQuery Pro / Re: Incorrect filter parameters
« on: November 13, 2019, 08:27:06 pm »
I get no result without filter listeners at the toolbar.
My filter handler:
My filter handler:
Code: [Select]
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[i].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;
}
}
//Spalten für Grid
var colModel = [{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, copy: false,
menuInHide: true, menuUI: {tabs:['hideCols']}
},
{title: "ID", width: 100, dataType: "integer", dataIndx: "ID", hidden: true, render: filterRender},
{title: "Column 1", width: 280,dataType: "html", dataIndx: "COLUMN1", hidden: true, render: filterRender},
{title: "Column 2", width: 290,dataType: "html", dataIndx: "COLUMN2", copy: false, render: filterRender},
{title: "Column 3", width: 450,dataType: "string", dataIndx: "COLUMN3", render: filterRender},
{title: "Column 4", width: 125,dataType: "date", dataIndx: "COLUMN4", render: filterRender},
{title: "Column 5", width: 125,dataType: "date", dataIndx: "COLUMN5", render: filterRender},
{title: "Column 6", width: 110,dataType: "string", dataIndx: "COLUMN6", render: filterRender},
{title: "", editable: false, minWidth: 60, sortable: false, copy: false,
render: function (ui) {
return "<input type='image' src='images/ed.png'>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
var ID = grid.getRecId({ rowIndx: rowIndx });
//Button
$cell.find(".ds-edit").button({ icons: { primary: 'ui-icon-close'} })
.off("click")
.on("click", function (evt) {
ds_edit(data_file, ID);
});
}
},
{title: "", editable: false, minWidth: 60, sortable: false, copy: false,
render: function (ui) {
return "<input type='image' src='images/de.png'>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
//Button
$cell.find(".ds_del").button({ icons: { primary: 'ui-icon-close'} })
.off("click")
.on("click", function (evt) {
ds_del(data_file, rowIndx, grid);
});
}
},
{title: "Column 7", width: 210,dataType: "string", dataIndx: "COLUMN7", render: filterRender},
{title: "Column 8", width: 140,dataType: "string", dataIndx: "COLUMN8", render: filterRender},
{title: "Column 9", width: 250,dataType: "string", dataIndx: "COLUMN9", render: filterRender},
{title: "Column 10", width: 250,dataType: "string", dataIndx: "COLUMN10", render: filterRender},
{title: "Column 11", width: 190,dataType: "html", dataIndx: "COLUMN11", render: filterRender},
{title: "Column 12", width: 210,dataType: "string", dataIndx: "COLUMN12", render: filterRender},
{title: "Column 13", width: 300,dataType: "string", dataIndx: "COLUMN13", render: filterRender},
{title: "Column 14", width: 300,dataType: "string", dataIndx: "COLUMN14", render: filterRender},
{title: "Column 15", width: 300,dataType: "html", dataIndx: "COLUMN15", hidden: true, render: filterRender},
{title: "Column 16", width: 280,dataType: "string", dataIndx: "COLUMN16", hidden: true, render: filterRender},
{title: "Column 17", width: 125,dataType: "date", dataIndx: "COLUMN17", hidden: true, render: filterRender},
{title: "Column 18", width: 280,dataType: "string", dataIndx: "COLUMN18", hidden: true, render: filterRender},
{title: "Column 19", width: 125,dataType: "date", dataIndx: "COLUMN19", hidden: true, render: filterRender}
];
function onTabsActive(evt, ui){
//grid requires refresh whenever corresponding tab is refreshed.
ui.newPanel.find(".pq-grid").pqGrid("refresh");
};
function initDetail(ui) {
var rowData = ui.rowData,
//get a copy of gridDetailModel
detailobj = gridDetailModel( rowData ),
detailobj2 = gridDetailModel2( rowData ),
detailobj3 = gridDetailModel3( rowData ),
//get markup of the detail template.
html = $("#tmpl").html(),
//create new detail place holder
$detail = $("<div tabindex='0'></div>");
for (var key in rowData) {
var cellData = (rowData[key] == null) ? "" : rowData[key];
html = html.replace("<#=" + key + "#>", cellData);
}
$detail.html(html);
$detail.find(".pq-tabs").tabs().on("tabsactivate", onTabsActive);
//append pqGrid in the 2nd tab.
$("<div/>").appendTo($("#tabs-2", $detail)).pqGrid( detailobj );
//append pqGrid in the 3nd tab.
$("<div/>").appendTo($("#tabs-3", $detail)).pqGrid( detailobj2 );
//append pqGrid in the 4nd tab.
$("<div/>").appendTo($("#tabs-4", $detail)).pqGrid( detailobj3 );
return $detail;
};
//Grid Objekt
var obj = {
height: 1400,
colModel: colModel,
postRenderInterval: -1,
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ID",
url: "data.php?ACTION=GET_GRID",
getData: function (response) {
return { data: response.data };
}
},
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip(); //attach a tooltip.
grid.isValid({ data: data });
},
filterModel: { mode: 'OR' },
pageModel: { type: 'local', rPP: 100, rPPOptions: [5,20,100,1000] },
freezeCols: 3,
wrap: false,
editable: false,
resizable: true,
menuIcon: true,
menuUI:{
tabs: ['hideCols']
},
rowInit: function (ui) {
if (ui.rowData.COLUMN1 == 1)
{
return {
style: "background:#e6fecd;"
};
}
if (ui.rowData.COLUMN2 == 1)
{
return {
style: "background:#a4d96e;"
};
}
},
detailModel: { init: initDetail },
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[i];
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" }
]
},
{
type: 'button',
icon: 'ui-icon-print',
label: 'Drucken',
listener: function () {
var exportHtml = this.exportData({ title: 'Druckansicht', format: 'htm', render: true }),
newWin = window.open('', '', 'width=1200, height=700'),
doc = newWin.document.open();
doc.write(exportHtml);
doc.close();
newWin.print();
}
},{
type: 'select',
label: 'Export-Format: ',
attr: 'id="export_format"',
options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
},
{
type: 'button',
label: "Export",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {
var format = $("#export_format").val(),
blob = this.exportData({
format: format,
nopqdata: true,
render: true
});
if(typeof blob === "string"){
blob = new Blob([blob]);
}
heute = new Date(); monat=heute.getMonth()+1;
timestamp = heute.getDate()+'_'+monat+'_'+heute.getFullYear()+'_'+heute.getHours()+'_'+heute.getMinutes();
saveAs(blob, "export_"+timestamp+"."+ format );
}
}]
}
};
3
Help for ParamQuery Pro / Incorrect filter parameters
« on: November 10, 2019, 07:30:36 pm »
Hello,
we user paramquery pro release 6.0.0.
I want to use the filter as in example https://paramquery.com/demos/filter_local.
I get the error "uncaught exception: Incorrect filter parameters. Please check upgrade guide" but do not know which filter parameters are wrong.
My grid object:
Thanks for help!
we user paramquery pro release 6.0.0.
I want to use the filter as in example https://paramquery.com/demos/filter_local.
I get the error "uncaught exception: Incorrect filter parameters. Please check upgrade guide" but do not know which filter parameters are wrong.
My grid object:
Code: [Select]
var obj = {
height: 1400,
colModel: colModel,
postRenderInterval: -1,
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ID",
url: "data.php?ACTION=GET_GRID",
getData: function (response) {
return { data: response.data };
}
},
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip(); //attach a tooltip.
grid.isValid({ data: data });
},
filterModel: { mode: 'OR' },
pageModel: { type: 'local', rPP: 100, rPPOptions: [5,20,100,1000] },
freezeCols: 3,
wrap: false,
editable: false,
resizable: true,
menuIcon: true,
menuUI:{
tabs: ['hideCols']
},
detailModel: { init: initDetail },
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[i];
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" }
]
},
{
type: 'button',
icon: 'ui-icon-print',
label: 'Drucken',
listener: function () {
var exportHtml = this.exportData({ title: 'Druckansicht', format: 'htm', render: true }),
newWin = window.open('', '', 'width=1200, height=700'),
doc = newWin.document.open();
doc.write(exportHtml);
doc.close();
newWin.print();
}
},{
type: 'select',
label: 'Export-Format: ',
attr: 'id="export_format"',
options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
},
{
type: 'button',
label: "Export",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {
var format = $("#export_format").val(),
blob = this.exportData({
format: format,
nopqdata: true,
render: true
});
if(typeof blob === "string"){
blob = new Blob([blob]);
}
heute = new Date(); monat=heute.getMonth()+1;
timestamp = heute.getDate()+'_'+monat+'_'+heute.getFullYear()+'_'+heute.getHours()+'_'+heute.getMinutes();
saveAs(blob, "export_"+timestamp+"."+ format );
}
}]
}
};
Thanks for help!
Pages: [1]