How to make only the clicked cell editable instead of all the editable cells in the row clicked - us


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: <a href="http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm" rel="nofollow">http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm</a>. I've gone through the link: <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acell_editing" rel="nofollow">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing</a>, 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 <a href="http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm" rel="nofollow">http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm</a> (I think mainly the "onSelectRow", "ondblClickRow" functions need to be updated. i tried onSelectCell etc. but failed! ).

Thanks in advance.


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 <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acell_editing#properties" rel="nofollow">cellsubmit: "clientArray"</a> 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. <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acell_editing#what_is_posted_to_the_server" rel="nofollow">The documentation</a> describes what jqGrid send to the server on saving of cell.


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:

<a href="https://i.stack.imgur.com/B7Mqq.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/B7Mqq.jpg" data-original="https://i.stack.imgur.com/B7Mqq.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

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); } } }


  • Implementing search&highlight - how can I avoid delays when highlight is slow?
  • Starting a syn region with a keyword
  • Reference.push failed: first argument contains undefined in property 'confirm.orderTotal'
  • Observable.forkJoin() TS2322 error after updating to TypeScript 2.4.1 and Rxjs 5.4.2
  • Incorrect behaviour when selecting chips in Angular Material
  • How to start server for Selenium grid Java Maven setup
  • Accessing 3rd level of JSON with Angular ng-repeat
  • Allocating a 2D contiguous array within a function
  • UIBarButtonItem's action is not called when in a view with a UIGestureRecognizer
  • C++/CLI Thread synchronization including managed and unmanaged code
  • Slicing an SPA into several components and use AngularJS
  • What does the TypeScript “lib” option really do?
  • MultiLevel ExpandableListView not highlighting properly
  • to implement a spinner in angular2+
  • Dynamically load css stylesheet and wait for it to load
  • Create a link to a web page that runs a Javascript function on the page
  • Hide buttons on title bar in Java
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • Alternative to overridePendingTransition() - Android
  • Keep this build forever option - Jenkins
  • Meteor helpers not available in Angular template
  • Django: Count of Group Elements
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • req.body is undefined - nodejs
  • Fetching methods from BroadcastReceiver to update UI
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Symfony2: How to get request parameter
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Akka Routing: Reply's send to router ends up as dead letters
  • GridView Sorting works once only
  • Is there a mandatory requirement to switch app.yaml?
  • Data Validation Drop Down Box Arrow Disappearing
  • WPF Applying a trigger on binding failure
  • How do you join a server to an Active Directory (domain)?
  • Authorize attributes not working in MVC 4
  • Busy indicator not showing up in wpf window [duplicate]
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize