Take the 2-minute tour ×

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?


jQuery(document).ready(function () {
        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!

share|improve this question
add comment

1 Answer

up vote 5 down vote accepted

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) {
        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.

share|improve this answer
your edits made this much easier to read :) Thank you. I was able to follow what you were saying and get it to work properly. Thanks! –  webdad3 Oct 13 '10 at 23:21
@Jeff V: I am glad to hear it! You welcome! –  Oleg Oct 13 '10 at 23:36
add comment

Your Answer


