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

Question

Problem 1

I use 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 changed the jqGrid JSON response to include column names, the jqGrid data rows are empty, 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” to the cell definition (with or without column names. Here I show the JSON structure with column names.), The jqGrid data rows are empty again

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

Table cells are drawn, but jqGrid does not collect 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 specific 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 the "cage"

  { "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 reverse cell and modified 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 - non-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

Problem 1 is very simple. In JSON, you use "cell" and named properties together, which is not true for the default JSON reader. Thus, you can solve the problem in two ways.

The first way . You do not change the JSON data format, but you add the jsonReader: {repeatitems: false} jsonmap and jsonmap with the cell. prefix cell. in each 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 demo ).

The second way . You only use jsonReader: {repeatitems: false} and remove the 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 a very strange format for the "date" of JSON data. Why is the property value an array? Could it have more as one element? How should the data be displayed in this case? I think you should change the data format.

Answer 2

look at jqGrid inline edit

It shows an example of how to conditionally edit a string.

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); } }