Custom formatter for editable cells does not work properly when selecting this cell in jqgrid

Question

I use a custom formatter to display the data of the cell that cell.if is editing, I select this cell and select any other cell, these cells disappear and the other cells become uneditable.if I use unformatter and it doesn’t work,

my code is:

jQuery("#tree").jqGrid({ url:'json/jsonSamplePots.json', datatype: "json", mtype:'GET', colNames: ["id", "no.", "name"], colModel: [ {name:'id',width: 30, editable:false, align:"right",sortable:false, hidden: true, key: true}, {name:'no',width:80, editable:false, align:"left", sortable:true, sorttype:"int"}, {name:'name', width:150, editable:true, sortable:true, sorttype:"text",formatter:resourceFormatter}, ], rowNum:10, rowList:[10,20,30], treeGridModel:'adjacency', treeGrid: true, cellEdit: true, ExpandColumn:'name', cellsubmit : 'clientArray'}); resourceFormatter=function(cellvalue, options, rowObject) { var strResources=''; if( null != rowObject.name ) { $.each(rowObject.name,function(i,Assignment) { if(Assignment) { for(i=0;i<Assignment.length;i++) { if(i!=0) { strResources=strResources+","; } strResources=strResources+Assignment[i].employeeName+'['+Assignment[i].assignPercent+']'; } } }); } return strResources;} 

my JSON is ::

 { "list": [ { "id": 16731, "no": "1", "name": { "resources": [ { "employeeID": 103, "employeeName": "Gowri", "assignPercent": 100 }, { "employeeID": 108, "employeeName": "Paul", "assignPercent": 50 }, { "employeeID": 111, "employeeName": "Sarfaraz", "assignPercent": 50.5 } ] } } ]} 

Answer 1

In your case, the choice of custom formatting seems wrong to me. The problem is that the custom formatter will not only be called during bootstrap, but may be called later. So, it seems to me that using jsonmap better:

 {name: 'name', width: 250, editable: true, jsonmap: function (obj) { var prop, name = obj.name, assignment, resource, values = [], i, n; for (prop in name) { if (name.hasOwnProperty(prop)) { assignment = name[prop]; if ($.isArray(assignment)) { for (i = 0, n = assignment.length; i < n; i++) { resource = assignment[i]; values.push(resource.employeeName + '[' + resource.assignPercent + ']'); } } } } return values.join(', '); }} 

You should also define jsonReader :

 jsonReader: { repeatitems: false, root: "list" } 

In addition, it is important to populate TreeGrid's special properties. You can fill part of the properties inside the beforeProcessing . In the example below, I populated all the specific properties of the TreeGrid in beforeProcessing :

 beforeProcessing: function (data) { var i, list = data.list, n, item; if ($.isArray(list)) { for (i = 0, n = list.length; i < n; i++) { item = list[i]; if (typeof item.level === "undefined") { item.level = 0; } if (typeof item.parent === "undefined") { item.parent = null; } if (typeof item.isLeaf === "undefined") { item.isLeaf = false; } if (typeof item.expanded === "undefined") { item.expanded = false; } if (typeof item.loaded === "undefined") { item.loaded = true; } } } } 

The modified demo here :

UPDATED . I changed the local cell editing to the local inline editing in the demo, because cell editing does not support working with TreeGrid.

Answer 2

The json you are using has several errors. Try below.

 {"list":{"id":16731,"no":"1","name":"resources","employeeID":116,"employeeName":"lakshmi","assignPercent":50.5},"employeeID":118,"employeeName":"abc","assignPercent":50.5}