jqGrid with localArray - Inline Navigation : get delete row button and call custom function

Question

I am using jqGrid with localArray data. I am fetching this array from azure db and binging to grid. After this on manipulation of every single row, I am planning to update it in DB.

I am using inline navigation bar. On clicking of "add row", "save row" & "delete row" button I want to call my custom function and then would like to save/delete data in DB from that function.

First I would like to know whether my design is correct and scalable or not.

At present, I am able to call custom function on click of save button using "aftersavefunc" parameter.

Second, please let me know which parameter I have to set for "delete row" button. I think for "add row", same parameter can work as we have to click "save row" button to save row.

My code is as below for reference :

jQuery("#list4").jqGrid({
    datatype: "local",
    data: myData,
    height: "auto",
    colNames: ['RowNo', 'RouteId', 'Area'],
    colModel: [
        { name: 'id', index: 'id', width: 50, sortable: false },
        { name: 'RouteId', index: 'RouteId', width: 50, sortable: false },
        { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
    ],
    multiselect: false,
    rownumbers: false,
    rowList: [10, 20, 30],
    pager: jQuery('#pager1'),
    viewrecords: true,
    caption: "Bus Schedule Data",
    editurl: "clientArray",
    restoreAfterSelect: false,
    loadonce: true
});
var rowid;
var inlineparams = {
    addParams: { useFormatter: false },
    editParams: {
        aftersavefunc: function (id) {
            var rowData = jQuery('#list4').jqGrid('getRowData', id);
            ScheduleTable.update({ id: 1, Area: rowData.Area.toString() });
        }
    },
    add: true,
    edit: true,
    save: true,
    cancel: true,
    del: true
};

jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);
jQuery("#list4").jqGrid("saveRow", id, {
    keys: false,
    url: "clientArray"
});

Answer 1

inlineNav method don't have option del which you use (see inlineparams). You have to use remove del: false option of navGrid to have Delete button implemented by form editing (see delGridRow method).

I personally find the usage of inline editing with saving the data in the database inside of aftersavefunc not the best way. You will have problems with implementing of error handling using such approach because the changes in the grid will be first saved locally and then you will try to update the data in the database. If you will have some kind of errors during saving (validation errors, concurrency errors and so on) you will have to restore the previous state of data in the grid. So you have to save the previous state (inside of oneditfunc callback for example) and then restore the old data if required.

So I recommend you from design point of view to change datatype: "local" and editurl: "clientArray" to original Ajax based versions.

If you would use standard way which suggest jqGrid you could communicate with the server per Ajax. In the case the backend could return error description and the user will be able to modify current editing data and try to save there again. What you need is just implementing some server component (ASP.NET Web API service, ASP.NET WCF service, ASP.NET MVC controller, ASMX WebService, ASHX handler etc). All the technologies (even the oldest one like ASMX WebService and ASHX handler) can be used with Windows Azure.

If you do decide to follow your original way you can implement Delete using form editing. I described here originally the way how to implement it in case of editurl: "clientArray". In the answer I posted the way how full set of form editing operations 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 last answer. The onclickSubmit callback of delSettings do all needed for local saving of data.

Small common remarks to your code:

• I find strange the usage of both id and RouteId in one grid. Probably id is not needed at all and you can add key: true as additional property to RouteId if it is real unique id from the database in your case
• You can remove index property from all columns becaus the values which you use are the same as the values of name property.
• You can remove sortable: false (or both width: 50 and sortable: false) from colModel and use instead of that cmTemplate: {sortable: false} (or cmTemplate: {width: 50, sortable: false}). See here for more information.
• You can remove multiselect: false, rownumbers: false and restoreAfterSelect: false options of jqGrid. The first two have default values (see "Default1" column in the table withe the list of options). The last option (restoreAfterSelect: false) is the option of inlineNav so it should be used, if it's needed, inside of inlineparams.
• You should replace pager: jQuery('#pager1') to pager: '#pager1'. jqGrid need to have pager as id selector. If you provide input parameter in another form jqGrid detect the error and replace to the #pager1
• I recommend you use gridview: true options in all your grids to improve performance without any other disadvantages (see the answer for details)