<script type="text/javascript">
jQuery(document).ready(function(){
    var lastsel2;
  jQuery("#list").jqGrid({
    url:'Grid',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['APP_ID','CODE', 'VALUE'],
    colModel :[
      {name:'APP_ID', index:'APP_ID', width:100, editable:true, edittype:"text", editoptions:{size:10, maxlength: 15}},
      {name:'CODE', index:'CODE', width:100, editable:true, edittype:"text", editoptions:{size:10, maxlength: 15}},
      {name:'VALUE', index:'VALUE', width:500, align:'right', editable:true, edittype:"text", editoptions:{size:10, maxlength: 15}}],
           
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
   
    gridComplete: function(){
        var ids = jQuery("#list").getDataIDs();
        for(var i=0;i < ids.length;i++){
            var cl = ids[i];
            se = "<input type='button' value='Save' onclick="jQuery('#list').saveRow('"+cl+"',checksave);"  />";        //checksave is a callback function to show the response of inline save controller function
            ce = "<input type='button' value='C' title='Cancel' onclick="jQuery('#list').restoreRow('"+cl+"');" />";
            jQuery("#list").setRowData(ids[i],{act:se+ce});    //Save and Cancel buttons inserted via jqGrid setRowData function
        }
    },
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            jQuery('#list').restoreRow(lastsel2);    //restore last grid row
            jQuery('#list').editRow(id,true);        //show form elements for the row selected to enable updates
            lastsel2=id;    //save current row ID so that when focus is gone it can be restored
        }
    },
    caption: 'My first grid'
  });
});

function checksave(result)
{
    if(result.responseText!='') alert(result.responseText);
    else $("#list1").trigger("reloadGrid");
}
</script>