jqGrid - type of modifed data are changed to string

Question

I use jqGrid and I loads data from server via AJAX. My data are {id: number, abberaviation: string, rate: float} (Id is same like Id in database). Then I will pass data to jqGrid. User is editing data on page. Then user will click on submit and I want to send data to server, but data has wrong datatypes {id: string, abberaviation: string, rate: string}.

I am getting data via getRowData function and I don't know how to send data with the same datatypes as originally received from the server.

I must retyped all datatypes on right datatypes, which server is expecting. UPDATED params = null notice = null

$(document).ready () ->
    params = JSON.parse $("#params").html()
    notice = $("#notice")
    table = $("#table")
    $.jgrid.no_legacy_api = true
    lastSelectedRowId = null

    table.jqGrid(
        datatype: "clientSide" # load from array in js
        data: params.data # data array
        width: "100%"
        height: "100%"
        colNames: ['','Měna', 'Kurz', 'Akce']
        colModel: [
            {
                index: 'id',
                name: 'id',
                width: 55,
                editable: false,
                sortable: false,
                hidden: true,
            }, {
                index: 'abbreviation',
                name: 'abbreviation',
                width: 90,
                align: "center",
                editable: true,
                sortable: false
            }, {
                index: 'rate',
                name: 'rate',
                width: 100,
                align: "center",
                editable: true,
                sortable: false
            }, {
                name: 'action',
                width: 40,
                align: "center",
                editable: false,
                formatter:'actions',
                fixed: true,
                resize: false,
                formatoptions: { keys: true, editbutton: false }
            }
        ]
        pager: "#status"
        editurl: "clientArray" # data won't be posted to the server but rather is saved only to the grid 
        # sortname: 'id'
        # sortorder: "desc"
        rowList: [] # disable page size dropdown
        pgbuttons: false # disable page control like next, back button
        pgtext: null # disable pager text like 'Page 0 of 10'
        viewrecords: true # show total number of records 'View X to Y out of Z'
        onSelectRow: (rowId) ->
            console.log "rowId #{rowId} #{lastSelectedRowId}"
            if lastSelectedRowId and rowId isnt lastSelectedRowId
                table.jqGrid 'saveRow', lastSelectedRowId
        ondblClickRow: (rowId, iRow, iCol, e) ->
            console.log "rowId #{rowId} #{lastSelectedRowId}"
            if rowId and rowId isnt lastSelectedRowId
                console.log e.target
                table.jqGrid 'editRow', rowId, true
                $("input, select", e.target).focus()
                lastSelectedRowId = rowId
    )

    table.bind("jqGridInlineAfterSaveRow", (e, rowid, orgClickEvent) ->
        console.log "jqGridInlineAfterSaveRow"
        console.log "lastSelectedRowId = null"
        lastSelectedRowId = null
    )

    table.bind("jqGridInlineAfterRestoreRow", (e, rowid, orgClickEvent) ->
        console.log "jqGridInlineAfterRestoreRow"
        console.log "lastSelectedRowId = null"
        lastSelectedRowId = null
    )

    $("#add-row").click (e) ->
        e.preventDefault()
        # table.jqGrid "editCell", 1, 1, false
        table.jqGrid "addRowData", undefined, "last"

    $("#save").click (e) ->
        e.preventDefault()
        showNotice "Probíhá ukládání na server..."
        data = table.jqGrid "getRowData"
        for i in [0...data.length] by 1
            item = data[i]
            item.id = Number item.id
            if item.id is 0
                delete data[i]
            else if item.id is "NaN"
                item.id = null
            item.order = i
            item.rate = Number item.rate
        jsonData = JSON.stringify data

        # $.ajax
        #   url: params.action
        #   type: "POST"
        #   data: token: params.token, data: jsonData
        #   success: (res) ->
        #       token = res.token
        #       console.log res.data
        #       showNotice "Data byla úspěšně uložena."

        #   error: (error) ->
        #       errText = JSON.parse error.responseText
        #       showNotice "Response #{error.status}: #{errText.msg}"
        #       console.log error

showNotice = (msg) ->
    notice.html msg
    notice.parent().removeClass "hidden"

Answer 1

After a long discussion of your problem I could understand that the origin of your problem is changing of type of JavaScript data of local data parameter. You use inline editing to edit the data. So you can use aftersavefunc callback to fix the problem.

I prepared the demo which demonstrates the solution. You can validate that $grid.jqGrid("getGridParam", "data"); will returns modified data where the types of the data are not changes. The property closed of the modified data will stayboolean and the properties tax, amount and total will be stay numbers. The code of aftersavefunc used as editRow parameter is the following:

aftersavefunc: function (rowid, resp, tmp, o) {
    var rowItem = $(this).jqGrid("getLocalRow", rowid);
    rowItem.closed = rowItem.closed === "Yes";
    rowItem.tax = parseFloat(rowItem.tax);
    rowItem.amount = parseFloat(rowItem.amount);
    rowItem.total = parseFloat(rowItem.total);
}