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.

http://www.trirand.com/blog/jqgrid/jqgrid.html Row Editing -> Custom Edit in the left menu — Iarek, Mar 05 '12 at 10:03
Thank for your suggestion @laroslav. I have found at Row Editing (new)--> Inline Navigator (new).But I still don't find js event which have to fire when I click " + " button. — Frank Myat Thu, Mar 05 '12 at 10:23
at Custom Edit sample you may see those buttons attached to each row, for code see gridComplete event — Iarek, Mar 05 '12 at 10:51
Sorry, did not see word 'below' in the beginning of sentence. — Iarek, Mar 05 '12 at 11:03

score 5 · Accepted Answer · edited May 23 '17 at 12:07

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.

Thank you so much @Oleg, Finally, your suggestion and code solved my problem. — Frank Myat Thu, Mar 06 '12 at 03:53
@Oleg: My solution works only when the position: "afterSelected" is removed. Why? — A Coder, Feb 03 '15 at 09:16
@SanthoshKumar: I suppose because you don't added **modified version of `addRowData`** (see [the answer](http://stackoverflow.com/a/8437659/315935) referenced in the current my answer). — Oleg, Feb 03 '15 at 11:40

Jqgrid adding new blank row in inlineNav style

1 Answers1

Linked