I am use jqGrid. I want to add record inline navigation so this link http://www.trirand.com/blog/jqgrid/jqgrid.html? when i click in ADD new row icon in navbar. Grid is like view modal view.
<div id="pager"></div>
<table id="ward"></table>
<br />
<script src="js/rowedex3.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery("#ward").jqGrid({
mtype : 'GET',
url : "listAllWards.html",
datatype : "json",
colNames : [ 'Id', 'Ward Type', 'Description'],
colModel : [ {
name : 'id',
index : 'id',
editable:true,
width : 50
}, {
name : 'name',
index : 'name',
width : 150,
editable:true,
}, {
name : 'decsription',
index : 'decsription',
width : 100,
editable:true,
}],
rowNum : 5,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Ward's List",
width : 940,
cellEdit : true,
editurl: "server.html",
});
jQuery("#ward").jqGrid('navGrid', '#pager', {
edit : false,
del : false,
search :false,
});
</script>
If you want to use inline editing for add the row you should use
add: falseoption ofnavGrid(together withedit: falsewhich you already use) and you should include call of inlineNav after calling ofnavGrid. You can choose the buttons added byinlineNavby the usage of corresponding options ofinlineNavdescribed in the documentation.UPDATED: You have to remove
cellEdit : trueoption from jqGrid because the usage of both cell editing and inline editing is not supported.Additionally you have to rename
idcolumn to any other name if you need to edit the grid. See the second part on the answer for additional details.I recommend you to place the whole JavaScript code inside of
$(function(){...});and move it inside of<head>.You should verify that you use current (now 4.4.1) version of jqGrid.