I use jqGrid plugin. There are grid and sub grid turned on. When I click second time to edit row from main grid then fields populates by wrong value. Detailed steps to reproduce:
- Click edit row (main grid row)
- Edit form populated correctly, ok (see first screen)
- Click 'Cancel' button
- Click edit row again
- Edit form populated wrong (see second screen)
Here is my code:
$(function () {
$("#list").jqGrid({
url: 'Country/CountryListPaged',
editurl: "Country/AddEditDeleteCountry",
datatype: "json",
mtype: 'POST',
colModel: [
{ name: 'idCountry', index: 'idCountry', label: 'Id', width: 100, editable:true, hidden:true },
{ name: 'code', index: 'code', label: 'Код', width: 200, align:'center', editable: true, edittype:'text', editrules:{ required:true} },
{ name: 'title', index: 'title', label: 'Название', width: 300, align: 'center', editable: true, edittype: 'text', editrules: { required: true} }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20],
sortname: 'Title',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Список стран',
height: 'auto',
autowidth: true,
scrollOffset: 0,
hidegrid: false,
subGrid: true,
subGridRowExpanded: function (subgridId, rowId) {
var subgridTableId, pagerId;
subgridTableId = subgridId + "_t";
pagerId = "p_" + subgridTableId;
var tmp = $("#list").getRowData(rowId);
var idCountry = tmp.idCountry;
var countryCode = tmp.code;
$("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table><div id='" + pagerId + "' class='scroll'></div>");
jQuery("#" + subgridTableId).jqGrid({
url: "Country/CountryTranslateVariantsList?idCountry=" + idCountry + "&countryCode=" + countryCode,
editurl: "Country/AddEditDeleteCountryTranslateVariant",
mtype: "POST",
datatype: "json",
colModel: [{ name: "idCountryTranslate", index: "IdCountryTranslate", editable: true, hidden: true },
{ name: "countryTranslateCode", index: "countryTranslateCode", editable: true, hidden: true, edittype: "text", editoptions: { defaultValue: countryCode} },
{ name: "language", index: "Language", label: "Язык", width: 100, editable: true, edittype: "select", editoptions: { value: "en:en;ru:ru;fr:fr;de:de" }, editrules: { required: true} },
{ name: "countryTranslateTitle", index: "countryTranslateTitle", label: "Название", width: 180, editable: true, editrules: { required: true}}],
rowNum: 5,
pager: pagerId,
sortname: 'language',
sortorder: "asc",
viewrecords: true,
gridview: true,
height: '100%'
});
//SUB GRID NAVIGATION PANEL
jQuery("#" + subgridTableId).jqGrid('navGrid', "#" + pagerId,
{ edit: true, add: true, del: true, search: false, refresh: false },
{mtype: "POST", closeAfterEdit: true, reloadAfterSubmit: true }, //edit parameters
{mtype: "POST", closeAfterAdd: true, reloadAfterSubmit: true }, //add parameters
{mtype: "POST", reloadAfterSubmit: true, serializeDelData: function (postdata) {
var rowdata = $("#" + subgridTableId).getRowData(postdata.id);
return { oper: postdata.oper, idCountryTranslate: rowdata.idCountryTranslate };
}
}, //delete parameters
{}//search parameteres
);
}
});
//MAIN GRID NAVIGATION PANEL
jQuery("#list").jqGrid('navGrid', "#pager",
{ edit: true, add: true, del: true, search: false, refresh: true },
{ mtype: "POST", closeAfterEdit: true, reloadAfterSubmit: true }, //edit parameters
{mtype: "POST", closeAfterAdd: true, reloadAfterSubmit: true }, //add parameters
{mtype: "POST", reloadAfterSubmit: true, serializeDelData: function (postdata) {
var rowdata = $("#list").getRowData(postdata.id);
return { oper: postdata.oper, idCountry: rowdata.idCountry };
}
}, //delete parameters
{}//search parameteres
);
});
</script>
<div style="margin:10px auto auto auto;width:100%;height:100%;">
<table id="list">
<tr>
<td/>
</tr>
</table>
<div id="pager"></div>
