How to set row id value after form editing in free jqgrid
Question
Table has primary key with 3 columns (Grupp,Kuu,Toode) and server returns Id created from those columns.
After primary key column is changed in form editing, server sends new row id back.
Free jqgrid does not set this row id as changed row id. Server returns new id.
I tried to change id in code below in editfor afterSubmit method by using
function EditAddForm_AfterSubmit(response, postdata) {
var json = $.parseJSON(response.responseText);
return [true, '', json.Id];
}
but old id is still passed to server if row is edited again.
Steps to reproduce:
- Open page below in Chrome
- Select row by clicking in it
- Use toolbar edit button to open form editor
- Change field Kuu value
- Press submit button. Changed value appers in Kuu column in jqgrid
- Double click in row to start row editing
- Press enter. Error message from server appers since wrong (old) primary key is passed to server.
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<base href="http://example.com/" />
<link rel="stylesheet" href="http://example.com/themes/redmond/jquery-ui.css" type="text/css" />
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://example.com/Content/Css/normalize.css" rel="stylesheet"/>
<link href="http://example.com/Scripts/jqgrid-4.8.0/css/ui.jqgrid.css" rel="stylesheet"/>
<title>
Old primary key value is passed if primary key is changed
</title>
<script type="text/javascript">
"use strict";
var BASE_URL = 'http://example.com/',
Message = {
selectRows: "Select",
sendingQuery: "Send"
};
</script>
<script src="http://example.com/Scripts/jquery-1.11.2.js"></script>
<script src="http://example.com/Scripts/jquery-ui-1.11.4.js"></script>
<script src="http://example.com/Scripts/jqgrid-4.8.0/js/jquery.jqgrid.src.js"></script>
<script src="http://example.com/Scripts/json2.js"></script>
<script src="http://example.com/Scripts/erp.js"></script>
<script src="http://example.com/Scripts/AfterGridInit.js"></script>
<script src="http://example.com/Scripts/TinyMCE/tiny_mce.js"></script>
<script src="http://example.com/Scripts/TinyMCE/jquery.tinymce.js"></script>
<script type="text/javascript">
var
$grid,
lastSelectedRow,
autoedit = false,
jqXHRFromOnSuccess,
idsOfSelectedRows,
myColumnsState,
isColState,
myColumnStateName;
$.extend(true, $.jgrid.defaults, {
mtype: 'POST',
iconSet: "fontAwesome" ,
navOptions: {
position: "center"},
autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
toppager: true,
viewrecords: false,
onSelectRow: grid_onSelectRow,
onSelectAll: grid_onSelectAll,
sortable: function (permutation) {
saveWindowState();
},
multiselect: true,
ajaxRowOptions: { async: true },
scrollrows: true,
prmNames: {
id: "_rowid", page: "_page", rows: "_rows", oper: "_oper", sort: "_sidx", order: "_sord",
nd: "_nd"
},
loadui: 'block',
cmTemplate: { fixed: true, autoResizable: true },
autoencode: true,
gridview: true,
serializeGridData: function (postData) {
var myPostData = $.extend({}, postData);
myPostData._filters = myPostData.filters;
delete myPostData._oper;
delete myPostData.filters;
delete myPostData.searchField;
delete myPostData.searchString;
delete myPostData.searchOper;
return myPostData;
},
shrinkToFit: false
});
$.extend(true,$.jgrid.edit, {
beforeSubmit: function (postdata, formid) {
showModeless('Saving');
return [true, ""];
},
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: false
});
</script>
</head>
<body>
<div id="container">
<script type="text/javascript">
var editParams = {
// code added according to proposed answer
afterComplete: function (jqXhr, postdata, $form, formOper) {
if (formOper !== "add") {
var json = $.parseJSON(jqXhr.responseText);
$("#" + $.jgrid.jqID(postdata._rowid)).attr(json.Id);
}
},
afterSubmit: function (response, postdata) {
return EditAddForm_AfterSubmit(response, postdata);
},
url: 'http://example.com/Grid/Edit?_entity=Grnait',
closeAfterEdit: true
};
function selectedRowsAction(action) {
}
$(function () {
'use strict';
$('body').css('overflow-y', 'hidden');
var urlFilters,
namedParameters = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'),
parameters = {},
nameAndValue,
i,
cm= [{"hidden":false,"label":"Tegevus","name":"_actions","search":false,"width":72
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=Grnait","afterComplete":function (response, postdata, formid) {
summarefresh($grid);
$grid[0].focus();
}
}}},{"label":"Objekt","name":"Grupp","index":"Grupp","edittype":"select","editoptions":{"formatter":"select","value":":;1:1;11:11;14:14;2:2;21:21;22:22;23:23;251:251;30:30;31:31;40:40;41:41","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:210px;height:130%","dataEvents":[{"type":"change","fn":function(e) {
updateSelectValue(this, 'Grupp');
dataChanged(this);
}
},{"type":"keydown","fn":function(e) {
if(!enter(e)) return;
updateSelectValue(this, 'Grupp');
dataChanged(this);
}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":70,"hidden":false},{"label":"Artikkel","name":"Toode","index":"Toode","edittype":"custom","editoptions":{"maxlength":20,"size":20,"lookup":"ToodeL","custom_element":function(value, options) {
return combobox_element(value, options,'38','Toode','Grnait','YToode')}
,"custom_value":combobox_value
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":60,"hidden":false},{"label":"Artikli nimi","name":"Toode0_nimetus","index":"Toode0_nimetus","edittype":"custom","editoptions":{"maxlength":0,"size":0,"lookup":"ToodeL","custom_element":function(value, options) {
return combobox_element(value, options,'78','Toode0_nimetus','Grnait','ArtikliNimi%c3%9c%c3%bcriarvestusel')}
,"custom_value":combobox_value
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":100,"hidden":false},{"label":"Algnäit","name":"Anait","index":"Anait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":63,"classes":null,"hidden":false},{"label":"Kuu","name":"Kuu","index":"Kuu","editoptions":{"maxlength":6,"size":6,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":43,"classes":null,"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"},{"label":"Lõppnäit","name":"Lnait","index":"Lnait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":74,"classes":null,"hidden":false},{"label":"Kogus","name":"Kogus","index":"Kogus","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":71,"classes":null,"hidden":false},{"label":"Koguse jagamine","name":"Klassif1_nimetus","index":"Klassif1_nimetus","edittype":"select","editoptions":{"formatter":"select","value":":;R:Arvestuslik pind ;E:Elanike arvu järgi ;K:Korterite järgi ;:Kõigile sama ;V:Köetav pind ;P:Pindala järgi ","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:327px;height:130%","dataEvents":[{"type":"change","fn":function(e) {
updateSelectValue(this, 'Kogusx');
dataChanged(this);
}
},{"type":"keydown","fn":function(e) {
if(!enter(e)) return;
updateSelectValue(this, 'Kogusx');
dataChanged(this);
}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":109,"hidden":false},{"label":null,"name":"Kogusx","index":"Kogusx","editoptions":{"maxlength":1,"size":1,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"}],
//colModel,
//sortName,
emptyMsgDiv = $('<div style="display:none"><br/> Ei leia</div>');
$grid = $("#grid");
myColumnStateName = "Grnait.0.colState"; // 'Grnait.colState';
myColumnsState = restoreColumnState(cm, myColumnStateName);
isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ?
myColumnsState.selectedRows : [];
urlFilters = isColState ? myColumnsState.filters : {};
$grid.jqGrid({
postData: { filters: urlFilters
},
datatype: "json",
rowNum: isColState ? myColumnsState.rowNum : 50,
url: 'http://example.com/Grid/GetData?_entity=Grnait',
colModel: cm,
editurl: 'http://example.com/Grid/Edit?_entity=Grnait',
beforeSelectRow: function (rowid, e) {
var $this = $(this), rows = this.rows,
startId = $this.jqGrid('getGridParam', 'selrow'),
startRow, endRow, iStart, iEnd, i, rowidIndex,
colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
$self = $(this),
savedRow = $self.jqGrid("getGridParam", "savedRow"),
cmd = $grid.jqGrid('getGridParam', 'colModel');
$("body").children("ul.ui-jqgrid-showHideColumnMenu").menu("destroy").remove();
if (cmd[colName].name === 'cb' ) {
return true;
}
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
// if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowid) {
cancelEditing($grid);
}
if (!autoedit || ClickedInActionButton(e)) {
resetSelection();
return true;
}
if (lastSelectedRow !== rowid) {
jqGrid_editRow(rowid, afterGridSaveFunc, colName );
// PutFocus(e.target);
}
PutFocus(e.target);
return true;
},
ondblClickRow: function(rowId,iRow,iCol,e) {
if (autoedit) {
return;
}
if (isInlineEdit()) {
return;
}
openDetail(rowId);
PutFocus(e.target);
},
formDeleting: formDeletingTemplate
});
emptyMsgDiv.insertAfter($grid.parent());
$grid.jqGrid('bindKeys', {
scrollingRows: true,
onEnter: openDetail
} );
$grid.jqGrid("navGrid", "#grid_toppager", {
edit: true
},
editParams,
{
},
{
},
searchParams
,
{ }
);
var reloadWithNewFilterTemplate = function () {
$grid.trigger('reloadGrid', [{current: true, page: 1}]);
};
GridCommon(false, 'Grnait',-1 );
});
function openDetail(rowId) {
jqGrid_editRow(rowId, afterGridSaveFunc,false);
}
function addDocument() {
}
function onInlineEdit(rowId) {
var savedRow = $grid.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowId) {
// if (rowId && rowId !== lastSelectedRow) {
cancelEditing($grid);
lastSelectedRow = rowId;
}
}
function PutFocus(target) {
$("input, select",target).select();
}
function afterGridSaveFunc(rowId, response) {
aftersavefunc(rowId, response);
}
</script>
<script type="text/javascript">
function EditAddForm_AfterSubmit(response, postdata) {
clearModeless();
if (response.responseText.charAt(0) === '{') {
var json = $.parseJSON(response.responseText);
postdata['Grupp'] = json.PrimaryKeyValues[0];
postdata['Kuu'] = json.PrimaryKeyValues[1];
postdata['Toode'] = json.PrimaryKeyValues[2];
return [true, '', json.Id];
}
alert( decodeErrorMessage(response.responseText, '', ''));
return [false, decodeErrorMessage(response.responseText, '', ''), null];
}
var afterSaveFuncAfterAdd = function(rowId, response) {
var data = $.parseJSON(response.responseText);
$(this).jqGrid('setRowData', rowId, { Grupp: data.PrimaryKeyValues[0] });
cancelEditing($grid);
afterGridSaveFunc(rowId,response);
jqXHRFromOnSuccess=null;
};
$.extend(true,
$.jgrid.inlineEdit, {
position: "beforeSelected",
focusField: false,
restoreAfterError: false,
afterrestorefunc: function(rowId) {
updateButtonState($grid, rowId);
setFocusToGrid();
lastSelectedRow = undefined;
},
aftersavefunc: function(rowId, response) {
afterSaveFuncAfterAdd(rowId, response);
},
oneditfunc: function(rowId) {
onInlineEdit(rowId);
updateButtonState($grid, rowId);
},
keys: true,
rowID: '_empty',
useDefValues: true,
extraparam: { _dokdata: getEevaFormData },
errorfunc: errorfunc
});
</script>
<div id="grid1container" style="width: 100%; height: 100%">
<table id="grid"></table>
</div>
</div>
</div>
</body>
</html>
Update
I added afterComplete according to answer and verified that correct id is passed to attr() . Problem persists. In second form or inline edit wrong key is still passed to server. I updated testcase below.
1 answers
solution1
1 ACCPTED 2015-04-13 20:23:02
It seems that you want to change the rowid of the row after editing. You send the editing data to the server using prmNames: { id: "_rowid", ...} option. So postdata._rowid should contains the rowid of editing row. The response from the server after editing seems looks something like
{"PrimaryKeyValues":["1","change","004"],"Id":"1ä_63_68_61_6E_67_65ä004"}
where Id property contains new rowid after editing the row. In the case you can use afterComplete callback
afterComplete: function (jqXhr, postdata, $form, formOper) {
if (formOper !== "add") {
var json = $.parseJSON(jqXhr.responseText),
p = $(this).jqGrid("getGridParam"),
oldId = p.idPrefix + postdata._rowid,
newId = p.idPrefix + json.Id,
i;
$("#" + $.jgrid.jqID(oldId)).attr("id", newId);
if (p.selrow === oldId) {
p.selrow = newId;
i = $.inArray(oldId, p.selarrrow);
if (i >= 0) {
p.selarrrow[i] = newId;
}
}
}
}
You should include such callback in the editParams which you use for the form editing:
var editParams = {
afterSubmit: function (response, postdata) {
return EditAddForm_AfterSubmit(response, postdata);
},
afterComplete: function (jqXhr, postdata, $form, formOper) {
if (formOper !== "add") {
var json = $.parseJSON(jqXhr.responseText),
p = $(this).jqGrid("getGridParam"),
oldId = p.idPrefix + postdata._rowid,
newId = p.idPrefix + json.Id,
i;
$("#" + $.jgrid.jqID(oldId)).attr("id", newId);
if (p.selrow === oldId) {
p.selrow = newId;
i = $.inArray(oldId, p.selarrrow);
if (i >= 0) {
p.selarrrow[i] = newId;
}
}
}
},
url: 'http://example.com/Edit?_entity=Grnait',
closeAfterEdit: true,
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jqGrid Form Editing with drop downs - how to set initial value
How to force dataProxy call in form editing if editurl is set in jqgrid
how to refresh jqgrid row id after primary key is changed in form edit without reload
How to start inline editing on single click in checkbox column in free jqgrid
How to avoid horizontal scroll on single click cell editing in free jqgrid
How to take the row ID of a Jqgrid
How to disable editing for some cells in row editing of JQGrid?
How to save one row's data to the server after inline editing in jqGrid?
Set class or identifier on jqGrid row based on a key/value pair placed in row (like ID)
jqGrid inline editing not working after adding new row
Related Tags