Hi,
we are using the Inline-Edit mode grid to add, edit and delete operations and filter purpose.
We are able to apply filter for normal textbox type columns. but while applying the filter for dropdown columns, it throwing the error
"pqgrid.min.js:423 Uncaught TypeError: g is not a function(…)"
. Tried in two ways 1. dropdownwith multiple type and 2.textbox both getting this error.
the following code used to achieve this.
{
title: "Level", width: "16%", dataIndx: "LevelName",
editor: {
type: 'select',
init: function (ui) {
},
valueIndx: "value",
labelIndx: "text",
mapIndices: { "text": "LevelName", "value": "LevelName" },
options: FeedRules_levelsList
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" }],
render: function (ui) {
var rowData = ui.rowData;
return '<span title="' + (rowData["LevelName"] === undefined || rowData["LevelName"] === "undefined" ? "" : rowData["LevelName"]) + '">' + (rowData["LevelName"] === undefined || rowData["LevelName"] === "undefined" ? "" : rowData["LevelName"]) + '</span>';
},
filter: { type: 'textbox', condition: 'contain', listeners: ['change'] }
},
{
title: "Operator", width: "16%", dataIndx: "OperatorName", dataType:"string",
editor: {
type: 'select',
valueIndx: "value",
labelIndx: "text",
mapIndices: { "text": "OperatorName", "value": "OperatorName" },
options: FeedRules_OperatorList
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" }],
render: function (ui) {
//return '<span title="' + ui.cellData + '">' + ui.cellData + '</span>';
var rowData = ui.rowData;
return '<span title="' + (rowData["OperatorName"] === undefined || rowData["OperatorName"] === "undefined" ? "" : rowData["OperatorName"]) + '">' + (rowData["OperatorName"] === undefined || rowData["OperatorName"] === "undefined" ? "" : rowData["OperatorName"]) + '</span>';
},
filter: {
type: 'select',
attr: "multiple",
condition: 'range',
valueIndx: "OperatorName",
labelIndx: "OperatorName",
prepend: { '': '' },
value: [],
cache: null,
style: "height:20px;",
listeners: ['change'],
init: function () {
$(this).pqSelect({ checkbox: true });
}
}
},
And below code.
var grid2 = grid.pqGrid("getInstance").grid;
grid2.option("dataModel.data", data);
var column = grid2.getColumn({ dataIndx: "OperatorName" });
var filter = column.filter;
filter.cache = null;
filter.options = grid2.getData({ dataIndx: ["OperatorName", "OperatorName"] });
var grid1 = {
width: "100%",
height: 490,
resizable: false,
columnBorders: true,
numberCell: { show: false },
trackModel: { on: true }, //to turn on the track changes.
rowBorders: true,
toolbar: {
items: [
{
cls: 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary paddinggridbtn addicon',
type: 'button',
//icon: 'ui-icon-document',
label: 'Add Rule',
listener: function () {
addRow_ruleCriteria(this);
}
}
]
},
wrap: false,
scrollModel: { autoFit: true },
editor: { type: 'textbox', select: true, style: 'outline:none;' },
editModel: { clicksToEdit: 1, pressToEdit: true },
selectionModel: { mode: 'single' },
validation: { icon: 'ui-icon-info' },
title: "<b>Inline Editing</b>",
colModel: colM,
filterModel: { on: true, mode: "AND", header: true },
postRenderInterval: -1, //synchronous post rendering.
dataModel: dataModel,
collapsible: { on: false, collapsed: false, toggle: false },
pageModel: { type: "local", rPP: 15, rPPOptions: [10, 15, 20, 50, 100], strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
editable: function (ui) {
return this.hasClass({ rowIndx: ui.rowIndx, cls: 'pq-row-edit' });
},
create: function (evt, ui) {
this.widget().pqTooltip();
this.refresh();
},
editorKeyPress: function (evt, ui) {
if (ui.dataIndx === 'InternalFieldName') {
return IsSpecialCharacter(evt);
}
},
};
var grid = $("#FeedRuleCriteria_grid").pqGrid(grid1);
Thanks
Suresh K