0

I have two tables that one contains data from my local DB and when I select rows of the table and click either approval or settlement, its data get copied to my second empty table.

what I want to do is detect if selected rows already exist in my second table and if it existed, even if a user click either approval or settlement button, those rows do not get copied to second table.

I was looking for certain function for jqGrid but it looks like there is no such option.

enter image description here

Then I was trying to use getCol and compare employeeId of selected rows of first table and all employeeId of second table, but I get no value it when I tried

var rowDataTwo = $("#reportingList").jqGrid('getCol', columnName);
console.log(rowDataTwo);

May I ask you any good suggestion for this type of situation please?

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",
                                 }, 
                         ],
                         idPrefix : "g1_",
                         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(employeeId) {

                                    var rowDataTwo = $("#reportingList").jqGrid('getCol', employeeId);
                                    console.log(rowDataTwo);

                                    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 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",
                         }, ],
                         idPrefix : "g2_",
                         rowNum : 10,
                         multiselect : true,
                         multiboxonly: true,
                         pager : '#pager4',
                         viewrecords : true,
                         search : false,
                         viewrecords : true,
                         reloadAfterEdit : true,
                         reloadAfterSubmit : 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(){
                            $("#btnAppSetDel").on('click', function(columnName) {

                                var delList = $("#reportingList").jqGrid ('getGridParam', 'selarrrow'); //arrayList(object)
                                if (delList != null) {
                                    $("#reportingList").jqGrid('delRowData', delList);

                                    var rowDataTwo = $("#reportingList").jqGrid('getCol', columnName);
                                    console.log(rowDataTwo);
                                }
                            });
                         }
                    }).navGrid("#pager4", { search:false, edit:false, add:false, del:true});

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

I tried to put getCol of reportingList in #btnApprovalCon click function, but it did not work, and it is not important at the moment since I cannot even get value of employeeId in reportingList.

EDIT:

gridComplete : function(){
 $("#btnApprovalCon").on('click', function() {

    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 ids = $("#employeeList").jqGrid('getDataIDs');
            console.log(ids);
            var nthIds = ids[i];
            console.log(nthIds);

            var idsTwo = $("#reportingList").jqGrid('getDataIDs');
            console.log(idsTwo);

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

enter image description here

boomboomboom
  • 141
  • 1
  • 17
  • You should never make event binding inside of `gridComplete`. You will have multiple bindings instead of binding once. I personally never use `gridComplete` at all. – Oleg Dec 02 '15 at 06:42
  • Long time no see :). I used gridComplete because if I put event binding outside of it, it prints a selected row twice in bottom table when I clicked approval/settlement button, . – boomboomboom Dec 02 '15 at 07:05
  • Sir, I added like var ids = $("#employeeList").jqGrid('getDataIDs'); console.log(ids); var nthIds = ids[i]; console.log(nthIds); Then I get ["EMP002", "EMP004", "EMP001", "EMP003"] and EMP002 as ids and nthIds. Problem is no matter what I select, nthIds is always Id of the first item: EMP002. May I ask you why this happen? I thought i is the value of selected row. – boomboomboom Dec 02 '15 at 08:00
  • Sorry, but I'm not sure what you want to implement. Your code contains too many errors. For example you use `$("#btnApprovalCon").on('click', function(employeeId) {...}` or `$("#btnAppSetDel").on('click', function(columnName) {...}`. Why you expect that the parameter of event click will be id of some element or the column name. The event handler will be called by jQuery and it use always the [Event](https://api.jquery.com/category/events/event-object/) object as the parameter. More example: you use [getCol](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods) with wrong parameters. – Oleg Dec 02 '15 at 08:18
  • If would be better if you prepare the demo in JSFiddle which can be easier midified. – Oleg Dec 02 '15 at 08:19
  • Sorry, I was trying to figure out how to put this spring mvc project to JSFiddle, but I failed to run it... for btnApprovalCon click function, I had couple updates like what I posted as EDIT above. Is it still hard for you to figure out what I am doing? – boomboomboom Dec 02 '15 at 08:53
  • when I select item delivery 1(EMP004) and click approval for the first time, idsTwo has nothing so output is [], and I kept clicking button with different selections, I see idsTwo array is getting updated. so what I wonder now is how to get certain element from ids array and check if that ids[n] already exist in idsTwo array. If it exist, do not add it – boomboomboom Dec 02 '15 at 09:02
  • Sorry, but I really don't understand your code. The demo could clear many things. For example I don't know which version of jqGrid from which fork you use. Some old versions of jqGrid call `gridComplete` inside of `addRowData` (look in your code). The usage of `$("#btnApprovalCon").on('click', function() {...});` inside of `gridComplete` is **absolutely wrong** and the usage of `gridComplete` in general for most cases (see [the answer](http://stackoverflow.com/a/15439276/315935)). It can be called **multiple times**. The value of `selarrrow` is array and `list != null` is always true. – Oleg Dec 02 '15 at 09:10
  • According to my jquery.jqGrid.js, I am using Guriddo jqGrid ver 4.8.2. I have to check about this gridComplete issue, but when I cut my whole $("#btnApprovalCon") click function and put it in bindEvent function(), as I methioned earlier, it prints results twice. I will try to figure out how I can replace this. – boomboomboom Dec 02 '15 at 09:24
  • Actually, I realized that var list is the selected value of array that I was looking for. I am gonna focus how to check if var list is already in var idsTwo. I will comment here if I made any progress. – boomboomboom Dec 02 '15 at 09:50
  • I recommend you to create, first of all, small working code with base functionality and then extend it. There are two main forks of jqGrid after jqGrid 4.7: [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) and [free jqGrid](https://github.com/free-jqgrid/jqGrid). I develop free jqGrid and provide it on the old MIT/GPLv2 licence for free. See [here](http://stackoverflow.com/a/30438601/315935) and [the post](http://www.trirand.com/blog/?p=1438). – Oleg Dec 02 '15 at 09:59

0 Answers0