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

i using jqgrid localarray data. fetching array azure db , binging grid. after on manipulation of every single row, planning update in db.

i using inline navigation bar. on clicking of "add row", "save row" & "delete row" button want call custom function , save/delete data in db function.

first know whether design correct , scalable or not.

at present, able call custom function on click of save button using "aftersavefunc" parameter.

second, please let me know parameter have set "delete row" button. think "add row", same parameter can work have click "save row" button save row.

my code below 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" }); 

inlinenav method don't have option del use (see inlineparams). have use remove del: false option of navgrid have delete button implemented form editing (see delgridrow method).

i find usage of inline editing saving data in database inside of aftersavefunc not best way. have problems implementing of error handling using such approach because changes in grid first saved locally , try update data in database. if have kind of errors during saving (validation errors, concurrency errors , on) have restore previous state of data in grid. have save previous state (inside of oneditfunc callback example) , restore old data if required.

so recommend design point of view change datatype: "local" , editurl: "clientarray" original ajax based versions.

if use standard way suggest jqgrid communicate server per ajax. in case backend return error description , user able modify current editing data , try save there again. need implementing server component (asp.net web api service, asp.net wcf service, asp.net mvc controller, asmx webservice, ashx handler etc). technologies (even oldest 1 asmx webservice , ashx handler) can used windows azure.

if decide follow original way can implement delete using form editing. described here way how implement in case of editurl: "clientarray". in the answer posted way how full set of form editing operations can used local data. another answer contains updated code work current version (4.4.1 , 4.4.4) of jqgrid. recommend use delsettings the last answer. onclicksubmit callback of delsettings needed local saving of data.

small common remarks code:

• i find strange usage of both id , routeid in 1 grid. id not needed @ , can add key: true additional property routeid if real unique id database in case
• you can remove index property columns becaus values use same values of name property.
• you can remove sortable: false (or both width: 50 , sortable: false) colmodel , use instead of cmtemplate: {sortable: false} (or cmtemplate: {width: 50, sortable: false}). see here more information.
• you can remove multiselect: false, rownumbers: false , restoreafterselect: false options of jqgrid. first 2 have default values (see "default1" column in table withe list of options). last option (restoreafterselect: false) option of inlinenav should used, if it's needed, inside of inlineparams.
• you should replace pager: jquery('#pager1') pager: '#pager1'. jqgrid need have pager id selector. if provide input parameter in form jqgrid detect error , replace #pager1
• i recommend use gridview: true options in grids improve performance without other disadvantages (see the answer details)