custom formatter for editable cells is not working properly on selecting that cell in jqgrid

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
                }
            ]
        }
    }
]}

Strangury

The JSON data seems be wrong. The list property must be quoted: "list". The part "name":["resources": is also wrong if you use named property resources you can do this inside of object only so it should be like "name":{"resources": or "name":[{"resources":. Could you post the fixed JSON data, then I would answer on your main question? I recommend you verify the JSON data here. – Montemayor

@Oleg: Thankyou for reply. I modified the Json data and i posted the correct JSON. – Strangury

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.

Montemayor

@lakshmi: You are welcome! By the way you have right to vote up about 30 questions or answers per day (see here). The main goal of voting is to help other to find the solution of common problems. The searching engine uses the voting intensively. So I recommend you to use the right to help other visitors of stackoverflow. – Montemayor

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}

Beyer