How to make only the clicked cell editable instead of all the editable cells in the row clicked - using jqgrid?

Question

At present I'm getting all the cells (with editable:true) in the row editable in which i clicked and not only the clicked the cell. The table is similar to the table in this link: http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm. I've gone through the link: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing, but didn't help (may be due to my fault in the way i tried) and also tried the answers given in stackoverflow related questions (used the attributes: cellEdit: true, cellsubmit: "clientArray").

Please help me using the above link as reference http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (I think mainly the "onSelectRow", "ondblClickRow" functions need to be updated. i tried onSelectCell etc. but failed! ).

Thanks in advance.

Answer 1

If you need to use cell editing you have to include cellEdit: true in jqGrid definition. If you use local datatype then you should use cellsubmit: "clientArray" additionally. If you want to save data on the remote source you have to implement editing in your server code and specify cellurl option of jqGrid. The documentation describes what jqGrid send to the server on saving of cell.

Answer 2

I'm currently working on an Angular 2 app with Typescript, and I had a different need where I wanted to be able to click a row in the grid, but only have one cell editable. I didn't like the user experience where the user had to click the actual cell to edit it. Instead, clicking the row highlights the row and then makes the one cell editable. Here's a screenshot:

The trick was that I needed to set cellEdit to false on the grid and then set the individual column editable to true when declaring my column model array, and write a change event for the editoptions of the column. I also had to write code for the the onSelectRow event of the grid, to keep track of the current row selected and to restore the previous row selected. A snippet of the Typescript code is below:

  private generateGrid() {

let colNames = ['id', 'Name', 'Total', 'Assigned', 'Distributed', 'Remaining', 'Total', 'Assigned', 'Remaining', 'Expiration'];
let self = this;

// declare variable to hold Id of last row selected in the grid
let lastRowId;

let colModel = [
  { name: 'id', key: true, hidden: true },
  { name: 'name' },

  { name: 'purchasedTotalCount', width: 35, align: 'center' },
  { name: 'purchasedAssignedCount', width: 35, align: 'center' },
  { name: 'purchasedDistributedCount', width: 35, align: 'center' },
  { name: 'purchasedRemainingCount', width: 35, align: 'center' },
  // receivedTotalCount is the only editable cell;
  // the custom change event works in conjunction with the onSelectRow event
  // to get row editing to work, but only for this one cell as being editable;
  // also note that cellEdit is set to false on the entire grid, otherwise it would
  // require that the individual cell is selected in order to edit it, and not just
  // anywhere on the row, which is the better user experience
  { name: 'receivedTotalCount',
    width: 35,
    align: 'center',
    editable: true,
    edittype: 'text',
    editoptions: {
      dataEvents: [
        {
          type: 'change', fn: function(e) {
            //TODO: don't allow decimal numbers, or just round down
            let count = parseInt(this.value);
            if (isNaN(count) || count < 0 || count > 1000) {
              alert('Value must be a whole number between 0 and 1000.');
            } else {
              self.updateLicenses(parseInt(lastRowId), count);
            }
          }
        },
      ]
    }
  },
  { name: 'receivedAssignedCount', width: 35, align: 'center' },
  { name: 'receivedRemainingCount', width: 35, align: 'center' },
  { name: 'expirationDate', width: 45, align: 'center', formatter: 'date' }
];

jQuery('#licenseManagerGrid').jqGrid({
  data: this.childTenants,
  datatype: 'local',
  colNames: colNames,
  colModel: colModel,
  altRows: true,
  rowNum: 25,
  rowList: [25, 50, 100],
  width: 1200,
  height: '100%',
  viewrecords: true,
  emptyrecords: '',
  ignoreCase: true,
  cellEdit: false,  // must be false in order for row select with cell edit to work properly
  cellsubmit: 'clientArray',
  cellurl: 'clientArray',
  editurl: 'clientArray',
  pager: '#licenseManagerGridPager',
  jsonReader: {
    id: 'id',
      repeatitems: false
  },

  // make the selected row editable and restore the previously-selected row back to what it was
  onSelectRow: function(rowid, status) {
    if (lastRowId === undefined) {
      lastRowId = rowid;
    }
    else {
      jQuery('#licenseManagerGrid').restoreRow(lastRowId);
      lastRowId = rowid;
    }
    jQuery('#licenseManagerGrid').editRow(rowid, false);
  },
});
}

Additionally, I wanted the escape key to allow the user to abort changes to the cell and then restore the cell to its previous state. This was accomplished with the following Angular 2 code in Typescript:

@Component({
  selector: 'license-manager',
  template: template,
  styles: [style],
  host: {
    '(document:keydown)': 'handleKeyboardEvents($event)'
  }
})

// handle keypress so a row can be restored if user presses Escape
private handleKeyboardEvents(event: KeyboardEvent) {
  if (event.keyCode === 27) {
    let selRow = jQuery('#licenseManagerGrid').jqGrid('getGridParam', 'selrow');
    if (selRow) {
      jQuery('#licenseManagerGrid').restoreRow(selRow);
    }
  }
}