I'm having problem reloading data after adding new row to a local set, the record added to local set uses a wrong ID so its not editable before reloading.

here is my code :

$(document).ready(function () {

  jQuery("#list2").jqGrid({
     url: 'http://localhost:2525/Admin/De.....t',
           datatype: "json",
                colNames: ['No', 'Name'],
                colModel: [
    { name: 'id', index: 'id', width: 45, resizable: true, editable: false },
  name: 'name', index: 'name', width: 500, resizable: true, editable: true },

    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                sortorder: "desc",
                height: 310,
                scrollOffset: 0,
                pager: '#pager2',
                viewrecords: true,
     editurl: "http://localhost:2525/Admin/Department/JqGridOperation",
                loadonce: true,
                caption: "Department",
         
            });
                    jQuery("#list2").jqGrid('navGrid', '#pager2', //options
                        {view:true},
                        { reloadAfterSubmit: true }, // edit options  
                        { reloadAfterSubmit: true }, // add options
                        { reloadAfterSubmit: true }, // del options  
                     {} // search options
                    );
       });

I tried adding event to 'add options'(onClose, onclickSubmit,afterSubmit) to trigger reloadGrid but it fires on page reload.

reloadAfterSubmit: true
seems to have no effect at all on local data. also closeAfterAdd doesn't work at all. what am i doing wrong?
how can i fix this?
Edit : getting e is undefined when using afterSubmit event aswell.