I have a grid that gets 2 rows from a handler, I try to identify the key column, here I renamed it from id to xqz and rr45. When I edit a Cell, my handdler is getting an id of 1 which appears to be the rownumber and not the actual id.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQgrid - ASPX</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="http://asp2d:1138/jquery-1.8.3.js"></script>-->
<!--<script src="http://asp2d:1138/jquery-ui-1.9.2.custom.js"></script>-->
<script type="text/javascript" src="http://asp2d:1138/grid.locale-en.js"></script>
<script type="text/javascript" src="http://asp2d:1138/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/ui.jqgrid.css" />
<script>
$(function() {
$("#list").jqGrid({
url: "/capplanning/SitePages/jsonhandler.aspx?wherefrom=Category One",
datatype: "json",
mtype: "GET",
colNames: ["xyz", "category_type", "category_value"],
colModel: [{
name: "rr45",
sortable: true,
key: true,
editable: true,
hidden: true,
edithidden: false
}, {
name: "category_type",
sortable: true,
editable: false
}, {
name: "category_value",
sortable: true,
editable: true
}],
pager: "#pager",
caption: "Category One",
loadonce: "true",
height: "100%",
cellEdit: true,
cellsubmit: "remote",
cellurl: "/capplanning/SitePages/jsonhandler.aspx?editedgrid=editcategory1",
autowidth: true,
rowNum: 9999,
gridview: true,
multiselect: false
/*rowList:[10,15,20]*/
});
$("#list").jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false
});
$("#list").jqGrid('navGrid', '#pager', {
edit: false,
add: true,
del: true
});
$("#list").jqGrid('navButtonAdd', '#pager', {
caption: '',
title: 'Show/Hide Filters',
buttonicon: 'ui-icon-arrowthickstop-1-e',
onClickButton: function() {
this.toggleToolbar();
if ($.isFunction(this.p._complete)) {
if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) {
$('.ui-search-toolbar', this.grid.fhDiv).show();
} else {
$('.ui-search-toolbar', this.grid.fhDiv).hide();
}
this.p._complete.call(this);
fixPositionsOfFrozenDivs.call(this);
}
}
});
$("#list")[0].toggleToolbar();
});
</script>
</head>
<body>
<table id="list">
<tr>
<td></td>
</tr>
</table>
<div id="pager"></div>
</body>
</html>
JSON
{
"rows": [{
"id": "2",
"cell": ["2", "CategoryOne", "Maintenancedd"]
}, {
"id": "3",
"cell": ["3", "CategoryOne", "Maintenance"]
}, {
"id": "4",
"cell": ["4", "CategoryOne", "New Growth"]
}]
}
In my edit handler it comes up with
Key = category_value Value = Maintenance
Key = id Value = **1**
Key = oper Value = edit
I think there is a definite bug here, jqGrid loads row id's as ordinals not the field that is bound through the primary key column, to fix this I have implemented what can only be described as a dirty hack!
first, create a client side event handler when you bind your grid model:
"loadComplete" is a javascript function in my main .js stack:
This basically, allows the grid to complete its render, then rips through finding the fist column (assuming this is the ID field, in my case, it always is) and sets the row "id" attribute to the value of the "title" attribute in the first child (which does get the correct value) thereby setting the row ID to the correct value
What a pile of dog poo this grid really is.. :(