Home/ Questions/Q 8747485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:21:50+00:00

I am use jqGrid. I want to add record inline navigation so this link

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to use inline editing for add the row you should use add: false option of navGrid (together with edit: false which you already use) and you should include call of inlineNav after calling of navGrid. You can choose the buttons added by inlineNav by the usage of corresponding options of inlineNav described in the documentation.

    UPDATED: You have to remove cellEdit : true option from jqGrid because the usage of both cell editing and inline editing is not supported.

    Additionally you have to rename id column 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.

    • 0