JQuery EasyUI Treegrid cannot display json object data correctly using formatter

Question

I have jsondata something as follows:

"rows":[                                                          
        {"code":"001","name":"Name 1","addr":"Address 11","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"002","name":"Name 2","addr":"Address 13","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"003","name":"Name 3","addr":"Address 87","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"004","name":"Name 4","addr":"Address 63","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"005","name":"Name 5","addr":"Address 45","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"006","name":"Name 6","addr":"Address 16","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"007","name":"Name 7","addr":"Address 27","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"008","name":"Name 8","addr":"Address 81","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"009","name":"Name 9","addr":"Address 69","col4":{"data":"col4 data","value":"col4 value"}},
        {"code":"010","name":"Name 10","addr":"Address 78","col4":{"data":"col4 data","value":"col4 value"}}
]

Intended to display the data and value of col4 in two different columns. Hence added the following in the treegrid table definition.

{field:'col4',title:'Col41 data',width:150,rowspan:2,formatter:function (value,row,index){return value["data"];}},
{field:'col4',title:'Col41 value',width:150,rowspan:2,formatter:function (value,row,index){return value["value"];}}

Expected it to work but only the data field is visible by the formatter. The second formatter never works for the column.

Does anyone know of any workaround available?

Answer 1

you should change the name of the field ... jesasyui matches the field name with the json that was sent and adds the corresponnding value..so since your field name is same for both the columns it appends the respective object...

try this

{field:'col4_data',title:'Col41 data',width:150,rowspan:2,formatter:function (value,row,index){return row.col4["data"];}},
{field:'col4_value',title:'Col41 value',width:150,rowspan:2,formatter:function (value,row,index){return row.col4["value"];}}