JQGrid InlineNav delete option

Question

I am using "inlineNav" for my jqgrid. It has all the required features for Addition, edit, Cancel add. but cant find anything for deletion. I tried using "navGrid" delete but then that gives error "error Status: 'Not Found'. Error code: 404".

So can something be done about it?

@Oleg I am counting for your help!!

Following your suggestion I created this code but it is not working!! Can you tell me what went wrong:

var jsonData;
var jsonData1;
var dropdownVal;

function createDataStructure()
{
var mData;
if (document.forms[0].gridData.value == "" )
    "";
else
    mData = document.forms[0].gridData.value
jsonData = {
        "rows": [ mData ]
};
dropdownVal = "12345:Party;12346:Miscellaneous;12347:Conveyance;12348:Staff Welfare";
}

function callGrid()
{
createDataStructure();

"use strict";
var webForm = document.forms[0],
mydata = "",
grid = $("#View1"),
lastSel,
getColumnIndex = function (columnName) {
    var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
    for (i = 0; i < l; i++) {
        if ((cm[i].index || cm[i].name) === columnName) {
            return i; // return the colModel index
        }
    }
    return -1;
},
onclickSubmitLocal = function (options, postdata) {
    var $this = $(this),
    grid_p = this.p,
    idname = grid_p.prmNames.id,
    grid_id = this.id,
    id_in_postdata = grid_id + "_id",
    rowid = postdata[id_in_postdata],
    addMode = rowid === "_empty",
    oldValueOfSortColumn,
    new_id,
    tr_par_id,
    colModel = grid_p.colModel,
    cmName,
    iCol,
    cm;

    // postdata has row id property with another name. we fix it:
    if (addMode) {
        // generate new id
        new_id = $.jgrid.randId();
        while ($("#" + new_id).length !== 0) {
            new_id = $.jgrid.randId();
        }
        postdata[idname] = String(new_id);
    } else if (typeof postdata[idname] === "undefined") {
        // set id property only if the property not exist
        postdata[idname] = rowid;
    }
    delete postdata[id_in_postdata];

    // prepare postdata for tree grid
    if (grid_p.treeGrid === true) {
        if (addMode) {
            tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id';
            postdata[tr_par_id] = grid_p.selrow;
        }

        $.each(grid_p.treeReader, function (i) {
            if (postdata.hasOwnProperty(this)) {
                delete postdata[this];
            }
        });
    }

    // decode data if there encoded with autoencode
    if (grid_p.autoencode) {
        $.each(postdata, function (n, v) {
            postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
        });
    }

    // save old value from the sorted column
    oldValueOfSortColumn = grid_p.sortname === "" ? undefined : grid.jqGrid('getCell', rowid, grid_p.sortname);

    // save the data in the grid
    if (grid_p.treeGrid === true) {
        if (addMode) {
            $this.jqGrid("addChildNode", new_id, grid_p.selrow, postdata);
        } else {
            $this.jqGrid("setTreeRow", rowid, postdata);
        }
    } else {
        if (addMode) {
            // we need unformat all date fields before calling of addRowData
            for (cmName in postdata) {
                if (postdata.hasOwnProperty(cmName)) {
                    iCol = getColumnIndex.call(this, cmName);
                    if (iCol >= 0) {
                        cm = colModel[iCol];
                        if (cm && cm.formatter === "date") {
                            postdata[cmName] = $.unformat.date.call(this, postdata[cmName], cm);
                        }
                    }
                }
            }
            $this.jqGrid("addRowData", new_id, postdata, options.addedrow);
        } else {
            $this.jqGrid("setRowData", rowid, postdata);
        }
    }

    if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
        // close the edit/add dialog
        $.jgrid.hideModal("#editmod" + grid_id, {
            gb: "#gbox_" + grid_id,
            jqm: options.jqModal,
            onClose: options.onClose
        });
    }

    if (postdata[grid_p.sortname] !== oldValueOfSortColumn) {
        // if the data are changed in the column by which are currently sorted
        // we need resort the grid
        setTimeout(function () {
            $this.trigger("reloadGrid", [{current: true}]);
        }, 100);
    }

    // !!! the most important step: skip ajax request to the server
    options.processing = true;
    return {};
    },
editSettings = {
    //recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true,
    onclickSubmit: onclickSubmitLocal
},
addSettings = {
    //recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    savekey: [true, 13],
    closeOnEscape: true,
    closeAfterAdd: true,
    onclickSubmit: onclickSubmitLocal
},
delSettings = {
    // because I use "local" data I don't want to send the changes to the server
    // so I use "processing:true" setting and delete the row manually in onclickSubmit
    onclickSubmit: function (options, rowid) {
        var $this = $(this), grid_id = $.jgrid.jqID(this.id), grid_p = this.p,
            newPage = grid_p.page;

        // reset the value of processing option to true to
        // skip the ajax request to 'clientArray'.
        options.processing = true;

        // delete the row
        if (grid_p.treeGrid) {
            $this.jqGrid("delTreeNode", rowid);
        } else {
            $this.jqGrid("delRowData", rowid);
        }
        $.jgrid.hideModal("#delmod" + grid_id, {
            gb: "#gbox_" + grid_id,
            jqm: options.jqModal,
            onClose: options.onClose
        });

        if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
            if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                // if after deliting there are no rows on the current page
                // which is the last page of the grid
                newPage--; // go to the previous page
            }
            // reload grid to make the row from the next page visable.
            $this.trigger("reloadGrid", [{page: newPage}]);
        }

        return true;
    },
    processing: true
},
            initDateEdit = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: 'dd-M-yy',
                        //autoSize: true,
                        showOn: 'button',
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 100);
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: 'dd-M-yy',
                        //autoSize: true,
                        //showOn: 'button', // it dosn't work in searching dialog
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                }, 100);
            };

grid.jqGrid({
    datatype: "local",
    data: jsonData.rows,
    localReader: {
        repeatitems: false,
        id: "1"
    },
    colNames: ['Date','Expense Head','Amount', 'Reason','Remarks'],
    colModel: [
        {name:'sdate', index:'sdate', width:200, sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'},
            editable: true, datefmt: 'd-M-Y',
            editoptions: {dataInit: initDateEdit, size: 14},
            searchoptions: {dataInit: initDateSearch},
            editrules: {required: true} },
        {name:'expHead', index:'expHead', width:150, editable:true, sortable:true, edittype:"select", editoptions:{value:dropdownVal}, editrules: {required: true} },
        {name:'expAmt', index:'expAmt', width:100, editable:true, summaryType:'sum', editrules: {required: true} },
        {name:'expReason', index:'expReason', width:200, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}, editrules: {required: true} },
        {name:'expRemark', index:'expRemark', width:200,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"} }
    ],
    loadtext: "Loading...",
    sortname: 'sdate',
    sortorder: 'desc',
    pager: '#pView1',
    caption: "Expense Table",
    gridview: true,
    rownumbers: true,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    footerrow: true,
    height: "250",
    editurl: 'clientArray',
    beforeSelectRow: function (rowid) {
        if (rowid !== lastSel) {
            $(this).jqGrid('restoreRow', lastSel);
            lastSel = rowid;
        }
        return true;
    },
    ondblClickRow: function (rowid, ri, ci) {
    var $this = $(this), p = this.p;
    if (p.selrow !== rowid) {
        // prevent the row from be unselected on double-click
        // the implementation is for "multiselect:false" which we use,
        // but one can easy modify the code for "multiselect:true"
        $this.jqGrid('setSelection', rowid);
    }
    $this.jqGrid('editGridRow', rowid, editSettings);
},
onSelectRow: function (id) {
    if (id && id !== lastSel) {
        // cancel editing of the previous selected row if it was in editing state.
        // jqGrid hold intern savedRow array inside of jqGrid object,
        // so it is safe to call restoreRow method with any id parameter
        // if jqGrid not in editing state
        if (typeof lastSel !== "undefined") {
            $(this).jqGrid('restoreRow', lastSel);
        }
        lastSel = id;
    }
},
    loadComplete: function () {
        var sum = grid.jqGrid('getCol', 'expAmt', false, 'sum');
        grid.jqGrid('footerData','set', {ID: 'Total:', expAmt: sum});
        jsonData1 = grid.jqGrid('getGridParam', 'data');
        document.forms[0].gridData.value = JSON.stringify(jsonData1);
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
        'textStatus: ' + textStatus + '\n' +
        'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    }
});

grid.jqGrid('navGrid', '#pView1', {}, editSettings, addSettings, delSettings, {reloadAfterSubmit:true, beforeSubmit:validate_edit}, {reloadAfterSubmit:true, beforeSubmit:validate_add}, {}, {});
}

I am not providing any data but the same will come after it has been saved in the field and will be reloaded. But when I click on Add the form opens up and when I click on Submit after entering data it just stops. So can you tell me what must be wrong with my code!

Thanks for your help you are such a savior!!!

Siddhartha

Answer 1

inlineNav don't support Delete button, but you can use the corresponding button from navGrid. The problem is only that navGrid add button which implemented by form editing and form editing don't support editing local grid (editurl: 'clientArray') out-of-the-box.

In the old answer I suggested one way how one can do implement delete operation in form editing. In the answer I posted even the way how form editing can be used with local data. Another answer contains updated code which work with the current version (4.4.1 and 4.4.4) of jqGrid. I recommend you to use delSettings from the answer.