Using jqGrid's inline-editing with RESTful urls?

Question

I'm using jqGrid and would like to be able to use its built-in editing functions to make ajax calls to add/edit/delete. Our API uses RESTful verbs and urls like so: ``` verb url action -------------------------------------------------------------- GET /api/widgets get all widgets (to populate grid) POST /api/widgets create new widget PUT /api/widgets/1 update widget 1 DELETE /api/widgets/1 delete widget 1 ``` Is it possible to use the built-in ajax handling with these restrictions, or do I have to use local data (as outlined here & here) and manage the ajax calls myself? If it is possible, what properties do I set on the grid? (`ajaxRowOptions` looks promising, but the documentation is a bit thin on how to use it.)

Accepted Answer

The usage of `POST` in Add form is by default.

The main idea for customizing jqGrid for RESTfull backend you can find in the old answer.

To use 'DELETE' in form editing if you use the Delete button of the navigator toolbar. Look at here or here. So you should use about the following settings:

```
$("#grid").jqGrid('navGrid', '#pager',
    {edit: false, add: false, search: false}, {}, {},
    { // Delete parameters
        mtype: "DELETE",
        serializeDelData: function () {
            return ""; // don't send and body for the HTTP DELETE
        },
        onclickSubmit: function (params, postdata) {
            params.url = '/api/widgets/' + encodeURIComponent(postdata);
        }
    });
```

I use in the example above the encodeURIComponent function to be sure that if the id will have some special characters (spaces for example) if will be encoded so that the server part automatically received the original (decoded) data. Probably you will need to set some additional settings for the `$.ajax` call used during sending Delete request to the server. You can use for it ajaxDelOptions property.

You can make the above settings as your default settings. You can do this with respect of the following

```
$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    onclickSubmit: function (params, postdata) {
        params.url = '/api/widgets/' + encodeURIComponent(postdata);
    }
});
```

The method `onclickSubmit` from the example above can be used for the Edit operations (in case of form editing) to modify the URL dynamically to `/api/widgets/1`. In many cases the usage of `onclickSubmit` in the above form is not possible because one need to use different base urls (`'/api/widgets'`) different grids. In the case one can use

```
$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    onclickSubmit: function (params, postdata) {
        params.url += '/' + encodeURIComponent(postdata);
    }
});
```

Then the usage of `navGrid` should be with explicit setting of `url`

```
$("#grid").jqGrid('navGrid', '#pager',
    {edit: false, add: false, search: false}, {}, {},
    { // Delete parameters
        url: '/api/widgets'
    });
```

and To use 'PUT' in inline editing you can set the following default jqGrid settings:

```
$.extend($.jgrid.defaults, {
    ajaxRowOptions: { contentType: "application/json", type: "PUT", async: true },
    serializeRowData: function (data) {
        var propertyName, propertyValue, dataToSend = {};
        for (propertyName in data) {
            if (data.hasOwnProperty(propertyName)) {
                propertyValue = data[propertyName];
                if ($.isFunction(propertyValue)) {
                    dataToSend[propertyName] = propertyValue();
                } else {
                    dataToSend[propertyName] = propertyValue;
                }
            }
        }
        return JSON.stringify(dataToSend);
    }
});
```

The setting `contentType: "application/json"` is not required in general, but it could be required for some server technologies. The callback function `serializeRowData` from the example above sent the data as JSON. It is not required for RESTfull, but it's very common. The function `JSON.stringify` is native implemented in the most recent web browsers, but to be sure that it work in old browsers to you should include json2.js on your page.

The code of `serializeRowData` could be very simple like

```
serializeRowData: function (data) {
    return JSON.stringify(data);
}
```

but I use above code to be able to use functions inside of the `extraparam` of the method editRow (see here and the problem description here).

The usage of the RESTfull URL (like `/api/widgets/1`) in the `editRow` is very simple:

```
$(this).editRow(rowid, true, null, null, '/api/widgets/' + encodeURIComponent(rowid));
```

To use it in case of the form editing you should use

```
grid.navGrid('#pager', {},
    { mtype: "PUT", url: '/api/widgets' });
```

and

```
$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" }, // can be not required
    onclickSubmit: function (params, postdata) {
        params.url += '/' + encodeURIComponent(postdata.list_id);
    }
});
```

It is important to remark that to get `id` from the `postdata` inside of `onclickSubmit` and need use `postdata.list_id` instead of `postdata.id`, where `'list'` is the id of the grid. To be able to use different grid (`<table>`) ids one can use new non-standard parameter. For example, in the code below I use `myGridId`:

```
var myEditUrlBase = '/api/widgets';
grid.navGrid('#pager', {},
    { mtype: "PUT", url: myEditUrlBase, myGridId: 'list' },
    { // Add options
        url: myEditUrlBase },
    { // Delete options
        url: myEditUrlBase });
```

and the default setting defined as…

Using jqGrid's inline-editing with RESTful urls?

Solution

Problem

Related problems