solution for Design this forms in jqgrid - jqgrid

Question

I Have problem in use jqGrid,Before discussing the question of explain tables.
i have 4 tables CostType,CurrencyUnit , Request,RequestCost .
CostType Table structure
CostId CostName
------- ----------
1 permit
2 Warehouse receipt
3 Warehousing
and Request structure
RequestId RequestNo WaybillNo
------------------------------------------
1 100 120Ac30
2 101 400CA852
and CurrencyUnit table stracture:
UnitId UnitName
------------------
1 Dollar
2 Pound
3 Rial
and CostRequest table stracture
requestId CostId Amount CurrencyUnitId Remark
--------------------------------------------------------
1 2 200 3
1 1 400 1
i want in fill page load grid As follows:
Afterwards user can enter request No in top textbox and click button search As follows:
user can change or enter some Cost Amount for this request As follows:
and click in save button to save in database.
Notes: i'm starter in jqGrid i can fill first Grid other two-step i can not implemet.
please help me . thanks all

Answer 1

It's a little difficult to answer on your question without writing the code for you.
The input field for "RequestNo" (having id="requestNo" for example) and the "Search" button could be simple controls in <fieldset> over the grid. click handler of the "Search" button can just call $("#grid").trigger("reloadGrid", [{page:1}]). Inside of grid definition you can use postData like
var $grid = $("#grid"),
editingRowId,
myEditParam = {
keys: true,
oneditfunc: function (id) { editingRowId = id; },
afterrestorefunc: function (id) { editingRowId = undefined; },
aftersavefunc: function (id) { editingRowId = undefined; }
};
$grid.jqGrid({
...
postData: {
// add requestNo parameter to the request
requestNo: function () { return $("#requestNo").val(); }
},
beforeRequest: function () {
// stop request to the server for empty requestNo
return $("#requestNo").val() !== "" ? true : false;
},
onSelectRow: function (id) {
if (id !== editingRowId) {
if (typeof editingRowId !== "undefined") {
// save previously editing row
$(this).jqGrid("saveRow", editingRowId, myEditParam);
}
// start inline editing. The user should save the row by pressing ENTER
$(this).jqGrid("editRow", id, myEditParam);
}
}
...
});
You can add additionally "Save" button which would call $("#grid").jqGrid("saveRow", editingRowId); to save the last editing row if editingRowId is not undefined.
It is important to add editable: true to all columns which you want to see in editing mode. If you want to have all editing columns in the grid you can use cmTemplate: {editable: true} jqGrid option. It changes the defaults for column definitions defined in colModel.
To have dropdown in the "CurrencyUnit" column you should include additional properties in the column definition:
edittype: "select", editoptions: { value: "Dollar:Dollar; Pound:Pound; Rial:Rial" }