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

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](http://jsonlint.com/). — Oleg, Mar 25 '12 at 14:42
@Oleg: Thankyou for reply. I modified the Json data and i posted the correct JSON. — lakshmi, Mar 26 '12 at 04:30

Oleg · Accepted Answer · 2012-03-26T06:13:17.977

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:

enter image description 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.

@lakshmi: You are welcome! By the way you have right to vote up about 30 questions or answers **per day** (see [here](http://meta.stackexchange.com/a/5213/147495)). 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. — Oleg, Mar 26 '12 at 07:48

score 0 · Answer 2 · answered Mar 26 '12 at 01:23

0

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}

answered Mar 26 '12 at 01:23

Two Seeds

53
1
5

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

2 Answers2

Linked