Jqgrid adding new blank row in inlineNav style

Question

I would like to create Add Edit Save And Delete button below my JqGrid.

<script type="text/javascript">
jQuery(document).ready(function () {
    var lastSel = 0;
    jQuery("#list").jqGrid({
        url: '/SpeakerJqgrid/GridData/',
        editurl: "/SpeakerJqgrid/MyEdit/",
        datatype: 'json',
        mtype: 'GET',
        colNames: ['SpeakerID', 'SpeakerName'],
        colModel: [
                      { name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} },
                      { name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
                 ],
        onSelectRow: function (id) {
            if (id && id !== lastSel) {
                jQuery('#list').restoreRow(lastSel);
                lastSel = id;
            }
            jQuery('#list').editRow(id, true);
        },
        loadComplete: function () {
            //alert("Load Complete");
        },
        addRowData: function (rowid, rdata, pos, src) {
            alert("addRowData");
            if (pos === 'afterSelected' || pos === 'beforeSelected') {
                if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                    src = this[0].p.selrow;
                    pos = (pos === "afterSelected") ? 'after' : 'before';
                } else {
                    pos = (pos === "afterSelected") ? 'last' : 'first';
                }
            }
            return oldAddRowData.call(this, rowid, rdata, pos, src);
        },

        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'SpeakerName',
        sortorder: "desc",
        viewrecords: true,            
        autowidth: true,
        autoheight: true,
        imgpath: '/scripts/themes/black-tie/images',
        caption: 'My first grid'
    })
    $("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false});
    $("#list").jqGrid('inlineNav', '#pager', {
        edittext: "Edit",
        addtext: "Add",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: { position: "afterSelected" }
    });
    }); 
</script>

By using upper code, My Grid show me buttons called Add Edit Save And Delete.
But what problem is when I click those buttons, nothing happen.

I mean that I would like to create event which will fire when I click Add or Edit button.

Most of the examples I found is about adding new rows by using modal form. But what I have to use is inline grid row adding style.

Your suggestions will be appreciated.

Answer 1

First of all there are no callback function addRowData. If you want to modify the method addRowData to support 'afterSelected' or 'beforeSelected' you should follow my suggestion from the answer or this one with the demo.

Now about your main question. The inlineNav method used internally addRow and editRow methods. So if the user click on "Add" or "Edit" button added by inlineNav the addRow or editRow will be called. You can use addParams and editParams options of inlineNav to change the default parameters of addRow or editRow. If you just need to specify your own callback function which will be called when the user click on Add or Edit button you can use the following code:

$("#list").jqGrid('inlineNav', '#pager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel",
    addParams: {
        position: "afterSelected",
        addRowParams: {
            // the parameters of editRow used to edit new row
            keys: true,
            oneditfunc: function (rowid) {
                alert("new row with rowid=" + rowid + " are added.");
            }
        }
    },
    editParams: {
        // the parameters of editRow
        key: true,
        oneditfunc: function (rowid) {
            alert("row with rowid=" + rowid + " is editing.");
        }
    }
});

Additionally you should probably remove the code of the onSelectRow callback if you need to use Edit button of inlineNav.