Free jqGrid - Row not entering edit

Question

I am using Free jqGrid 4.13.0 for a small project and i cant seem to make the rows to enter edit mode from both the action buttons and inlineNav edit button.

The rows get added by the "add" button but they dont enter editing mode. Trying to enter editing mode by using any of the buttons doesnt work either.

Could it be the order of the css/js files in witch they are entered in the html? Am i missing a js file?

I currently have 2 grids that are pretty much the same and neither of them works.

<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.css"></link>
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.theme.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="jqueryGrid/css/ui.jqgrid.css"></link>
<link rel='stylesheet' href='css/bootstrap.css'></link>
<link rel="stylesheet" type="text/css"  href="css/cascade.css" />

<script src="jquery/jquery-1.12.1.min.js" type="text/javascript"></script>
<script src="jqueryUI/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqueryGrid/js/i18n/grid.locale-en.js" type="text/javascript">  </script>
<script src="jqueryGrid/js/jquery.jqgrid.min.js" type="text/javascript">     </script>

<script src="customerGrid.js" type="text/javascript" ></script>
<script src="customerOrderGrid.js" type="text/javascript" ></script>

//// customerGrid.js file:

$(function() {
    var grid = $("#customersGrid");
    grid.jqGrid({
         url: "/LicentaREST/rest/customers/getCustomersGrid",
         mtype: "POST",
         datatype: "json",
        ajaxGridOptions: {contentType: 'application/json; charset=utf-8'},
        serializeGridData: function (postData) {
            if (postData.searchField === undefined) postData.searchField = null;
            if (postData.searchString === undefined) postData.searchString = null;
            if (postData.searchOper === undefined) postData.searchOper = null;
            return JSON.stringify(postData);
        }
        },
        colModel: [
            {name: 'ID', index: 'id', width: 55, hidden: true},
            {name: 'Name', index: 'name', width: 80, align: 'right', search: false},
            {name: 'Phone', index: 'phone', width: 90},
            {name: 'Address', index: 'address', width: 80, align: 'right', search: false},
            {name: 'Client Since', index: 'clientSince', width: 80, align: 'right', search: false},
            {name: 'Total Orders', index: 'totalOrders', width: 80, align: 'right', search: false},
            {name: 'Total Ammount Orders', index: 'totalAmmountOrders', width: 80, align: 'right', search: false},
            {name: 'Canceled Orders', index: 'canceledOrders', width: 80, align: 'right', search: false},
            {name: 'Black Listed Status', index: 'blackListed', width: 80, align: 'right', search: false},

        ],
        ondblClickRow: function (rowid) {
            $.ajax({
                type: "POST",
                url: "/LicentaREST/rest/getCustomerOrders",
                data: JSON.stringify(rowid),
                success: function (response) {
                    if (response.errorCode == 0) {
                        customersOrdersGrid.jqGrid('clearGridData').jqGrid('setGridParam', 'data', response.data);
                    }
                    else {
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        },
        pager: "#customersPager",
        rowNum: 15,
        rowList: [15,50, 100, 250,500],
        rownumbers: true,
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true,
        caption: 'Customers',
        height: "330",
        autowidth: true

    });
    grid.jqGrid('inlineNav', '#customersPager',
        {
            add: true,
            edit: false,
            save: false,
            cancel: false,
            addicon: 'ui-icon-plus',
            addtext: 'Add',
            addedrow: 'last'
    });
});

Answer 1

First of all I strictly recommend to use the latest free jqGrid version, which is published. It's currently 4.13.2. It contains some small bug fixes existing in version 4.13.0. All the fixes have no relation to your problem.

I see the following problems in your code:

• The main problem is missing editable: true property in the columns of the grid which should be editable by the user.
• I recommend you to remove unneeded hidden id column and to use cmTemplate: { editable: true } option of jqGrid to set editable: true property in all columns of the grid. If you use some other properties in te most columns of jqGrid, like width: 80, align: 'right', search: false then it would be better to move the values in cmTemplate : cmTemplate: { editable: true, autoResizable: true, width: 80, align: 'right', search: false} , which specifies default values of the properties of colModel . You should skip specifying of the properties in colModel and overwrite the properties in other columns. For example you should continue to specify width: 90 in phone column.
• The properties of colModel seems be wrong. You don't included any test data returned from the server (from url: "/LicentaREST/rest/customers/getCustomersGrid" ), but it seems that you mix the meaning of name , index and label properties of colModel . The name is like id of the column. It can't have spaces. The values like name: 'Black Listed Status' are definitively wrong. You mean probably label: 'Black Listed Status' . The values which you used for index property should be probably the values of name property. It's strictly recommended to avoid specifying any index property at all if it's really required. Thus name: 'Black Listed Status', index: 'blackListed' for example should probably be changed to label: 'Black Listed Status', name: 'blackListed' like all other columns of jqGrid.
• It's recommended to use pager: true instead of pager: "#customersPager" and to skip '#customersPager' parameter from inlineNav . You can remove unneeded <div id="customersPager"></div> from HTML markup of the page and simplify code a little.
• I recommend to consider to remove height: "330" (correct would be height: 330 ) to use default height: "auto" . The rowNum value will define the height of the grid in the case. The default setting height: "auto" is the best choice not in all scenarios, but in the most one.
• You should review the CSS and JS files which you includes on the page. Including of jquery-ui.css , jquery-ui.min.css and jquery-ui.theme.css is wrong. It's enough to include just jquery-ui.min.css . Instead of including ui.jqgrid.css you can include ui.jqgrid.min.css . You should remove grid.locale-en.js because the file jquery.jqgrid.min.js contains already all the settings for en-US from grid.locale-en.js .
• It's recommended to include Font Awesome 4.x CSS on the page and to add iconSet: "fontAwesome" option. It improves the look of icons displayed in the grid. You should remove addicon: 'ui-icon-plus' option from the call of inlineNav . It's default value in case of usage default jQuery UI icons and the value will be wrong if you would use Font Awesome icons. The call of inlineNav can be reduced to grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
• The variable customersOrdersGrid , which you use in ondblClickRow seems to be undefined. I'd recommend you to include "use strict"; as the first statement of $(function() {...}); function to find easier such kind of error.
• You don't posted any information about the total number of rows, which could be returned on the server. I recommend you to use loadonce: true option and return all data at once if the total number of rows is not large enough. For example less as 1000 or less as 10000. The demo can be used to test the performance of local paging, sorting and filtering of the grid with 4000 rows, 13 columns and 20 rows per page. Another demo uses even 40000 rows and it works very quickly too if you would use modern web browser like Chrome, Firefox or Edge. You should think about the time for sending the data to the server and all overhead of the operation. The usage of loadonce: true simplify both the server code and the client code and improves the responsibility of the grid in the most cases. The exact choice is still depend on the total number of rows in the grid. It will be not good for very large number of rows.