Jqgrid custom formatter and edit mode

Question

It appears that using a custom formatter makes the cell stuck in the edit mode and previously edited row never gets restored.

JS, grid defined here

 $(priceListGrid).jqGrid({
            datatype: 'local',          
            url: common.getServerPath() + 'controller/action',
            mtype: 'POST',
            jsonReader: common.jqgrid.jsonReader('Id'),
            colModel: [
            { name: 'MethodCode', label: 'MethodCode', index: 'MethodCode', hidden: true },
            { name: 'PriceCode', label: 'Price Code', index: 'PriceCode', width: '20px' },
            { name: 'Description', label: 'Description', index: 'Description', width: '34px' },
            { name: 'RoundTo', label: 'RoundTo', index: 'RoundTo', width: '10px' },
            {
                name: 'MinPrice',
                label: 'Min Pr',
                index: 'MinPrice',
                width: '15px',
                align: 'right',               
                formatter: customCurFormatter,
                editable: true,
                editrules: {
                    number: true,
                    minValue: 0,
                    custom: true,
                    custom_func: validateMinPrice
                }
            }
                ],
                caption: 'Price Entity List',
                hidegrid: false,
                ignoreCase: true,
                viewrecords: true,
                recordtext: '{2} Entity(ies).',
                autowidth: true,
                shrinkToFit: true,
                scroll: 1,
                sortname: 'PriceCode',
                sortorder: 'asc',
                rowNum: 500,
                altRows: true,
                altclass: 'gridAltRowClass',
                pager: '#pagerEntityPriceListDetails',
                onCellSelect: priceItemSelect,
                onSelectRow: onSelectPrice,
                afterSubmitCell: function (rowid) {
                    this.setRowData(rowid, info.Data, null);
                },
                loadComplete: priceListEntityLoadComplete,
                loadError: function (xhr, status, error) {
                    common.ajax.alsJsonError(xhr, status, error);
                    //stopDataLoading();
                }//,
                //loadBeforeSend: function () { isDataLoadingCount++; },
                //beforeSelectRow: function () { return !getIsDataLoading(); }
            })

this is the formatter

var customCurFormatter = function (cellvalue, options, rowObject) {       
    return cellvalue.toFixed(rowObject.RoundTo);
}

When it's used, as opposed to formatter:currency, the cell is stuck in edit mode when going over to the next line.

Any ideas would be appreciated.

Please include in *all questions* about jqGrid the information about the **version** of jqGrid you use (can use) and the **fork** of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). It's just if you ask to help to find the problem with the car. You car could have petrol, diesel or electric motor, but looks almost the same from outside. Moreover, it's important to know test data returned from the server (2-3 rows of test data) and to know `jsonReader`, wich you use. — Oleg, May 12 '17 at 18:39
One problem can be seen independent from the version of jqGrid. The code of the `customCurFormatter` supposes that `cellvalue` is `Number`, but it could be `String`. I don't recommend to use `scroll: 1`, which brings more problems. It's recommended to use `rowNum` with number of rows, which could be displayed on the screen (about 15-25). One more remark: `width` like `width: '15px'` is wrong. The value should be a number like `width: 15`. — Oleg, May 12 '17 at 18:40
It's strange that you use `url: common.getServerPath() + 'controller/action', mtype: 'POST'` together with `datatype: 'local'`. How you want to load the data? If you loaded the data before, then you should use `data` parameter to create the grid filled with data. — Oleg, May 12 '17 at 18:46
You need just open `jquery.jqgrid.min.js` to see the version of jqGrid, which you use currently. It's in the comment at the beginning the grid. If you define custom formatter and want to use editing then you *have to* define unformatter: `unformat` callback (see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter#unformatting)). Moreover, the current code of custom formatter is unclear. The goal of formatter to generate HTML fragment of the cell (``). The goal of unformatter: return the value from the cell (from ``). The `unformat` callback be used on editing. — Oleg, May 12 '17 at 18:59
jqGrid 4.4.4 is very old, dead version (more as 4 year old). It's deprecated since many years. If you use NuGet, then you should uninstall it and install [free-jqGrid](https://www.nuget.org/packages/free-jqGrid/4.14.0) 4.14.0 instead. — Oleg, May 12 '17 at 19:02
Sorry, but you don't understand how editing works and when the formatter and unformatter be used. You should create the demo, which can be used to reproduce the problem and post it. You can debug your code and you will see that your formatter throw exception because `cellvalue` isn't `Number` (see my second comment). You have to fix the code of the formatter by adding at least conversion of string to `number`: `return Number(cellvalue).toFixed(rowObject.RoundTo);`. A safe code should be longer of cause. — Oleg, May 12 '17 at 20:49

score 0 · Accepted Answer · answered May 12 '17 at 20:56

0

The current code of the custom formatter is wrong, because toFixed method could be applied to Number and not to string. The cellvalue has String type at least during editing. Minimal changes of the code of the formatter should be

var customCurFormatter = function (cellvalue, options, rowObject) {       
    return Number(cellvalue).toFixed(rowObject.RoundTo);
}

You code has many other problems. For example, it's strictly recommended to define always unformat callback together with formatter.

answered May 12 '17 at 20:56

Oleg

220,925
34
403
798

Thank you! so what would the unfromat be in this case? – sarsnake May 12 '17 at 21:07
@sarsnake: You should add simple `unformat` and to see that it will be called and to see when it will be called. It could be that in some cases the default unformatter is OK too, but I recommend to add your own custom unformatter always on adding custom formatter. – Oleg May 12 '17 at 21:13

Jqgrid custom formatter and edit mode

1 Answers1