Question

Is it possible to have the inline editing in the raw data JSON response?

So, instead of having "editable:true" in the column Model, we could have "editable":"true" in JSON and it would work the same way.

What I want to do —

When I click on a row, I can inline edit that row. And the “editable” property is not at all set in the column model, but coming through JSON. The columns should not be editable on load, it’s only the click event that would fire inline editing.

I have the following JSON

{
    "rows":[
        {
            "id":"1",
            "editable":"true",
            "cell":[                
                "Column 1 Data",
                "Column 2 Data"

            ]
        },
        {
            "id":"2",
            "editable":"false",
            "cell":[                
                "Column 1 Data",
                "Column 2 Data"

            ]
        }
]}

How will the different form fields work in this case – input field, textarea and select field?

Answer 1

It’s interesting question! Yes, you can do this. Inside of loadComplete callback you have access to the data (JSON response converted to the object) which is the parameter of loadComplete. You can post the information about the rows, which should be set in inline editing mode directly after loading of the data. For example is should be rowids and the column names which can be edited. You can use setColProp method (see here) or getColProp (see here) to modify the editable property for the columns and call editRow method. In the way you can full implement all what you need.

UPDATED: In case of inline editing you can set “not-editable-row” class on any row, then jqGrid will not allows to edit the row. So inside of loadComplete(data) you can enumerate items of the data.rows array and for every item which has editable property equal to false add “not-editable-row” class to the row. The code could be about the following:

$("#list").jqGrid({
    // ... here all your other jqGrid options
    loadComplete: function (data) {
        var item, i, l = data && data.rows ? data.rows.length : 0;
        for (i = 0; i < l; i++) {
            item = data.rows[i];
            if (item.editable === false) {
                $("#" + item.id).addClass("not-editable-row");
            }
        }
    }
});

UPDATED 2: The problem is very easy. Either you should modify in the code above if (item.editable === false) { to if (item.editable === "false") { or change "editable":"false" from the JSON data to "editable": false which corresponds JSON serialization of boolean data.

How you can see from the demo the approach work.

UPDATED 3. In more recent version of jqGrid is implemented rowattr. It’s much more effective to use rowattr now. See the answer for code example.