CODEWITHSUNDEEP
jsonjqgrid
Erkan
Erkan

Reputation: 163

JQGrid Posting JSON data on editRow

I would like to post json data to the server (REST API). When I now double click on a row to edit inline, 'serializeRowData' is called and my server receives a json formatted message in the body. But when I click on the little '+' icon in the pager, 'serializeRowData' is not called.

I'm using version:

My Grid looks like:

$("#dbgrid").jqGrid({ 
    url: 'rest/config/dbs',
    editurl: 'rest/config/db',
    datatype: "json", 
    height: 255, 
    width: 600, 
    colNames:['ID', 'Env', 'Hostname', 'Name', 'Port', 'Service Name', 'SID'], 
    colModel:[ 
        {name:'id',index:'id', width:30, sorttype:'int'}, 
        {name:'env',index:'env', editable:true, width:50}, 
        {name:'hostName',index:'hostName', editable:true, width:200},
        {name:'name',index:'name', editable:true, width:200},
        {name:'port',index:'port', editable:true, width:30},
        {name:'serviceName',index:'name', editable:true, width:30},
        {name:'sid',index:'sid', editable:true, width:30}
    ], 
    jsonReader: {
        repeatitems: false,
        id: "id",
    },
    rowNum:50, 
    rowTotal: 2000, 
    rowList : [20,30,50], 
    loadonce:false, 
    mtype: "GET", 
    rownumbers: true, 
    rownumWidth: 40, 
    gridview: true, 
    pager: '#pdbgrid', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "asc", 
    caption: "Database Servers"  ,
    ajaxRowOptions : {
        type :"POST",
        contentType :"application/json; charset=utf-8",
        dataType :"json"
    },
    serializeRowData: function(postdata){     
        return JSON.stringify(postdata);
    }
});
$("#dbgrid").jqGrid('navGrid','#pdbgrid',{edit:true,add:true,del:true}

Am I missing something?

Any help, along with examples, would be hugely appreciated.

Upvotes: 1

Views: 5570

Answers (2)

Erkan
Erkan

Reputation: 163

If someone has the same problem here a working solution:

...
$("#dbgrid").jqGrid('navGrid','#pdbgrid',
    {edit:true,add:true,del:true},
    {
        //edit parameters
        ajaxEditOptions: jsonOptions,
        serializeEditData: createJSON,
        closeAfterEdit: true
    },
    {
        //add parameters
        ajaxEditOptions: jsonOptions,
        serializeEditData: createJSON,
        closeAfterAdd: true
     },
     {
         //delete parameters
         ajaxDelOptions: jsonOptions,
         serializeDelData: createJSON
     }
);

var jsonOptions = {
    type :"POST",
    contentType :"application/json; charset=utf-8",
    dataType :"json"
};

function createJSON(postdata) {
    if (postdata.id === '_empty')
        postdata.id = null; // rest api expects int or null
    return JSON.stringify(postdata)
}

Upvotes: 2

Piyush Sardana
Piyush Sardana

Reputation: 1758

Because that doesn't come in inline editing. You can change last line of your code like this.

$("#dbgrid").jqGrid('navGrid','#pdbgrid',{edit:true,add:true,del:true},
{//edit parameters},

{//add parameters
serializeEditData: function (postdata) {}
},

{//delete parameters}
);

Now if you want to serialize edit data then same function you can write in edit parameters also. This function works for both add and edit. For delete, it will be serializeDelData.

I hope it helps you.

Upvotes: 4

Related Questions