jqgrid add row and send data to webservice for insert

I have been able to pull data from my DB using jQuery/Ajax from a webservice into the jQGrid. Now I would like to send added/edited data back to the webservice. I’ve seen some examples by using PHP and the editurl: command. Will that work for webservices as well (like how I pulled down the data originally)?

I’ve looked over the examples several times. I even found another question that is similar to what I’m asking however, I am unable to find any real examples of how to do what I need. Do any exist?

:UPDATED:

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        datatype: processrequest,
        mtype: 'POST',
        jsonReader: {
            root: "ListExercise", //arry containing actual data  
            page: "Page", //current page  
            total: "Total", //total pages for the query  
            records: "Records", //total number of records  
            repeatitems: false,
            id: "ID" //index of the column with the PK in it   
        },
        colNames: ['Id', 'Exercise'],
        colModel: [
      { name: 'exercise_id', index: 'exercise_id',editable:false },
      { name: 'exercise_value', index: 'exercise_value',editable:true }
      ],
        caption: 'MyFitnessApplication',
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortorder: "desc",
        viewrecords: true,
        height: '250px',
        loadonce: true,
        editurl: "../webService/exercise_ws.asmx/insertRecord"      
    }).navGrid('#pager', { edit: true, add: true, del: false });
});

As you can see I added the editurl tag. That does seem to call my webservice. Now I’m missing how to pass the actual parameters to the webservice. I’m missing something, and help is appreciated!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

First of all you can change some default options used for add/edit:

jQuery.extend(jQuery.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    serializeEditData: function (postData) {
        if (postData.exercise_value === undefined) { postData.exercise_value = null; }
        return JSON.stringify(postData);
    }
});

(where JSON.stringify is the functions defined in http://www.json.org/js.html). Then the data, which will be send to the server, will be JSON encoded. Almost the same settings can be used for the delete

jQuery.extend(jQuery.jgrid.del, {
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function (postData) {
        if (postData.exercise_value === undefined) { postData.exercise_value = null; }
        return JSON.stringify(postData);
    }
});

Now you can define insertRecord like following

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public int ModifyData (string exercise_value, string oper, string id)
{
    if (String.Compare (id, "_empty", StringComparison.Ordinal) == 0 ||
        String.Compare (oper, "add", StringComparison.Ordinal) == 0) {

        // TODO: add new item with the exercise_value and return new id
        //       as the method result
    }
    else if (String.Compare (oper, "edit", StringComparison.Ordinal) == 0) {
        // TODO: modify the data identified by the id
    }
    else if (String.Compare (oper, "del", StringComparison.Ordinal) == 0) {
        // TODO: delete the data identified by the id
    }
}

You don’t wrote which type has exercise_id: integer or string. If you use string ids the code above should be changed a little.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0