CODEWITHSUNDEEP
javascriptjqueryjqgrid
Moin Zaman
Moin Zaman

Reputation: 25445

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

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/

Upvotes: 7

Views: 49547

Answers (2)

Bob
Bob

Reputation: 3084

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.

Upvotes: 7

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 10

Related Questions