jqGrid inline editing - add keys to save and cancel

Question

I have problem with inline editing in jqGrid. I want to have two editing methods:

First - editing by double clicking on the row (it works) and I can 'save' or 'cancel' only by keys 'enter' and 'escape'. What I should I do, if I want to have an active icon 'save' and 'cancel'? Its inactive.
Secondly - (more important), editing by select the row and clicking icon 'edit' (it's works too) and I can 'save' or 'cancel' only by icons. What I should I do, if I want use keys 'enter' and 'escape' to save and cancel?

I'm only interested inline editing. I read here about edit 'icon': When the button is clicked a editRow method is executed. I've got function but it's not opening automatically after I press icon 'edit'. It should overwrite the default function?

$(function(){
    var rowid;
    $("#list").jqGrid('editRow',rowid, 
    {
        keys : true, 
        oneditfunc: function() {
            alert ("edited"); 
        }
    });
});

My JqGrid code:

$(function(){
    $("#list").jqGrid({
        url:'<?php echo $this->baseUrl('/jq-grid/view'); ?>',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
        colModel :[ 
            {name:'invid', index:'invid', width:55, sorttype:'int', hidden:false,
                editable:true, key: true, 
                editrules:{ required:false, integer:true, edithidden:true} }, 
            {name:'invdate', index:'invdate', width:90, 
                editable:true, 
                editrules:{ date:true} },
            {name:'amount', index:'amount', width:80, align:'right', 
                editable:true, 
                editoptions:{readonly:false} }, 
            {name:'tax', index:'tax', width:80, align:'right', 
                editable:false, 
                editrules:{ edithidden:true} },
            {name:'total', index:'total', width:80, align:'right', 
                editable:false}, 
            {name:'note', index:'note', width:150, align:'right', sortable:false,
                editable:false}
        ],
        rowNum:5,
        rowList:[10,15,20,30],
         rowTotal: 2000, //maksimum
         loadonce: true,

        pager: '#pager',
        viewrecords: true,
        sortname: 'invid',  
        sortorder: 'asc', //'desc'
        gridview: true,
        height: '100%',
        width: '700',

        ondblClickRow: function(id){
            //jQuery('#list').editRow(id); //, true
            jQuery('#list').jqGrid('editRow',id,true);
        },
        editurl: '<?php echo $this->baseUrl('/jq-grid/edit'); ?>'
        //hidegrid:false,
        //hiddengrid:true,
        //caption: 'Grid'
    }); 

$(function(){
    $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); 
}); 
$(function(){
    $("#list").jqGrid('navGrid',"#pager",{edit:false,add:false,del:true}); //,search:false,refresh:false
});
$(function(){
    $("#list").jqGrid('inlineNav',"#pager",{
        save:true,
        edit:true,
        addParams: {addRowParams: {}}
    })
});

score 0 · Answer 1 · answered Dec 03 '14 at 10:11

The field code below will allow inline editing and display a save and cancel icon

{ name: "action", formatter: 'actions', index:"action", align: "left",sortable: false, editable: false, formatoptions:{ keys: true, editbutton: true, delbutton: true, editOptions: { closeOnEscape: true, closeAfterAdd: true, viewPagerButtons: false, closeAfterEdit: true, afterSubmit: function (response, postdata) { var r = $.parseJSON(response.responseText); return [r.success, r.Description, null]; } }, deleteOptions: { closeOnEscape: true, closeAfterAdd: true, viewPagerButtons: false, closeAfterDelete: true, afterSubmit: function (response, postdata) { var r = $.parseJSON(response.responseText); return [r.success, r.Description, null]; } } } },

jqGrid inline editing - add keys to save and cancel

1 Answers1