solution for Design this forms in 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" }