How to fill document header from jqgrid data

Question

ASP .NET MVC2 page contains order header data (order number, customer, order data etc):

<form id='_form' class='form-fields' action='' onsubmit='SaveDocument();return false;'>
<input id='Number' name='Number' />

<select id='PaymentTerm' name='PaymentTerm'>
<option value=''></option><option value='0'>Cash</option>
<option value='10'>10 days</option>
</select>

</form>

and order rows presented in jqgrid.

I'm looking for a way to fill order headcer data from json date from controller like like jqgrid fills data. To minimize request maybe it is best to return header data in jqgrid data request. For this additional parameter documentId is passed to controller.

GetData returns document header as name value pairs in document object. How to assign those values to form elements in browser in jqgrid loadcomplete or other place ?

public JsonResult GetData(int page, int rows, string filters,
          int documentId )

{
    var query = ...;
    var totalRecords = query.Count();

    var documentHeader = new FormCollection();
    // In production code those values are read from database:
    documentHeader.Add("Number", 123);  // form contains input type='text' name='Number' element
    documentHeader.Add("PaymentTerm", "10"); // form contains select name='PaymentTerm' element
    ...

    return Json(new {
        total = page+1,
        page=page,
        document = documentHeader,
        rows = (from item in query
                select {
                    id = item.Id.ToString(),
                    cell = new[] {
                        item.ProductCode,
                        item.ProductName,
                        item.Quantity,
                        item.Price
                    }
                 }).ToList()
    },
    JsonRequestBehavior.AllowGet);
}

Answer 1

If I understand correct your question you can use beforeProcessing or loadComplete callbacks to fill the form data based on the response from the server. The first data parameter of both callbacks (beforeProcessing or loadComplete) will contains all the data returned from the server. So you have access to document property of data and it has the same format as on the server.

I am not sure why you use document of the type FormCollection. It seems to me the most native to use anonymous type of data:

return Json(new {
    total = page + 1,
    page = page,
    document = new {
        number = 123,
        paymentTerm = 10
    },
    rows = (...)
},
JsonRequestBehavior.AllowGet);

but the exact type of document is probably not so important.

Inside of beforeProcessing or loadComplete you can just use the corresponding properties of data.document in the same format. For example

beforeProcessing: function (data) {
    var hearderData = data.document;
    if (hearderData) {
        if (hearderData.number) {
            $("#Number").val(hearderData.number);
        }
        if (hearderData.paymentTerm) {
            $("#PaymentTerm").val(hearderData.paymentTerm);
        }
    }
}