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.
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.