how to pass dynamic values in jqgrid Add Form - jqgrid

Question

Below is my grid ..
the Column TestType has a list of values (say test1, test2..test10 ) .
how can i generate Add form like this.
Can any one throw some light on this?
many thanks..
UPDATED:
========
this is how my add form should look like

Answer 1

As I Understand from your above comments, Your add form need to be in Tabular format.
A. Easy way is Grid inline edit. But I think it is not suitable for you. If so,
B. Do the following:
Instead of grid's default add button use external add button. On clicking that button open a custom form in tabular form with Save option.
Onclick of save button just read all fields data from the tabular form. Here you have some small problem.
You may have to iterate the rows in the table to insert into the Database (This is Based on your database design).
On success of AJAX you just reload the Grid by using $('#yourGrid').trigger("reloadGrid");
This is a design idea only. Unfortunately I do not have any example for you :(
Let me know if you need more details.
Edit:
External add button:
Resulted add form:

Answer 2

Do you create a jqgrid in your form?
You are have create a jqgrid like this:
jQuery("#list2").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
Where colNames its a caption, colModel contain a name and format you grid, and exists a tag PostData contain a arguments for populate your grid, its return a format JSON or Xml.
Do you see more in a Wiki and Demos.
You're Welcome.

Answer 3

One solution could be to go 'out of band' with jqgrid. you could add an 'onSelectRow' attribute to your jqGrid javascript-object. Allowing it to load up some other content, say for instance in a dialog. this would look like this.
$("#list").jqGrid({
url:'/path/to/jqgrid/data/',
datatype: 'json',
mtype: 'GET',
colNames:['TestID','ArticleID', 'Color', 'TestType', 'Places Tested', 'Results', 'comments'],
colModel :[
{name:'testid', index:'testid', width:35, align:'center', sortable:true},
{name:'artileid', index:'articleid', width:50, align:'left', sortable:false},
{name:'color', index:'color', width:80, align:'left', sortable:true},
{name:'testtype', index:'testtype', width:40, align:'right', sortable:true},
{name:'placestested', index:'placestested', width:50, align:'center', sortable:false},
{name:'results', index:'results', width:50, align:'center', sortable:false},
{name:'comments', index:'commente', width:35, align:'center', sortable:false}
],
pager: '#pager',
rowNum:15,
rowList:[15,30,60,120],
sortname: 'testid',
sortorder: 'desc',
viewrecords: true,
gridview: true,
emptyrecords: "No Tests in system",
height: "100%",
autowidth: true,
caption: 'Test Details',
onSelectRow: function(id, status, event){
console.log("jqGrid.onSelectRow called");
alert('TODO: add dialog');
var url = "/new/dialog/server/data/' + id + "/"
console.log(url);
window.openDialog( url, id );
$('tr[id=' + id + ']').removeClass('ui-state-highlight'); // no annoying white row.
},
loadComplete: function() {
console.log('jqGrid.loadcomplete');
}
}); // end jqGrid stanza
Not Quite Finished:
Now you need to do 3 things
Build the server response: that will respond to the jqgrid url request. '/path/to/jqgrid/data/'
you will need to write your javascript 'openDialog(url, id)' function. This should be a wrapper function to a jquery-ui dialog.
you will need to build another server response: that will respond to the openDialog url request.
Note: I recommend since you are using jqGrid, you would be using a jquery-ui dialog.
Finally: 'just to be sure' the response that you are going to need from # 1 will look something like this.
{
"total": 1,
"records": 2,
"rows": [
{
"cell": [ 1, 398, "red", "unit", "lab", "failed", "failed post progression bla" ],
"id": 2
},
{
"cell": [ 2,399, "green", "unit", "lab", "passed", "past post progression bla" ],
"id": 1
}
],
"page": 1
}