jqgrid delete a row of the table

Question

I have a problem with deleting rows of a table.

I have two tables.

First table contains data from my local DB.

If I choose checkbox and clicked approval, selected row would be copied to second table with type named approval (If I click settlement, its type would be settlement).

When I try to make delete function works, either it deletes wrong value, or does not delete any row.

Following is my code:

var common = {
        basUrl : function (){
            var l = window.location;
            var url =  "/" + l.pathname.split('/')[1] + "/";
            return url;
        },
        init : function(){
            common.validator();
            common.initDialog();
            common.extendJqgrid();
            common.bindEvent();
            common.datePicker();
            common.initButton();
            common.searchGrid();
            common.initGrid();
        },

        initGrid : function() {

            $("#employeeList").jqGrid(
                    {
                        url: "<c:url value='/app/getGrid'/>",
                        colNames : ['id', 'Department', 'Position', 'Employee'],
                        colModel : [
                                 {
                                    name : 'employeeId',
                                    index : 'employeeId',
                                    hidden : true,
                                    key : true
                                 },
                                 {
                                    name : 'department',
                                    index : 'department',
                                    width : 280,
                                    align : "center",
                                 },
                                 {
                                    name : 'position',
                                    index : 'position',
                                    width : 280,
                                    align : "center",
                                 },
                                 {
                                    name : 'employeeName',
                                    index : 'employeeName',
                                    width : 280,
                                    align : "center",
                                 }, 
                         ],
                         rowNum : 10,
                         multiselect : true,
                         multiboxonly: true,
                         pager : '#pager3',
                         viewrecords : true,
                         sortname : 'department',
                         sortorder : "asc",
                         search : false,
                         onSelectRow : function(id, status, e){
                             var selectRowId = $("#employeeList").jqGrid('getGridParam', 'selrow');
                             if (selectRowId != null) {
                                $("#btnApprovalCon, #btnSettlementCon, #btnEnforcementCon, #btnReferenceCon").button("option", "disabled", false);
                             } else {
                                $("#btnApprovalCon, #btnSettlementCon, #btnEnforcementCon, #btnReferenceCon").button("option", "disabled", true);
                                var rowData = null;
                             }
                         },
                         onSelectAll : function(rowId, status) {
                            if (status){
                                $("#btnApprovalCon, #btnSettlementCon, #btnEnforcementCon, #btnReferenceCon").button("option", "disabled", false);
                             } else {
                                $("#btnApprovalCon, #btnSettlementCon, #btnEnforcementCon, #btnReferenceCon").button("option", "disabled", true);
                             }
                         },
                         gridComplete : function(){
                             $("#btnApprovalCon").on('click', function(selrow) {

                                    var list = $("#employeeList").jqGrid ('getGridParam', 'selarrrow'); //arrayList
                                    if(list != null){
                                        $.each(list, function(i,v){
                                                var rowData = $("#employeeList").jqGrid('getRowData', v);
                                                console.log(rowData);
                                                var rowCount = $("#reportingList").jqGrid('getGridParam', 'records');
                                                var rowNum = rowCount + 1;
                                                var data = {appset_employeeId: rowData.employeeId, appset_department: rowData.department, appset_position:rowData.position, appset_employeeName:rowData.employeeName, type:'Approval'}
                                                $("#reportingList").jqGrid('addRowData', rowData.id, data);
                                        });
                                    }

                                });
                             $("#btnSettlementCon").on('click', function(selrow) {
                                    var list = $("#employeeList").jqGrid ('getGridParam', 'selarrrow'); //arrayList(object)
                                    if(list != null){
                                        $.each(list, function(i,v){
                                                var rowData = $("#employeeList").jqGrid('getRowData', v);
                                                console.log(rowData);
                                                var rowCount = $("#reportingList").jqGrid('getGridParam', 'records');
                                                var rowNum = rowCount + 1;
                                                var data = {appset_employeeId: rowData.employeeId, appset_orderNumber: rowNum,  appset_department: rowData.department, appset_position:rowData.position, appset_employeeName:rowData.employeeName, type:'Settlement'}
                                                $("#reportingList").jqGrid('addRowData', rowData.id, data);
                                        });
                                    }
                                });
                         }
                    }).navGrid("#pager3", { search:false, edit:false, add:false, del:false});   

            $("#reportingList").jqGrid(
                    {
                        colNames : ['id', 'Department', 'Position', 'Employee', 'Type'],
                        colModel : [
                         {
                            name : 'appset_employeeId',
                            index : 'appset_employeeId',
                            hidden : true,
                            key : true
                         },
                         {
                            name : 'appset_department',
                            index : 'appset_department',
                            width : 210,
                            align : "center",
                         },
                         {
                            name : 'appset_position',
                            index : 'appset_position',
                            width : 210,
                            align : "center",
                         },
                         {
                            name : 'appset_employeeName',
                            index : 'appset_employeeName',
                            width : 210,
                            align : "center",
                         },
                         {
                            name : 'type',
                            index : 'type',
                            width : 210,
                            align : "center",
                         }, ],
                         rowNum : 10,
                         multiselect : true,
                         multiboxonly: true,
                         pager : '#pager4',
                         viewrecords : true,
                         search : false,
                         viewrecords : true,
                         onSelectRow : function(id, status, e){
                             var selectRowId = $("#reportingList").jqGrid('getGridParam', 'selrow');
                             if (selectRowId != null) {
                                $("#btnAppSetDel").button("option", "disabled", false);
                             } else {
                                $("#btnAppSetDel").button("option", "disabled", true);
                                var rowData = null;
                             }
                         },
                         onSelectAll : function(rowId, status) {
                            if (status){
                                $("#btnAppSetDel").button("option", "disabled", false);
                             } else {
                                $("#btnAppSetDel").button("option", "disabled", true);
                             }
                         },
                         gridComplete : function(selrow){
                            $("#btnAppSetDel").on('click', function() {
                                var list = $("#employeeList").jqGrid ('getGridParam', 'selarrrow'); //arrayList(object)

                                $("#reportingList").jqGrid('delRowData', 'selarrow');
                                /*
                                if(list != null){
                                    $.each(list, function(i,v){
                                        $("#reportingList").jqGrid('delRowData', 'v');
                                    });
                                }
                                */
                            });
                         }
                    }).navGrid("#pager4", { search:false, edit:false, add:false, del:true});

            $("#reportingList").sortableRows();
            $("#reportingList").jqGrid('gridDnD');
        },

I tried to import delRowData, but I do not sure if I used it properly.

May I ask you what I suppose to do?

Thank you in advance.

Answer 1

I suppose that the origin of your problem is the id duplicates. You have two grids on the same page. Both the grids have the column with the key: true property (employeeId in the first grid and appset_employeeId in the second grid). I suppose that you can have the same id values for the rows of both grids.

To protect your project from such problem you should use idPrefix option in at least one grid. For example you can use idPrefix: "g1_" in the first grid and idPrefix: "g2_" in the second one. The idPrefix option will informs jqGrid to build rowid based on the key: true, but using the specified prefix. It will make the rowids different in both grids.