Author Topic: Filter not working in inline edit grid (DropDown column)  (Read 3062 times)

sureshksn

  • Newbie
  • *
  • Posts: 2
    • View Profile
Filter not working in inline edit grid (DropDown column)
« on: December 08, 2016, 03:45:14 pm »
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
Quote
"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.

Code: [Select]
{
              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.

Code: [Select]
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"] });

Code: [Select]
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
« Last Edit: December 08, 2016, 03:49:04 pm by sureshksn »