custom formatter for editable cells is not working

Question

i am using custom formatter for displaying cell data which is editable cell.if i select that cell and select any other cell, cell data is getting disappeared and other cells are becoming uneditable.if i use the unformatter also it is not working.

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 formatter seems me wrong. The problem is that the custom formatter will be called not only during the initial grid load, but can be called later. So It seems to me the usage of jsonmap the 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 have to define jsonReader too:

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

Additionally it's important to fill TreeGrid specific properties. You can fill the part of the properties inside of beforeProcessing callback. On the example below I filled all the TreeGrid specific properties 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 you find here:

UPDATED: I changed in the demo the local cell editing to the local inline editing because cell editing don't support work 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}