jqueryjqgridjqgrid-inlinenav

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

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"
});
Solution

  • 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: