Want to create JQgrid with inline add,edit,save without any buttons

Question

Below is my requirement:

1. Initially JQgrid should be Empty

2. On click of Jqgrid an new row has to be added with auto ID

3. On lost focus of row data should be saved to DB

4. On click of row user should be able to edit it and on lost focus data should be saved to DB

   var lastsel;
   jQuery("#list").jqGrid({
       url: "/TransactionType/GetGridData/",
       datatype: 'json',
       mtype: 'GET',
       height: "300",
   
       colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'],
       colModel: [
         { name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left' },
         { name: 'ContactName', index: 'ContactName', width: 150, align: 'left', editable: true },
         { name: 'Address', index: 'Address', width: 300, align: 'left', editable: true },
         { name: 'City', index: 'City', width: 150, align: 'left', editable: true },
         { name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left', editable: true }
       ],
   
       pager: jQuery('#pager'),
       rowNum: 10,
       rowList: [1, 3, 5, 10, 20, 30, 40, 50],
       recordpos: 'right',
       viewrecords: true,
       sortorder: "desc",
       sortname: "CustomerID",
       sorttype: "integer",
       multiselect: false,
       caption: "Manipulating JSON Data",
       emptyrecords: "No records found.",
       loadtext: "Loading...",
       loadonce: true,
       pgtext: "Page {0} of {1}",
       jsonReader: {
           repeatitems: true,
           cell: "cell"
       },
   
       onSelectRow: function (id) {
           if (id) {
               if (id !== lastsel) {
                   jQuery('#list').jqGrid('restoreRow', lastsel);
                   jQuery('#list').jqGrid('editRow', id, true);
                   lastsel = id;
               } else {
                   jQuery('#list').jqGrid('restoreRow', lastsel);
                   lastsel = "";
   
   
                   debugger;
                   var rows = jQuery("#list").jqGrid('getRowData');
                   var paras = new Array();
                   for (var i = 0; i < rows.length; i++) {
                       var row = rows[i];
                       paras.push($.param(row));
                   }
                   var rids = $('#list').jqGrid('getDataIDs');
                   var n = rids.length;
                   var nth_row_id = rids[n - 1];
   
                   jQuery("#list").addRow(n + 1, parameters = {
                       edit: true,
                       editicon: "ui-icon-pencil",
                       add: true,
                       addicon: "ui-icon-plus",
                       save: true,
                       saveicon: "ui-icon-disk",
                       cancel: true,
                       cancelicon: "ui-icon-cancel",
                       addParams: { useFormatter: false },
                       editParams: {}
                   });                     
   
   
               }
           }
   
   
   
   
       },
       editurl: "/TransactionType/GetTotalCount",
   
   
   });
   

This is my Jqgrid where i'm able to add the row but not with auto generated id and I'm not able to call the controller method after lost focus of row or Enter key.

Answer 1

jqGrid includes inlineNav method which allows to add to the navigator bar (created by navGrid called typically with add: false, edit: false option, see the answer) Add, Edit, Save and Cancel buttons. If the user click on one from the button the corresponding inline editing method will be called. One can use editParams and addParams.addRowParams to specify any additional options of inline editing methods (see here for example).

You current code use addRow directly. The second option (parameters =) contains wrong syntax. If you would need to generate unique id I would recommend you to use $.jgrid.randId() instead of usage n + 1. The first, and the only, parameter of addRow is object with options. If you use adRow directly you can use rowID option to specify the id of new added row. If no rowID option is specified jqGrid uses $.jgrid.randId() automatically to generate unique rowid of new row.

The ids of all inline editing buttons are set based on the id of the grid and a suffix: "_iladd", "_iledit", "_ilsave", "_ilcancel". For example is the grid have id="list" then the id of Save button will be "list_ilsave". If required you can disable any button by addressing it by its id (for example $("#list_ilsave").removeClass('ui-state-disabled'); - enable Save button and $("#list_ilsave").addClass('ui-state-disabled'); - disable it). In the same way you can use jQuery.click to simulate click on any button. For example $("#list_ilsave").click(); will simulate clicking on the Save button.

If the user clicks on Add button the new row (<tr>) will get additional class "jqgrid-new-row". You can use the fact to find rows added by addRow.

You can use editoptions.dataEvents to register blur or focusout. The answer and the answer could provide some code fragmants which could help you.

It could be important to refresh the ids of the grid with the values generated in DB after successful saving. There are many ways to implement this. One of the most easy way would be to reload the grid after successful saving the row. See the code from the answer. Another way will be to return the new id from the web method specified by editurl ("/TransactionType/GetTotalCount" in your code). Using aftersavefunc callback you can get the response of editurl and makes modification of the id of in the grid. See relatively long code of aftersavefunc in the answer as an example.