jQuery Grid Plugin - jqGrid

I'v been struggling for quite a while with the way jqgrid posts dates back to the server after an edit or add.

I finally found a solution and gladly share it with you. So, this is not a question for help.

I'm testing a ASP.NET MVC4 WEB API, with a simple model, controller and a single page view with json-trafic. I use the nl-BE culture that has a comma as a decimal separator, a dot as a thousands indicator and a european "dd/mm/yyyy" date format.

Filling and displaying the jqgrid was clear and easy. Problem was editing or adding rows. In the standard configuration jqgrid posts dates as they are formatted on screen. The server-side ASP.NET-deserializer  standard interpretes the returned dates as american "mm/dd/yyyy" dates, and thus generates an error for days  > 12 and switches day and month for the other days.

I've been trying to adapt the deserializer on the server but after a while realized that the problem originated on the client and was to be tackled there. I found the solution in using the serializeEditData-method that, as the name says, allows changing the data after submitting. Change the dates in "yyyyy/mm/dd"-format and the server has no diffculty in interpreting the right date.

I again suggest to differentiate the screen-format from the posted format as I posted in the "Feature request"-forum : /blog/?page_id=393/feature-request/date-formats-differentiation-between-screen-and-post/;..038;hellip;..-and-post/

Mork

Here is my js-code :

var API_URL = "api/products";

$("#gridMain").jqGrid({
    url: API_URL,
    datatype: 'json',
    mtype: 'GET',
    height: 470,
    width: 1000,
    viewrecords: true,
    colNames: ['Id', 'Naam', 'Categorie', 'Prijs', 'Aanmaakdatum'],
    colModel: [
        { name: 'Id', index: 'Id', sorttype: "int", width: 40, hidden: true },
        { name: 'Name', index: 'Name', width: 90,
                 editable: true, edittype: 'text', editoptions:{size:"20",maxlength:"30"} },
        { name: 'Category', index: 'Category', editable: true, edittype: 'text', editoptions: { rows: "2", cols: "10" } },
        { name: 'Price', index: 'Price', editable: true, edittype: 'text', align: 'right', sorttype: 'float', formatter: numFormat,
                 unformat: numUnformat },
        { name: 'CreationDate', index: 'CreationDate',
            editable: true,
            edittype: 'text',
            editrules: { date: true },
            align: 'right',
            datefmt: 'd/m/Y',
            formatoptions: { srcformat: 'ISO8601Long', newformat: 'd/m/Y' },
            formatter: 'date',
        }
    ],
    sortable: true,
    sortorder: "asc",
    sortname: "Id",
    rowNum: 20,
    rowList: [10, 20, 30],
    pager: '#navGrid',
    loadtext: 'Loading products…',
    caption: "CRUD With ASP.NET Web API"
});

jQuery("#gridMain").jqGrid('navGrid', '#navGrid', { add: true, edit: true, del: true, search: false, view: false },
        updateDialog('PUT'),
        updateDialog('POST'),
        updateDialog('DELETE')
);

function updateDialog(action) {
    return {
        url: API_URL,
        closeAfterAdd: true,
        closeAfterEdit: true,
        afterShowForm: function (formId) { },
        modal: true,
        onclickSubmit: function (outputParams) {
            var list = $("#gridMain");
            var selectedRow = list.getGridParam("selrow");
            var rowData = list.getRowData(selectedRow);
            outputParams.url += "/" + rowData.Id;
            outputParams.mtype = action;
        },
        serializeEditData: postUpdateDialog,
        width: 500
    };
}

// returns the date field as "yyyy/mm/dd"
function postUpdateDialog(data) {
    workDate = data.CreationDate.substr(6, 4) + "-"
                      + data.CreationDate.substr(3, 2) + "-" + data.CreationDate.substr(0, 2);
    data.CreationDate = workDate;
    return data;
}

function numFormat(cellvalue) {
    return cellvalue.replace(".", ",");
}

function numUnformat(cellvalue) {
    return cellvalue.replace(",", ".");
}