JqGrid, how can I format error messages when using navGrid

Question

jqGrid 4.13.6-pre - free jqGrid

I am using navGrid and inline editing and am having trouble with formatting validation messages sent back from the server. The validation messages appear fine when they come back from an inline edit, but they do not look fine when on the Add/Edit form accessed from the grid navigation.

I read a lot about the errorTextFormat event and it seems to do exactly what I want, but I can't seem to figure out how to access it when the form is opened from the grid nav. I'm sure there's a simple way to configure it, but I have not been able to figure it out.

$(function() {
        var lastSel = 0;

        $("#Grid")
            .jqGrid({
                url: '/url/to/griddata',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['Id', 'Name'],
                colModel: [
                    { name: 'Id', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: false, formatter: null, edittype: 'text' }, 
                    { name: 'Name', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: true, formatter: null, edittype: 'text', editoptions: { maxlength: 256, value: null, required: true } }],
                pager: '#GridPager',
                prmNames: {
                    page: 'PageNumber',
                    rows: 'PageSize',
                    sort: 'SortColumn',
                    order: 'SortOrder',
                    search: 'Search',
                    nd: 'nd',
                    npage: 'null'
                },
                rowNum: 60,
                rowList: [
                    15,
                    30,
                    60,
                    120
                ],
                sortname: "Name",
                sortorder: "asc",
                viewrecords: true,
                hidegrid: false,
                gridview: true,
                caption: '',
                width: 980,
                height: 100,
                editurl: '/my/edit/url',
                edit: {
                    errorTextFormat: function (data) {
                        alert('fired');
                        console.log(data);
                        return "error here";
                    }
                },
                jsonReader: {
                    total: 'TotalPages',
                    page: 'CurrentPage',
                    records: 'TotalRecords',
                    root: 'Rows',
                    id: 'Id',
                    repeatitems: false
                },
                onSelectRow: function(id) {
                    if (id && id !== lastSel) {
                        jQuery('#Grid').restoreRow(lastSel);
                        lastSel = id;
                    }
                    $('#Grid').jqGrid('editRow', id,
                    {
                        keys: true
                    });
                }
            });

        $("#Grid").filterToolbar({ autosearch: true, searchOnEnter: false });
        $("#Grid").navGrid('#GridPager', {
            del: false, search: false, editerrorTextFormat: function (data) {
                alert('fired');
                console.log(data);
                return "error here";
            }
        });

Here is the markup.

Please, include code fragments, which shows how you tried to use form editing and the callback `errorTextFormat`. Typical error: the including the callback on the wrong place. You should additionally always include the information about the version and the fork of jqGrid which you use (or can use). There are two main forks: [free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) and an old jqGrid in a version <=4.7. There are *different* possibilities to specify `errorTextFormat` in jqGrid. — Oleg, Nov 24 '16 at 07:57
If you search for examples of usage `errorTextFormat` you can find more information [here](http://stackoverflow.com/a/6803206/315935) and [here](http://stackoverflow.com/a/14864422/315935) for example. If it not help, then you should append your question with JavaScript code and an example of the server response, inclusive the HTTP code, which you use for returning validation errors from the server. The response can be seen in Developer Tools of IE/Chrome/Firefox (Network tab) or in [Fiddler](http://www.telerik.com/fiddler). — Oleg, Nov 24 '16 at 08:01
I've seen both those answers pertaining to the errorTextFormat already. I couldn't find any examples of where to actually place it in the configuration code though when using the navGrid. — James, Nov 25 '16 at 21:06
I see now your error. See my answer, which describes how you can fix your code. — Oleg, Nov 25 '16 at 21:46

score 0 · Accepted Answer · answered Nov 25 '16 at 21:45

There are no edit option of jqGrid and no editerrorTextFormat property of navGrid. It's easy fix you code by usage formEditing options, which allows to specify default values of editGridRow method used directly or indirectly in the grid. You need just rename edit option to formEditing and your code should working. It's important only that the server should use some error HTTP status code in case of reporting the error (for example 400 or higher). The error code 500 or higher seems to me the best choice in your case.

In the same way you can specify the options of filterToolbar or Searching Dialog inside of searching option of free jqGrid. You can specify default options of navGrid inside of navOptions option of jqGrid.

I would recommend you additionally to use savedRow parameter of jqGrid instead of lastSel variable. The parameter will be filled by jqGrid on starting inline editing or cell editing. If contains the array of editable values before modifications and id property additionally. Because you cal

I recommend you additionally to use pager: true instead of pager: '#GridPager' and just skip '#GridPager' parameter of navGrid or inlineNav. Free jqGrid will generate the <div> for the pager automatically, it will assign the unique id to the div and it will modify pager: true parameter to '#generatesIdValueOfTheDiv'. You code will be a little more shorter and more easy to read and maintain.

The final code could look like the following

$(function() {
    $("#Grid")
        .jqGrid({
            url: '/url/to/griddata',
            datatype: 'json',
            mtype: 'POST',
            colModel: [
                { name: 'Id', align: 'center' }, 
                { name: 'Name', align: 'center', editable: true,
                    editoptions: { maxlength: 256, required: true } }
            ],
            pager: true,
            prmNames: {
                page: 'PageNumber',
                rows: 'PageSize',
                sort: 'SortColumn',
                order: 'SortOrder',
                search: 'Search'
            },
            rowNum: 60,
            rowList: [
                15,
                30,
                60,
                120
            ],
            sortname: "Name",
            viewrecords: true,
            hidegrid: false,
            width: 980,
            height: 100,
            editurl: '/my/edit/url',
            jsonReader: {
                total: 'TotalPages',
                page: 'CurrentPage',
                records: 'TotalRecords',
                root: 'Rows',
                id: 'Id',
                repeatitems: false
            },
            formEditing: {
                closeOnEscape: true,
                closeAfterEdit: true,
                savekey: [true, 13],
                errorTextFormat: function (data) {
                    alert('fired');
                    console.log(data);
                    return "error here";
                }
            },
            inlineEditing: {
                keys: true
            },
            searching: {
                searchOnEnter: false
            },
            navOptions: {
                del: false,
                search: false
            },
            onSelectRow: function (rowid) {
                var $self = $(this), i,
                    // savedRows array is not empty if some row is in inline editing mode
                    savedRows = $self.jqGrid("getGridParam", "savedRow");

                for (i = 0; i < savedRows.length; i++) {
                    if (savedRows[i].id !== rowid) {
                        // cancel editing of not saved rows
                        $self.jqGrid("restoreRow", savedRows[i].id);
                    }
                }

                $self.jqGrid("editRow", rowid);
            }
        })
        .jqGrid("filterToolbar");
        .jqGrid("navGrid");
});

(I added some more properties in formEditing, which one frequently uses. You can remove unneeded properties). I removed some unneeded options and some unneeded properties of colModel because you specified default values.

Thanks for the response, I'll look it all over and see if I can get it doing what I need it to. I am using 400 response, because they are actually server-side validation errors(Like an object with the name given already existing) that I'm wanting to display back to the user since it's not a successful save. My colmodel stuff are generated on the server side also based on some jqgrid models I created so that's why all the defaults were outputted cause I wasn't over-riding them for any reason. — James, Nov 26 '16 at 02:19
Thanks for the info, moving it to the formEditing parameter worked perfectly. The other information was nice to know as well. — James, Nov 26 '16 at 02:26

JqGrid, how can I format error messages when using navGrid

1 Answers1