Question

I’m sure my questions have been addressed somewhere, but I’ve researched for a while now and can’t seem to find the answers I’m looking for.

• When using the inlineNav feature, is there a “delete” option? I haven’t found any, so in order to use it, I have to create the grid using both the navGrid and inlineNav features, like this:

  $("#attributeEditList").jqGrid( { 
            datatype: "local",
            height: 150,
            colNames: ['rowid', 'Vendor', 'Category', 'Key', 'Value', 'Flags', 'Status'], 
            colModel: [
                        {name: 'rowid', index: 'rowid', hidden: true, key: true},
                        {name: 'vendorCode', index: 'vendorCode', hidden: true},
                        {name: 'category', index: 'category', width: 120, editable: true, editrules:{required: true} }, 
                        {name: 'key', index: 'key', width: 120, editable: true, editrules:{required: true} }, 
                        {name: 'value', index: 'value', width: 200, editable: true, editrules:{required: true} }, 
                        {name: 'flags', index: 'flags', width: 80, editable: true, editrules:{required: true, integer: true} }, 
                        {name: 'status', index: 'status', hidden: true }
                      ], 
            sortname: "category", 
            viewrecords: true,
            caption: "Attributes",
            rowNum: 20000,
            pager: '#attributeEditPager',
            editurl: "vendor/ajax/dummy.do",
            data: vendor.attributes,
            jsonReader : { repeatitems: false }
          });
          $("#attributeEditList").jqGrid( "navGrid", '#attributeEditPager', {
              edit: false, 
              add: false, 
              del: true,
              search: false,
              refresh: false,
              delfunc: deleteAttribute
            }
          );  
          $("#attributeEditList").jqGrid( "inlineNav", '#attributeEditPager' );  

• Is there any way to make the edits in the grid strictly client-side? I want my user to be able to make several edits (add/edit/delete) then post all of the changes in the grid, plus some other form changes outside of the grid, back to the server atomically. As far as I can tell, the editurl parameter is required, and must actually be a valid url, for editing to work.
• Last, and I think this is the biggest issue I’m having, is when using the inlineNav feature. First, I click the “Add (+)” button to add a row, add the data, then click the “save” button. Then, if I click the “Add” button again, a new row is added, but the “Add” and “Edit” buttons remain active, while the “Save” and “Cancel” buttons are still disabled.

If you have any advice on these issues, please let me know.

Answer 1

Look at the demo from the old answer where I demonstrate how one can implement local form editing in jqGrid. You first question was about the “Delete” added by navGrid. So you can use the trick with setting processing: true which I suggested to make “Delete” button working locally. You should additionally use editurl: 'clientArray'. I posted my suggestion to trirand about one year ago (see here), but the local form editing is still not the part of jqGrid.

You are right that there are many situations in which inlineNav work buggy and if the user clicks on the buttons in a little other order one have wrong activated or wrong deactivated buttons. You have to activate/deactivate the buttons manually using $("#attributeEditList_ilsave").removeClass('ui-state-disabled'); or $("#attributeEditList_ilsave").addClass('ui-state-disabled');. The ids of the buttons will be constructed from the gridid and the postfix “_iladd”, “_iledit”, “_ilsave”, “_ilcancel”. I recommend you include such code in the onSelectRow or beforeSelectRow till the bugs will be not fixed in the main code of jqGrid.