We Keep Coding

free-jqGrid (4.15.4), server filter, client sorting and paging?

Attempting to load data from server based off of multisearch/filters, but do sorting and paging on client. i have found a few posts that say to simply set the datatype back to the original value in the beforeSearch method.
i have attempted this and it does execute against the server and return the correct data. However, the second time i filter it seems to get the data from the server but then it gets wiped out on line 4429 in the jqgrid code shown below. Any idea on how to achieve this goal?
Ln 4429 : p.lastSelectedData = query.select();
grid definition:
$element
.jqGrid({
cmTemplate: { search: true, searchoptions: { attr: { placeholder: "filter..." }, clearSearch: true }, sortable: true, align: "center" },
colModel: [
{ name: "Id", key: true, hidden: true, searchoptions: { searchhidden: true, sopt: ["eq"] } },
{ name: "TransmissionId", label: "Transmission Id", searchoptions: { sopt: ["eq"] } },
{ name: "Name", label: "Name", searchoptions: { sopt: ["cn"] } }
],
datatype: "json",
loadonce: true,
height: "auto",
ignoreCase: true,
pager: $("#" + pagerId),
pgbuttons: true,
pginput: false,
rowList: [10, 25, 50],
rowNum: 10,
toppager: true,
url: "url here",
loadComplete: function (data) {
if (this.p.datatype === "json") {
setTimeout(function () {
$element.trigger("reloadGrid", [{ page: 1 }]);
}, 50);
}
return data;
},
viewrecords: true
})
.jqGrid("filterToolbar", {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
$element.setGridParam({ datatype: "json", page: 1 });
}
})
.jqGrid("navGrid", "#" + pagerId, {
edit: false,
add: false,
del: false,
refresh: false,
view: false,
cloneToTop: true
});
I have trimmed down the grid to try to verify it is not custom logic that is causing this issue. the grid does have multipleSearch on. but is not defined above.

If I understand correctly your question then you should use forceClientSorting: true in combination with loadonce: true. It force that the data loaded from the server will be sorted, filtered and paged locally directly after loading from the server. Thus you can remove loadComplete, which you use currently. See the answer for a demo.
Additionally, you can add searching property, where you include all options of filterToolbar and searchGrid:
searching: {
autosearch: true,
defaultSearch: "cn",
beforeSearch: function () {
var p = $(this).jqGrid("getGridParam"), // get reference to all parameters
filters = JSON.parse(p.postData.filters);
p.datatype = "json";
// one can here analyse filters, modify it or clear it as
p.postData.filters = "";
// one can set any other parameters, which will be sent to the server
// by using p.postData.param1 = "value1";
// which will sent param1=value1 to the server.
}
}
In general you can do the same inside your current beforeSearch too.
UPDATED: Probably you should use beforeProcessing callback additionally. beforeProcessing will be called directly after receiving the data from the server. Inside of the callback you can clean-up all p.postData.filters (to "") and p.search (change it from true to false). As the result jqGrid will not try to filter locally by postData.filters the data returned from the server.

Free jqGrid, don't send new index on addrow with inlineNav

Just putting in a new grid, and everything seems to be working well, except for one thing. Using basic inline, it is sending a new incorrect key value for the column I have set with key: true. This is an auto-increment column in the database, so I just don't want to send any data for this column when ADDING, only for edit or delete is that required.
It is posting a parameter: row_id => jqg3 for the new key column and messing up my server script. So because adding the new row will auto-increment the row_id col, I don't need to send this.
How do I stop the jqGrid from sending this (row_id) index column value when saving a new added row?
free-jqgrid version is 4.14.0
$('#accts').jqGrid({
url:'/phpAJAX/Master/master_grid_v1.php',
editurl:'/phpAJAX/Master/master_grid_v1.php',
height: 'auto',
shrinkToFit: false,
width: 'auto',
datatype: 'xml',
mtype: 'POST',
postData:{
'arg1':'bol_acct'
},
colNames:[
'row_id',
'Customer',
'Trucker',
'Acct Num'
],
colModel:[
{name: 'row_id', hidden: true, key: true},
{name:'Customer', align: "center", editable: true},
{name: 'Trucker', align: "center"},
{name: 'Acct_Num', align: "center"}
],
sortname: 'Customer',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Bill of Lading Accounts',
rowNum: 10000,
pager:true
}).jqGrid('inlineNav', {
addParams: {
addRowParams: { extraparam: {'arg1':'bol_acct', 'oper':'add'} }
},
editParams: {
extraparam: {
'arg1':'bol_acct', 'oper':'edit'
}
}
})

One can use serializeSaveData callback of inline editing to modify the data, which will be send during inline editing. You can add serializeSaveData callback via
inlineEditing: {
keys: true,
extraparam: { arg1: "bol_acct" },
serializeSaveData: function (postData) {
var newPostData = $.extend(true, {}, postData);
if (newPostData.oper === "add") {
delete newPostData.id; // delete id parameter
}
return newPostData;
}
}

Enabling Save button on JQ Grid with InlineEditing and CellEdit

Hi I have a Grid that is using cell edit and Inline editing. It saves to the ClientArray
$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],
pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});
$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});
When I edit a Cell the save button remains disabled. If I manually Enable the button in beforeCellEdit, the editable cell hasn't got focus until you select another cell. This behavior is only happening in IE.
I have tried to fix both these issues individually in my commented out code, and I have found that the loss of focus is caused by the line
$("#list_ilsave").removeClass('ui-state-disabled');
I tried placing this line in beforeEditCell and in afterEditCell and it causes the input field to loose focus.
I was using JQ Grid 4.4.4 and I have tried updating to 4.6.0 after I read there were updates to Inline Editing after 4.4.4
UPDATE
I have changed my grid to use onSelectRow
onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;
$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");
if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}
markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"
But I can't get any of the editRow events to fire other than oneditfunc. I also have an issue with getting the changed cells.
This method marks the cells as dirty / edited
function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}
I try to get the edited cells as follows
var editedRows = $grid.getChangedCells('dirty');
Before posting editedRows in an AJAX method to my server.

I'm not sure what you want to implement exactly, but I modified your demo to the following https://jsfiddle.net/OlegKi/byygepy3/11/. I include the full JavaScript code of the demo below
$(function () {
var myData = [
{ id: 10, ParameterName: "Test", ParameterValue: "" },
{ id: 20, ParameterName: "Test 1", ParameterValue: "" },
{ id: 30, ParameterName: "Test 2", ParameterValue: "" }
],
$grid = $("#list");
// change the text displayed on editrules: {required: true }
$.extend(true, $.jgrid.locales["en-US"].edit.msg, {
required: "No value was entered for this parameter!!!"
});
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["", "Parameter Name", "Parameter Value"],
colModel: [
{ name: "act", template: "actions" }, // optional feature
{ name: "ParameterName" },
{ name: "ParameterValue", editable: true,
editoptions: { maxlength: 100 }, editrules: {required: true } }
],
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
pager: true,
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
sortname: "Name",
iconSet: "fontAwesome",
caption: 'Parameters',
autowidth: true,
hidegrid: false,
inlineEditing: {
keys: true
},
singleSelectClickMode: "selectonly", // prevent unselect once selected rows
beforeSelectRow: 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) {
// save currently editing row
// one can replace saveRow to restoreRow in the next line
$self.jqGrid("saveRow", savedRows[i].id);
}
}
return savedRows.length === 0; // allow selection if saving successful
},
onSelectRow: function (rowid) {
$(this).jqGrid("editRow", rowid);
},
afterSetRow: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
if (item != null) {
item.dirty = true;
}
},
navOptions: {
edit: false,
add: false,
search: false,
deltext: "Delete",
refreshtext: "Refresh"
},
inlineNavOptions: {
save: true,
savetext: "Save",
cancel: false,
restoreAfterSelect: false
},
formDeleting: {
// delete options
url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?',
beforeSubmit: function () {
// get value
var selRowId = $(this).jqGrid('getGridParam', 'selrow');
var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue');
// check if empty
if (parametricValue === "") {
return [false, "Cannot delete: No value exists for this parameter"];
}
return [true, "Successfully deleted"];
},
delData: {
batchId: function () {
return $("#BatchId").val();
}
},
closeOnEscape: true,
closeAfterDelete: true,
width: 400,
msg: "Are you sure you want to delete the Parameter?",
afterComplete: function (response) {
if (response.responseText) {
alert("response.responseText");
}
//loadBatchListIntoGrid();
}
}
}).jqGrid('navGrid')
.jqGrid('inlineNav')
.jqGrid('navButtonAdd', {
caption: "Save Changed",
buttonicon: "fa-floppy-o",
onClickButton: function () {
var localData = $(this).jqGrid("getGridParam", "data"),
dirtyData = $.grep(localData, function (item) {
return item.dirty;
});
alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
}
});
// make more place for navigator buttons be rwducing the width of the right part
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
$(pagerIdSelector + "_right").width(100);
// make the grid responsive
$(window).bind("resize", function () {
$grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
}).triggerHandler("resize");
});
where HTML code is
<div class="container-fluid">
<div class="row">
<div id="gridarea" class="col-md-6 col-md-offset-3">
<table id="list"></table>
</div>
</div>
</div>
and CSS code
.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
vertical-align: middle;
}
It demonstrate how one can implement starting inline editing on select row. Additionally I added optional column with template: "actions" which can be alternative implementation. I set property dirty in every item of data inside of afterSetRow callback and I added "Save Changed" button, which uses localData = $(this).jqGrid("getGridParam", "data") and dirtyData = $.grep(localData, function (item) { return item.dirty; }); to get the dirty (modified) data.

jqgrid autocomplete visible behind edit form

Hello ,
I am trying to implement jqgrid with autocomplete in one of its column. But I have very strange problem, auto-complete list is shown below the jqgird edit form.
I have included following jquery js file.
1. jquery-ui-1.10.4.custom.min.js
2. jquery.ui.core.js
3. jquery.ui.widget.js
4. jquery.ui.position.js
5. jquery.ui.menu.js
6. jquery.ui.autocomplete.js
following jqgrid js file.
1. grid.locale-en.js
2. jquery.jqGrid.min.js
3. grid.common.js
4. jqModal.js
5. jqDnR.js
6. grid.formedit.js
Following jqgrid css file.
ui.jqgrid.css
Following jquery css file.
1. jquery-ui-1.10.4.custom.css
2. demos.css
3. jquery.ui.all.css
Following code to implement jqgrid colModel.
colNames:['Id', 'First Name', 'Last Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:readonly:true,size:10},hidden:true},
{name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
editoptions: {
dataInit: function (elem) {
myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
}
}},
{name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
Below is my entire jqgrid code.
var jq = jQuery.noConflict();
jq(function() {
jq("#grid").jqGrid({
url:'${pageContext.servletContext.contextPath}/grid/load.action',
datatype: 'json',
mtype: 'GET',
colNames:['Id', 'First Name', 'Last Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
{name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
editoptions: {
dataInit: function (elem) {
myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
}
}},
{name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
],
postData: {
},
rowNum:20,
rowList:[20,40,60],
height: 200,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Users",
emptyrecords: "Empty records",
loadonce: false,
editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
loadError : function(xhr,st,err) {
console.log('display error : '+err);
jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
loadComplete: function() {
},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
}
});
jq("#grid").jqGrid('navGrid','#pager',
{edit:true,add:true,del:true,search:true},
{ },
{ },
{ },
{
sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true }
);
});
Here autocomplete works fine, it lists all the username but it shows behind the editForm on jqgrid. Please suggest a solution.
Thanks & Regards,
Kartik Jajal

I have solved the problem by setting the z-index property of .ui-front like below .ui-front { z-index: 1000; } in jquery ui css

JQGrid refresh data with updated data from server ater edit

I have a Jqgrid which requires editing. I have successfully managed to configure the grid to save the data after editing, however the issue is that when the data is saved the grid is not refreshed with the data present in the database. For example the version field is automatically updated by the application backend however after a edit is done it is not refreshed and the old value is shown. I have tried
afterSubmit
afterComplete
which did not work. I also placed an alert in it to verify that the function was called however the alert was not shown either. Additionally I set loadonce to false and reloadaftersubmit to true but this did not work either. I think the issue could be that I either havent configured the edit correctly or placed the above mention parameters in the incorrect location.
After a save is done (edit) the updated data (which is the WHOLE page) is returned to the Jqgrid (as json). The issue here is that the old data is shown and how do I display this updated data after the edit.
UPDATE : I found out that when I edit via the popup box the afterSubmit is executed. HOWEVER the editing takes place via the formatoptions which allows to edit the data in the table itself. Now when the data is edited and saved from the grid itself without the use of the popup I want an afterSubmit to fire to refresh the table. Where do I place my afterSubmit / How do I achieve this.
/**
* Initialize and Draw JQGrid
* #return
*/
function drawFOMJQGrid(){
var lastsel2;
jQuery("#tblGrid").jqGrid({
height: 180,
width:990,
datatype: "json",
colNames:['','Hotel','Outlet','Major Group','Item Group','Version'],
jsonReader : {
root: "regDetails",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colModel:[
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
{name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false},
{name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false},
{name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
{name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}
],
onSelectRow: function(id){
},
/*afterSubmit : function(response, postdata){
alert("AAAA");
},
afterComplete : function(response, postdata){
alert("AAAA2");
}, */
//rowList:[10,20,30],
rowNum:5,
pager: '#divGridPg',
sortname: 'hotelName',
viewrecords: true,
sortorder: "outletName",
gridview: true,
bgiframe: true,
autoOpen: false,
caption: 'POS Item Pricing',
forceFit: false,
loadtext: 'Loading ...',
sortable: true,
loadonce: false,
editurl: "itemPricingSave.action", //"/js/itemPricing/server.js",
datatype: "json"
});
$("#tblGrid")[0].addJSONData(regGridJSONData);
$("#tblGrid").setGridParam({datatype: 'json'});
jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});
}
/**
* Initialize and Draw JQGrid
* #return
*/
function drawFOMJQGrid(){
var lastsel2;
jQuery("#tblGrid").jqGrid({
height: 180,
width:990,
datatype: "json",
colNames:['','Hotel','Outlet','Major Group','Item Group','Version'],
jsonReader : {
root: "regDetails",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colModel:[
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
{name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false},
{name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false},
{name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
{name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}
],
onSelectRow: function(id){
},
/*afterSubmit : function(response, postdata){
alert("AAAA");
},
afterComplete : function(response, postdata){
alert("AAAA2");
}, */
//rowList:[10,20,30],
rowNum:5,
pager: '#divGridPg',
sortname: 'hotelName',
viewrecords: true,
sortorder: "outletName",
gridview: true,
bgiframe: true,
autoOpen: false,
caption: 'POS Item Pricing',
forceFit: false,
loadtext: 'Loading ...',
sortable: true,
loadonce: false,
editurl: "itemPricingSave.action", //"/js/itemPricing/server.js",
datatype: "json"
});
$("#tblGrid")[0].addJSONData(regGridJSONData);
$("#tblGrid").setGridParam({datatype: 'json'});
jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});
}

I did the following to force the grid reload:
.navGrid('#pager',
{edit:true,
add: true,
del:true,refresh:false},
{ // edit options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'',false]; // no error and no new rowid
}
},
{ // add options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'']; // no error
}
} ,
{ // delete options
afterSubmit: function() {
comptes[0].clearToolbar();
comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
return [true,'']; // no error
}
}
);

Try to reload jqGrid with new data after all your editing process as following:
jQuery("#grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');