jQGrid, how to add a new row inside the grid, not via a modal?

Question

Some quick searching only turns up adding a new row to a jQGrid via a modal popup with the editable fields.

Can anyone point me to a sample or show me some code that allows you to add a new empty row into the grid itself, at the top?

I have an action column at the rightmost end of the grid in which onRowSelect() I have a save button appear and I can make that button do the save and refresh the grid I think..

I can't figure out how to click on a 'Add Row' button and add an empty row inside the grid at the top.

One option that I can see is to style the current add row modal to look like a horizontal row and place it to appear like its a row at the top of the grid.

jQGrid Documentation: http://www.trirand.com/jqgridwiki/

Answer 1

If you use datatype:'local' then you can use addRowData method to insert the row with position parameter set to 'first'. See some examples under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data.

Answer 2

This answer is courtesy of Oleg in my previous question here:

use $("#grid").addRowData(rowid,data, position, srcrowid);

Inserts a new row with id = rowid containing the data in data (an object) at the position specified (first in the table, last in the table or before or after the row specified in srcrowid). The syntax of the data object is: {name1:value1,name2: value2…} where name is the name of the column as described in the colModel and the value is the value. This method can insert multiple rows at once. In this case the data parameter should be array defined as [{name1:value1,name2: value2…}, {name1:value1,name2: value2…} ] and the first option rowid should contain the name from data object which should act as id of the row. It is not necessary that the name of the rowid in this case should be a part from colModel.

P.S. Have a look at my profile for a number of jqgrid questions and answers.