jqGrid's column/row data got offset by 1 column when 1st colModel has (formatoptions: { delOptions: ... })

Question

I noticed when I added a 1st column in colModel as "action" (delete action) along w/ delOptions, all rows in the jqGrid grid (spreadsheet) got moved to the left by 1 column and not matching the column headers. When I took the 1st column in colModel out, all rows in the grid is back to normal. scratching my head

See the before and after effect when you do the following...

1) In colNames array - Remove "Actions" value. 2) In colModel array - Remove the 1st array {} section that contains "actDelete"

Basically, make it a 13 columns grid instead of 14 columns.

Thanks...

<html>
<head>
<title>Testcase</title>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" />  <!-- JQuery UI Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.multiselect.css" />  <!-- Column Chooser for jqGrid Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.jqgrid.css" />  <!-- jqGrid Plugin -->
<style type="text/css">
    /* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
    th.ui-th-column div {white-space:normal !important; height:auto !important; padding:2px;}
    .ui-jqgrid .ui-jqgrid-resize {height: 100% !important;}
    /* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
    .ui-jqgrid tr.jqgrow td {white-space:normal;}
</style>
<script type="text/javascript" src="../scripts/jquery-v2.0.0.min.js"></script>
<script src="../scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var jsonData = {"page":"1","total":"4","records":"35","rows":[{"id":1,"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge","Grand Caravan Passenger","Minivan 4D","110544","5040.00","2010-10-21","2178.60","7218.60","945"]}]};            var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
        var jqgridPagerId = 'MyInventoryJqgrid_Pager';

        $('#' + jqgridSpreadsheetId).jqGrid({
            datatype: 'jsonstring', 
            datastr: jsonData,
            colNames: ['Actions', 'Id', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory'],
            colModel: [
                       //http://stackoverflow.com/questions/14732234/how-to-delete-row-in-jqgrid...
                       { name: 'actDelete', index: 'actDelete', width: 50, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: false, editbutton: false, delOptions: { url: '' } } },
                       { name: 'Id', index: 'Id', sorttype: 'int', width: 0, align: 'left', hidden: true, },
                       { name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
                       { name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 90, align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
                       { name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } }
            ],
            localReader: { page: function (object) { return object.page !== undefined ? obj.page : "0"; } },
            pager: '#' + jqgridPagerId,
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'StockDate', sortorder: 'desc',
            viewrecords: true,
            //gridview: true,
            caption: 'Inventory',
            width: 1022,
            shrinkToFit: false,
            height: 400,
            sortable: true,
            grouping: true,
            loadonce: true,
            loadError: function (xhr, st, err) { alert("An error had occurred, please try again or notify webmaster of this error"); },
        });
    });
</script>  
</head>
<body>
<div id="divWebLayout1">
    <table id="MyInventoryJqgrid_Spreadsheet"></table>
    <div id="MyInventoryJqgrid_Pager" style="text-align:center;"></div>
</div>
</body>
</html>

Sorry, but which "spreadsheet" you mean? What "offset" you mean? Sorry, I see that you changed the text of your question many times, but I don't understand the problem which you have from no revision of the text. You defined 14 columns in the grid, but write about 12 or 13 columns. Sorry, bur I can't follow you and can't understand the problem which you have. — Oleg, May 24 '13 at 17:10
@ Oleg: Sorry... "spreadsheet" --> grid. "offset" --> data in grid's rows are in the wrong column, a cell showed it moved to the left by 1 cell. I was trying my best to update the title and text to make it clearer and simple. After a day of playing around w/ the source code I learned that column headers on the jqGrid grid, is not mapped to the cell array in the JSON data. So, I'm not sure how to work around it right now. — fletchsod, May 24 '13 at 18:05
jqGrid is treating actions as real column and it expects data for it. — fletchsod, May 24 '13 at 18:37
now I understand what is your problem and will write later the answer where I'll explain all and will suggest some ways how you can solve it. Small question before: why you use relatively exotic `datatype: 'jsonstring'`? Do you get the data from separate Ajax request to the server? Do you implemented server side sorting and paging? Why you don't use `datatype: "json"` with `url` parameter. In the case you would have some advantages. — Oleg, May 24 '13 at 19:25
Actually, I use datatype:'json' and url:'../websrvc/jqGrid.ashx' on my development machine. But when posting to this stackoverflow forum, I figured having this datatype:'jsonstring' and datastr:'blah' comes in handy for anyone wanting to test out the demo testcase. — fletchsod, May 24 '13 at 19:56

score 1 · Accepted Answer · edited May 23 '17 at 12:18

All column of jqGrid are just columns. It is not important whether the column in hidden or be used for formatter: 'actions'. In case of usage standard JSON format (with repeatitems: true in jsonReader) you the items from "cell":[...] array will be just mapped to the columns in colModel during reading.

There are some ways to fix the problem. You can modify your server part so that item

"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]

will be changed to

"cell":["","58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]

It's clear that such changes are mot nice because formatter: 'actions' have absolutely another meaning as other columns.

If you load the data from the server using datatype:'json' and url:'../websrvc/jqGrid.ashx' then you can use beforeProcessing to make the same modification without any changes of the server code. You can use unshift method for example. The code will be like

beforeProcessing: function (data) {
    var rows = data.rows,
        l = rows ? rows.length : 0,
        i;

    for (i = 0; i < l; i++) {
        rows[i].cell.unshift(""); // insert empty string as the first element
    }
}

Another way to read original JSON data from the server is usage of jsonReader: {repeatitems: true} and jsonmap property inside of colModel. You need add jsonmap: "cells.0" to the column "Id", add jsonmap: "cells.1" to the column "StockNumber" and so on. In the same way you can use jsonmap defined as functions. See the answer for code examples.

I recommend you include additionally key: true property to 'Id' column and add id: "Id" property to jsonReader. I hope the value is unique for all rows of the grid. In the case the value from the column will be used as rowid. The value "id":1 will be ignored in the case. You should uncomment gridview: true too.

Looks good. I will do this. Thank you very much for your time and help. I have one more question. Where can I find jgGrid wiki or demo example of using delOptions in colModel's "formatoptions: { delOptions: {} }"? I'm having trouble finding it. I only found the jqGrid wiki predefined-formatter page. Thanks.. — fletchsod, May 24 '13 at 21:05
@fletchsod: You are welcome! `delOptions` of `formatter: "actions"` allows you specify options or callbacks of [delGridRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#delgridrow). — Oleg, May 25 '13 at 08:37

jqGrid's column/row data got offset by 1 column when 1st colModel has (formatoptions: { delOptions: ... })

1 Answers1