1

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?

techlead
  • 779
  • 7
  • 24
  • 44

1 Answers1

3

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Sorry, it seems my question was not clear. I've updated my original post. – techlead Nov 10 '11 at 21:47
  • @SK11: Not a problem. I modified ma answer. Be careful, the code which I included is untested, but I hope it should work. – Oleg Nov 10 '11 at 22:06
  • This is not working. I took out "editable" and all edit options from the column model. Copied and pasted your loadComplete function. The grid is not drawing up any data rows now and it's not giving any error messages. – techlead Nov 10 '11 at 22:25
  • ok, my bad in JSON. So, it's drawing the data rows but inline editing is not working for rows that have "editable":"true" – techlead Nov 10 '11 at 22:40
  • @SK11: I modified the answer one more time. See "UPDATED 2" – Oleg Nov 10 '11 at 22:47
  • I played around with it and realized that - the individual cells need to have the editable property as well for it to work. If I take the property out from the column model and leave it intact in json, then it doesn't work. If the column model + json has the editable property set, then the editable property in json take precedence. I will modify my json structure to see the behavior on individual cells instead of on the entire row. – techlead Nov 10 '11 at 22:57
  • @SK11: At the end you will came very close to my original suggestion to set `editable` property directly before calling of `editRow`. – Oleg Nov 10 '11 at 23:03
  • I will try that as well. But don't think can implement it that way in the project as json will be controlled by the back-end. – techlead Nov 10 '11 at 23:09
  • @SK11: If you will have implementation problem I would help you. I am sure that one can solve the proble. One should just choose a way how better to place information about the columns in the JSON data. For example you can replace `"editable": true` part of the JSON data to `"editable": [true, false]` corresponds to the columns in the `"cell"`. – Oleg Nov 10 '11 at 23:14
  • Can you please help me with this question - http://stackoverflow.com/questions/8095479/jqgrid-editabletrue-in-json-response-for-grid-columns – techlead Nov 11 '11 at 16:38