Messages

1

Help for ParamQuery Grid (free version) / Issue in ParamQuery Grid Inline Edit

« on: December 08, 2016, 03:52:05 pm »

We are using ParamQuery grid in our project. In one of our screen, we are using the grid in modal popup with inline edit feature.

We are facing issue on editing the cell from second time. Here are the steps followed,

Open the popup, first time, tried to edit a record – it is perfectly changed and updated.
Now close and re-open the modal popup.
Try to change the data and update - It is not updating any data. Changed data gets vanished by retaining the previous value.
On debugging the code,
a. We are getting false in the following code snippet while updating the data,

Code: [Select]

if (grid.saveEditCell() == false) {
        return false;
  }
b. We are also getting the script error,

Code: [Select]

pqgrid.min.js:188 Uncaught TypeError: Cannot read property 'split' of undefined(…)
As of now, we are using the workaround,

“After updating the data 1st time, we are re-loading (using window.location.reload()) the page. Now it is working correctly. But in Ajax world, we don’t want to reload the full page, just to solve this issue. We believe, that this is because of some small issue or configuration missing.” Referred the following article and implemented the inline edit functionality http://paramquery.com/pro/demos/editing Appreciate your help.

Thanks
Suresh K

2

Help for ParamQuery Grid (free version) / 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

"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