How to make JqGrid always have empty row at bottom? - jqgrid

Question

I'm using JqGrid with inline editing and i dont use navigation, pager or footer. I want to add empty row at the bottom to added. I mean empty row will be always there after editing an exsiting row, after adding new row.
I added row in loadComplete event, but i just adds empty row at beginning not anymore.
jQuery("#tableContents").jqGrid({
postData: { orderId: '139358' },
mtype: "POST",
url: "test.asmx/GetContents",
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
colModel: [
{
name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
},
{
name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
editrules: {
required: true
}
},
{
name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
editrules: {
number: true,
required: true
}
},
{
name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
//pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
regional: 'tr',
height : '100%',
caption: "Manipulating Array Data",
editurl: 'test.asmx/EditContent',
loadonce: true,
sortable: true,
//footerrow: true,
onSelectRow: function (rowid) {
var $self = $(this),
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
extraparam: { orderId: '139358', staffId : '111' },
aftersavefunc: function (rowid) {
alert("Saved");
}
});
},
loadComplete: function () {
var $self = $(this)
$self.jqGrid('addRowData', undefined, {});
}
});
How can we do that?

Answer 1

You try to use jqGrid in the way which is opposite to the standard behavior. It's very bad idea. You will have to write a lot of code and have minimal difference to the standard way.
The main problem is: jqGrid hold data inside of the grid. You try to add an empty row inside of the data which is not loaded from the server, which is not in editing mode (like addRow do for example) and which is not saved on the server. So you try to use the grid in the way contradicting to jqGrid logic. It sounds simple, but it is really bad and the implementation will be complex.
I would recommend you to follow the standard way. You will have clean and simple code and the most of the users can use the grid intuitive. For example you can do add navigator toolbar where you add "+"/"Add" button with respect of inlineNav. The user will intuitively understand what need be done to add new row. The difference whether the user clicks on empty row at the bottom of the grid or if the user clicks on "Add new row" button, existing also at the bottom of the grid, is very small. After the click on the button the new row will be added and the user can insert the data. By press of Enter the row will be saved and by press on Esc the empty row will be removed. The code will be simple and it will do almost the same what you try to implement now.