jqGrid - "editable":"true" in JSON response for grid columns

Question

Problem 1

I have the column model as

{name:'fname',index:'fname', width:50, align:"center", resizable:false},
{name:'lname',index:'lname', width:50, align:"center", resizable:false},
{name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}

If I change the jqGrid JSON response to include the names of the columns, the jqGrid data rows are empty with no data

{
    "rows":[
        {
            "id":"1",           
            "cell":{                
                "fname":"S",
                "lname":"K",
                "date":"11/11/2011"
            }
        }
    ],
    "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

Problem 2 -- I tried adding "editable" within the cell definition (with or without the column names. Here I'm showing the JSON structure with column names.), jqGrid data rows are again empty

{
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": [
                    {
                        "date": "11/11/2011",
                        "editable": "true"
                    }
                ]
            }
        }
    ],
    "userdata": {
        "amount": 3220,
        "tax": 342,
        "total": 3564,
        "name": "Totals:"
    }
}

The table cells are drawn but jqGrid is not picking up the JSON data.

What am I doing wrong?

jqGrid JSONReader

jQuery("#editjqGrid").jqGrid({
    url: "http://localhost/edit.json",
    datatype: "json",
    contentType: "application/x-javascript; charset=utf-8",
    colNames:['fname','lname', 'date'],
    colModel:[
        {name:'fname',index:'fname', width:50, align:"center", resizable:false},
        {name:'lname',index:'lname', width:50, align:"center", resizable:false},
        {name:'date',index:'date', width:50, align:"center", resizable:false, editable:true}
    ],
    loadComplete: function (data) {     
        var item, i, l = data && data.rows.cell ? data.rows.cell.length : 0;
        for (i = 0; i < l; i++) {
            item = data.rows.cell[i];           
            if (item.editable === "false") {
                $("#" + item).addClass("not-editable-cell");
            }
        }
    }

});
jQuery("#editjqGrid").jqGrid('navGrid','#pager2',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});

UPDATE: Adding inline editing options for a particular cell in JSON

    {
        "rows": [
            {
                "id": "1",
                "cell": {
                    "fname": "S",
                    "lname": "K",
                    "date": {
                        "value": "11/11/2011",
                        "editable": "true",
                        "edittype":"input",
                        "editoptions":{
                             "size":"20",
                             "maxlength":"30"
                        }
                    }
                    "emptype":{
                        "editable":"true",
                        "edittype":"select",
                        "editoptions":{
                            "option":"Full Time",
                            "option":"Part Time",
                            "option":"Hourly"
                        }
                    }
                }
            }
        ],
        "userdata": {
            "amount": 3220,
            "tax": 342,
            "total": 3564,
            "name": "Totals:"
        }
    }

UPDATE 2: Took out 'cell'

    {
        "rows": [
            {
                "id": "1",
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"input",
                    "editoptions":{
                        "size":"20",
                        "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "option":"Full Time",
                        "option":"Part Time",
                        "option":"Hourly"
                     }
                }
            }                
        ]
    }

UPDATE 3: Added back 'cell' and modified the edittype and editoptions

       {
    "rows": [
        {
            "id": "1",
            "cell": {
                "fname": "S",
                "lname": "K",
                "date": {
                    "value": "11/11/2011",
                    "editable": "true",
                    "edittype":"text",
                    "editoptions":{
                         "size":"20",
                         "maxlength":"30"
                    }
                }
                "emptype":{
                    "editable":"true",
                    "edittype":"select",
                    "editoptions":{
                        "value":"Full Time",
                        "value":"Part Time",
                        "value":"Hourly"
                    }
                }
            }
        }
    ]

loadComplete - 'not-editable-cell' not working

loadComplete: function (data) {               
     var rowItem, x, l = data && data.rows ? data.rows.length : 0;           
     for (x = 0; x < l; x++) {  
    if (data.rows[x].cell.date.editable === "false") {
            $("#" + data.rows[x].id + "td[aria-describedby='editTimecard_date']").addClass("not-editable-cell");
    }
}

}

Answer 1

The problem 1 is very easy. In the JSON you use "cell" and named properties together which is wrong for the default JSON reader. So you can fix the problem in two ways

The first way. You don't change the JSON format of data, but add jsonReader: {repeatitems: false} parameter and jsonmap with cell. prefix in every column:

colModel: [
    {name: 'fname', index: 'fname', jsonmap: 'cell.fname', width: 70, align: "center", resizable: false},
    {name: 'lname', index: 'lname', jsonmap: 'cell.lname', width: 70, align: "center", resizable: false},
    {name: 'date',  index: 'date',  jsonmap: 'cell.date', width: 70, align: "center", resizable: false, editable: true}
],
jsonReader: {repeatitems: false}

(see the demo).

The second way. You use only jsonReader: {repeatitems: false} and remove cell part from the JSON data:

{
    "rows":[
        {
            "id":"1",           
            "fname":"S",
            "lname":"K",
            "date":"11/11/2011"
        }
    ],
    "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

(see another demo).

In your second part of the question I find very strange format of the "date" part of JSON data. Why the value of the property is array? Could it has more as one items? How the data should be displayed in the case? I think you should change format of the data.

Answer 2

have a look at jqGrid inline edit

It show's an example how to conditionaly edit row's

code snippet:

onSelectRow: function(id) {
  var data = jQuery('#grid_id').getRowData(id);
  if(data.editable == true) {  // <-- you may have to check this
    jQuery('#grid_id').editRow(id, true);
  }
}