How to get Data Row Selected in jqGrid

Question

i'm starter in jqGrid, i have 2 jqGrid in the page , in the Grid1 i have inCustom and OutCustom i want user click in Grid get Data inCustom and outCustom in write this code

var grid = $('#list');
grid.jqGrid({
    url: 'jQGridHandler.ashx',
    postData: { ActionPage: 'ClearanceRequest', Action: 'Fill' },
    ajaxGridOptions: { cache: false },
    loadonce: true,
    direction: "rtl",
    datatype: 'json',
    height: 600,
    width: 1000,
    colNames: ['', '', '', ' ', '', '', '', '', '',
               '', '', ' ', '', '', '', '', '', '',
               '', ' ', '', '', '', '',
               '', '', '', '', '', '', ' ',
               '', '', '', '', '', ''],
    colModel: [
        { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
        { name: 'REQUEST_DATE', width: 50, sortable: true },
        { name: 'REQUEST_NO', width: 60, sortable: true },
        { name: 'CUSTOMER_ID', width: 100, sortable: true },
        { name: 'TRANSPORT_TYPE', width: 40, sortable: true },
        { name: 'CLEARANCE_TYPE', width: 50, sortable: true },
        { name: 'IMPORT_EXPORT', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'WAYBILL_NO', width: 50, sortable: true },
        { name: 'WAYBILL_OFFICE', width: 100, sortable: true },
        { name: 'MANIFEST', width: 200, sortable: true, hidden: true },
        { name: 'STORE_BILL', width: 100, sortable: true, hidden: true },
        { name: 'DIRECT_NO', width: 100, sortable: true, hidden: true },
        { name: 'STORE_DATE', width: 100, sortable: true, hidden: true },
        { name: 'INOUT_DATE', width: 50, sortable: true, hidden: true },
        { name: 'SOURCE_COUNTRY', width: 30, sortable: true, hidden: true },
        { name: 'SOURCE_CITY', width: 80, sortable: true, hidden: true },
        { name: 'DESTINATION_COUNTRY', width: 100, sortable: true, hidden: true },
        { name: 'IN_CUSTOMS', width: 200, sortable: true, hidden: true },
        { name: 'OUT_CUSTOMS', width: 100, sortable: true, hidden: true },
        { name: 'INSURER_ID', width: 100, sortable: true, hidden: true },
        { name: 'INSURANCE_NO', width: 100, sortable: true, hidden: true },
        { name: 'CLEARANCE_PERSON', width: 50, sortable: true, hidden: true },
        { name: 'PROXY_NO', width: 30, sortable: true, hidden: true },
        { name: 'FACTOR_NO', width: 80, sortable: true, hidden: true },
        { name: 'SHIP_NAME', width: 100, sortable: true, hidden: true },
        { name: 'TRAVEL_NO', width: 200, sortable: true, hidden: true },
        { name: 'INDENT_NO', width: 100, sortable: true, hidden: true },
        { name: 'COOTAG_NO', width: 100, sortable: true, hidden: true },
        { name: 'PERMIT_NO', width: 100, sortable: true, hidden: true },
        { name: 'CLEARANCE_NO', width: 50, sortable: true, hidden: true },
        { name: 'CARNETIR_NO', width: 30, sortable: true, hidden: true },
        { name: 'PURCHASE_TYPE', width: 80, sortable: true, hidden: true },
        { name: 'ALL_VALUE', width: 100, sortable: true, hidden: true },
        { name: 'FREIGHT_STATUS', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'COPY_ORIGINAL', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'REMARK', width: 100, sortable: true, hidden: true },
        { name: 'details', width: 20, sortable: false, search: false,
            formatter: function () {
                return "<span class='ui-icon ui-icon-document'></span>";
            }
        }
    ],
    gridview: true,
    rowNum: 30,
    rowList: [30, 60, 90],
    pager: '#pager',
    sortname: 'WorkOrderNo',
    viewrecords: true,
    sortorder: 'ASC',
    rownumbers: true,
    beforeSelectRow: function (rowid, e) {
        var iCol = $.jgrid.getCellIndex(e.target);
        // alert(rowid);
        console.log(rowid);
        //listItem
        console.log($.jgrid.getCellIndex(e.target));
        if ($.jgrid.getCellIndex(e.target) == 37) {
            $("#listItem").jqGrid("GridUnload");
            var gridItem = $('#listItem');
            gridItem.jqGrid({
                url: 'jQGridHandler.ashx',
                postData: { ActionPage: 'ClearanceItems', Action: 'Fill', requestId: rowid },
                ajaxGridOptions: { cache: false },
                loadonce: true,
                direction: "rtl",
                datatype: 'json',
                height: 200,
                colNames: ['', '', '', '', ' ', ' ', '',
                           '', '', 'ا', ' ', '', ' ',
                           '', '', ' ', '  ',
                           '', '', '', ' ', '  ', ' ', ' ', ''],
                colModel: [
                    { name: 'REQUEST_ID', width: 100, sortable: true },
                    { name: 'ITEM_NO', width: 200, sortable: true },
                    { name: 'GOODS_DESCRIPTION', width: 100, sortable: true },
                    { name: 'QUANTITY', width: 100, sortable: true },
                    { name: 'PACKING_TYPE', width: 100, sortable: true },
                    { name: 'GROSS_WEIGHT', width: 50, sortable: true },
                    { name: 'TARE_WEIGHT', width: 30, sortable: true },
                    { name: 'MEASUREMENT_TYPE', width: 80, sortable: true, hidden: true },
                    { name: 'GOODS_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'GOODS_CURRENCY', width: 200, sortable: true, hidden: true },
                    { name: 'GOODS_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_CURRENCY', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_CURRENCY_RATE', width: 50, sortable: true, hidden: true },
                    { name: 'INSURANCE_PRICE', width: 30, sortable: true, hidden: true },
                    { name: 'INSURANCE_CURRENCY', width: 80, sortable: true, hidden: true },
                    { name: 'INSURANCE_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
                    { name: 'TARIFF_NO', width: 200, sortable: true, hidden: true },
                    { name: 'CUSTOM_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'WARRANTY_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'INOUT_DATE', width: 100, sortable: true, hidden: true },
                    { name: 'VEHICLE_TYPE', width: 50, sortable: true, hidden: true },
                    { name: 'VEHICLE_NO', width: 30, sortable: true, hidden: true },
                    { name: 'WAREHOUSE_ID', width: 80, sortable: true, hidden: true },
                    { name: 'REMARK', width: 80, sortable: true, hidden: true }
                ],
                gridview: true,
                rowNum: 20,
                rowList: [20, 40, 60],
                pager: '#pagerItem',
                viewrecords: true,
                sortorder: 'ASC',
                rownumbers: true
            });
            gridItem.jqGrid('navGrid', '#pagerItem', { add: true, edit: true, del: true },
                {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 });

            var myGrid = grid;
            var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
            celValue = myGrid.jqGrid('getCell', selRowId, 'IN_CUSTOMS');
            celValue2 = myGrid.jqGrid('getCell', selRowId, 'OUT_CUSTOMS');

            console.log(celValue);

            console.log(celValue2);

            alert(celValue);
            alert(celValue2);

            $("#POPUP2").dialog({ width: 780 });
        }

        return true;
    }
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true },
    {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 })
         .navButtonAdd("#pager", {
             caption: "",
             buttonicon: "ui-icon-plus",
             onClickButton: function () {
                 // alert("Adding Row");
                 $("#POPUP1").dialog({ width: 730 });
             },
             position: "first"

         })
         .navButtonAdd("#pager", {
             caption: "",
             buttonicon: "ui-icon ui-icon-pencil",
             onClickButton: function () {

             },
             position: "first"

         })
          .navButtonAdd("#pager", {
              caption: "",
              buttonicon: "ui-icon ui-icon-trash",
              onClickButton: function () {

              },
              position: "first"
          });

When first click in detils button get false value but after then return correct data

thanks all

Answer 1

First of all I answer on your main question. The problem is that you get selrow parameter (the id of selected row) inside of beforeSelectRow callback. At the first click on 'details' button no row is selected. So myGrid.jqGrid('getGridParam', 'selrow') will return null and you will be unable to use getCell to get values from 'IN_CUSTOMS' and 'OUT_CUSTOMS' column of the row with id=null.

You always return true from beforeSelectRow callback. So you don't want to prevent row selection if the user click on the 'details' button. In the case I would recommend you better to use onCellSelect callback. By the way the callback has iCol (the index of the cell which was clicked) as additional parameter. It will additional simplify your code.

Next remark. You use sortable: true in all column, but the default value of sortable property is already true (see the documentation). Additional I would recommend you to use column templates in the definition of jqGrid. For example in the definition of the first grid you use multiple times the same properties to define hidden column with the checkbox. Additionally there are many columns having width: 100 and all columns have empty column header ''. So you can define the first grid as

var grid = $('#list'),
    hiddenCheckboxTemplate = { width: 30, editable: false,
        edittype: 'checkbox', editoptions: { value: "True:False" },
        formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
    };
grid.jqGrid({
    colModel: [
        { name: 'REQUEST_ID', hidden: true },
        { name: 'REQUEST_DATE', width: 50 },
        { name: 'REQUEST_NO', width: 60 },
        { name: 'CUSTOMER_ID' },
        { name: 'TRANSPORT_TYPE', width: 40 },
        { name: 'CLEARANCE_TYPE', width: 50 },
        { name: 'IMPORT_EXPORT', template: hiddenCheckboxTemplate },
        { name: 'WAYBILL_NO', width: 50 },
        { name: 'WAYBILL_OFFICE' },
        { name: 'MANIFEST', width: 200, hidden: true },
        { name: 'STORE_BILL', hidden: true },
        { name: 'DIRECT_NO', hidden: true },
        { name: 'STORE_DATE', hidden: true },
        { name: 'INOUT_DATE', width: 50, hidden: true },
        { name: 'SOURCE_COUNTRY', width: 30, hidden: true },
        { name: 'SOURCE_CITY', width: 80, hidden: true },
        { name: 'DESTINATION_COUNTRY', hidden: true },
        { name: 'IN_CUSTOMS', width: 200, hidden: true },
        { name: 'OUT_CUSTOMS', hidden: true },
        { name: 'INSURER_ID', hidden: true },
        { name: 'INSURANCE_NO', hidden: true },
        { name: 'CLEARANCE_PERSON', width: 50, hidden: true },
        { name: 'PROXY_NO', width: 30, hidden: true },
        { name: 'FACTOR_NO', width: 80, hidden: true },
        { name: 'SHIP_NAME', hidden: true },
        { name: 'TRAVEL_NO', width: 200, hidden: true },
        { name: 'INDENT_NO', hidden: true },
        { name: 'COOTAG_NO', hidden: true },
        { name: 'PERMIT_NO', hidden: true },
        { name: 'CLEARANCE_NO', width: 50, hidden: true },
        { name: 'CARNETIR_NO', width: 30, hidden: true },
        { name: 'PURCHASE_TYPE', width: 80, hidden: true },
        { name: 'ALL_VALUE', hidden: true },
        { name: 'FREIGHT_STATUS', template: hiddenCheckboxTemplate },
        { name: 'COPY_ORIGINAL', template: hiddenCheckboxTemplate },
        { name: 'REMARK', hidden: true },
        { name: 'details', width: 20, sortable: false, search: false,
            formatter: function () {
                return "<span class='ui-icon ui-icon-document'></span>";
            }
        }
    ],
    cmTemplate: { width: 100, label: '' },
    ... other option. No colNames are needed because of usage label
});

In the way you reduce the code and make it more manageable (easy to maintain). Because of usage label property in colModel no colNames option should be included.

In the same way you can reduce the code which define the second grid too.

Another remark. the code if ($.jgrid.getCellIndex(e.target) == 37) { is difficult to understand and to maintain. If you would include additional column in the grid or if you even change the value of some option (like rownumbers) the constant 37 should be changed. What you want to do is just test whether the user clicked on the 'details' column. I would recommend you to use better the column names. For example

var colModel = $(this).jqGrid('getGridParam', 'colModel'),
    cm = colModel[iCol]; // iCol is defined before as $.jgrid.getCellIndex(e.target)
if (cm && cm.name === 'details') {
    ....
}

The last remark. You use GridUnload and then recreate the second grid with details. It would be more effective to use .trigger('reloadGrid', [{page: 1}]) instead (see here). At the beginning you can create the second grid with datatype: 'local'. It will prevent the loading of data from the server. You can place the second grid in div which you hide directly after the grid is created and show the div if needed. If the second grid need be filled with information you can use setGridParam to change datatype to 'json' (see the answer), set other parameters like requestId of postData and then call .trigger('reloadGrid', [{page: 1}]). The way will work more effectively.