Question

My jqgrid inline edit works initially, but then after the first edit the edited row becomes unclickable and grey. How can I make it so I can edit the same row numerous times?

jQuery(document).ready(function(){
var lastsel;
var grid = jQuery("#list").jqGrid({

    url:'uploads/get_data.xml',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['id', 'IRD', 'DLN', 'Start day', 'Start month', 'Start Year', 'End day', 'End month', 'End year', 'Sales', 'Zerorated', 'Debit adjust', 'Purchases', 'Credit adjust'],
    colModel:[
        {name: 'id', index: 'id', hidden: true, editable: false },
        {name: 'irdnum', index: 'irdnum', width: 150, editable: true, editrules:{ number:true },search:true, stype: 'text' },
        {name: 'dln', index: 'dln', width: 150, editable: true },
        {name: 'gstperiodstarting_day', index: 'gstperiodstarting_day', width: 20, editable: true, editrules:{ number:true } },
        {name: 'gstperiodstarting_month', index: 'gstperiodstarting_month', width: 20, editable: true, editrules:{ number:true } },
        {name: 'gstperiodstarting_year', index: 'gstperiodstarting_year', width: 50, editable: true, editrules:{ number:true } },
        {name: 'gstperiodending_day', index: 'gstperiodending_day', width: 20, editable: true, editrules:{ number:true } },
        {name: 'gstperiodending_month', index: 'gstperiodending_month', width: 20, editable: true, editrules:{ number:true } },
        {name: 'gstperiodending_year', index: 'gstperiodending_year', width: 50, editable: true, editrules:{ number:true } },
        {name: 'sales', index: 'sales', width:100, editable: true, editrules:{ number:true } },
        {name: 'zerorated', index: 'zerorated', width: 100, editable: true, editrules:{ number:true } },
        {name: 'debitadjust', index: 'debitadjust', width: 100, editable: true, editrules:{ number:true } },
        {name: 'purchases', index: 'purchases', width:100, editable: true, editrules:{ number:true } },
        {name: 'creditadjust', index: 'creditadjust', width: 100, editable: true, currency: true, editrules:{ currency:true } }
    ],
    pager: '#pager',
    rowNum:50,
    rowList:[50,100,200],
    sortname: 'created_at',
    sortorder: 'asc',
    viewrecords: true,
    height: 500,
    scrollrows: true,
    rownumbers: false,
    caption: 'Uploaded Data',
    editurl: 'uploads/set_data.xml',

    onSelectRow: function(id){
        if(id && id!==lastsel){
            $('#list').restoreRow(lastsel);
            $('#list').editRow(id,true);
            lastsel=id;

        }
    },
});
jQuery('#list').navGrid('#pager',
    {view:true, edit:false, del:true, search:false, refresh:true, add:true},{closeAfterAdd: true},{},{},{closeAfterSearch: true}, {}) 

jQuery('#list').navButtonAdd('#pager', {caption:"", title:"Toggle Search Toolbar", buttonicon :'ui-icon-search', onClickButton:function(){ grid[0].toggleToolbar() } })
grid.filterToolbar();grid[0].toggleToolbar()

I’m thinking maybe I need to reload the entire grid after the edit? Would that work and how would I do so?

Answer 1

I think you should write :

   onSelectRow: function(id){
       if(id && id!==lastSel){ 
          $('#list').restoreRow(lastSel); 
          lastSel=id; 
       }
       $('#list').editRow(id, true); 
   },