CODEWITHSUNDEEP
jqueryjsonjqgrid
Jaym
Jaym

Reputation: 301

Serializing jqGrid's edit data to JSON

After a user edits data in jqGrid, I would like to return a formatted JSON string back to the server to be consumed. Below is a sample of what the server expects to receive: 

{
  "aptitudeArrayList":[
    {
      "skill":"VITS",
      "value":2,
      "id":2,
      "color":"RED"
    },
    {
      "skill":"GBFM",
      "value":6,
      "id":1,
      "color":"GREEN"
    },
    {
      "skill":"JSON",
      "value":4,
      "id":3,
      "color":"RED"
    },
    {
      "skill":"CASTLEROCK",
      "value":7,
      "id":4,
      "color":"RED"
    }
  ],
  "cell":12412,
  "line":"FIRST_LINE",
  "name":"Barop",
  "id":1,
  "region":"The end",
  "available":true
}

Here is a segment of my ColModel:

...
{
    name:'cell',
    label:'Cell #',
    width:80,
    align:'center',
    editable:true,
    editrules:{required:true, integer:true},
    editoptions:{size:10, maxlength:10}
},
{
    name:'available',
    label:'Available',
    formatter:'checkbox',
    width:46,
    align:'center',
    editable:true,
    edittype:'checkbox',
    editoptions:{value:"true:false"}
},
{
    name:"vits.value",
    label:'VITS',
    width:300,
    align:'center',
    editable:true,
    jsonmap:"aptitudeArrayList.0.value"
},
{
    name:"vits.color",
    editable:true,
    jsonmap:"aptitudeArrayList.0.color"
}
...

Here are the Edit options: (I commented out postdata as its not needed as of now)

var editOptions = {
    onclickSubmit:function (params, postdata) {
        params.url = URL + '/'; //+ postdata.id;
    }
};

After the edit is called, the data is sent to this function:

$.extend($.jgrid.edit, {
    closeAfterEdit:true,
    closeAfterAdd:true,
    ajaxEditOptions:{ contentType:"application/json" },
    mtype:'PUT',
    serializeEditData:function (data) {
        delete data.oper;
        return JSON.stringify(data);
    }
});

The inadequate code above returns this JSON:

{
  "id":"1",
  "name":"Barop",
  "region":"The end",
  "line":"FIRST_LINE",
  "cell":"12412",
  "available":"true",
  "vits.value":"2",
  "vits.color":"RED"
  ...
}

When I attach the debugger I find that data contains: dataObject { id="1", name="Barop", region="The end", ... vits.value="2", vits.color="RED"} It seems it is getting the keys from the name attribute in jqGrid.

How would I go about serializing my data to a format that the server requires?

Upvotes: 1

Views: 4194

Answers (1)

Oleg
Oleg

Reputation: 221997

The simplest way to solve your problem seems to me the modification of the serializeEditData which you use. It can be about the following

serializeEditData: function (data) {
    return JSON.stringify({
        id: parseInt(data.id, 10),
        name: data.name,
        line: data.line,
        cell: parseInt(data.cell, 10),
        available: data.available === 'true',
        aptitudeArrayList: [
            value: data.value,
            color: data.color
        ]
    });
}

Moreover I recommend you better not use points or any other meta-characters in the name property. Either you can just rename name: "vits.value" to name: "value" or use additional index property

name: "value",
index: "vits.value",
jsonmap: "aptitudeArrayList.0.value"

Upvotes: 2

Related Questions