CODEWITHSUNDEEP
jsonjqgridactionformatterfree-jqgrid
LSP
LSP

Reputation: 13

jqGrid: formatter: "actions" doesn't work for remote json url

I tried to use jqGrid formatter: "actions" for remote json url but it shifts rows because number of column names and actual returned data doesn't match (act column is extra one in column names). I did search online and it looks like all examples are for local data (on page) where json is used as key/value, while url:somepage.php returns a csv kind-of-format of columns(no keys, just values). Also I use id as hidden field, while all examples show id. I use one more hidden column as well. here is my colmodel:

url: "manager_json",
                editurl: "manager_edit",
                datatype: "json",
                //data: mydata,
                width:1000,
                //jsonReader: {
                //                repeatitems : false,
                //           },
                colNames: ["","Id","Uid","Custom Id","Image Name","Coord. X","Coord. Y","Gender","Progress","Status","Created","Updated"], 
                colModel: [{"name":"act","template":"actions","formatoptions":{"editformbutton":true}},{"name":"id","align":"center","width":33,"editable":false,"hidden":true},{"name":"uid","align":"center","width":33,"editable":true,"hidden":true,"editrules":{"edithidden":false,"required":false}},{"name":"ta_id","align":"center","width":100,"editrules":{"required":true}},{"name":"image","width":150,"template":"text","editrules":{"required":true}},{"name":"x","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"y","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"gender","width":100,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"edittype":"select","editoptions":{"value":"f:Female;m:Male","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;f:Female;m:Male"}},{"name":"progress","width":120,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"editable":false,"edittype":"select","editoptions":{"value":"-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing...","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing..."}},{"name":"status","width":100,"align":"center","formatter":"select","stype":"select","edittype":"select","editoptions":{"value":"a:Active;n:New","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;a:Active;n:New"}},{"name":"date_created","width":150,"template":"text","editable":false},{"name":"last_updated","width":150,"template":"text","editable":false}]

And here is my actual data from my server (db) as per jqgrid specification:

{"page":1,"total":1,"records":7,"rows":[{"id":32,"cell":[32,"889daf31ff3e49544f52850258439600","2uu","2ok",2,2,"m","-","a","2017-02-10 18:57:05","2017-02-10 23:37:12"]},{"id":30,"cell":[30,"","11","11",1,1,"m","-","a","2017-02-10 18:01:52","2017-02-10 18:01:52"]},{"id":29,"cell":[29,"aaa","ww222111uu","11",1,1,"m","-","a","2017-02-10 18:00:36","2017-02-10 23:37:08"]},{"id":27,"cell":[27,"","11","1",1,1,"m","-","a","2017-02-10 17:57:41","2017-02-10 17:57:41"]},{"id":25,"cell":[25,"","4tt","4img",4,4,"f","-","n","2017-02-10 17:50:21","2017-02-11 00:26:03"]},{"id":24,"cell":[24,"","1","1",1,1,"m","-","a","2017-02-10 17:49:38","2017-02-10 17:49:38"]},{"id":22,"cell":[22,"","bbb","imam 222",2,22,"f","p","n","2017-02-08 20:14:55","2017-02-10 13:27:57"]}]}

As you can see cell row has less columns than colNames and colModel. Also id and uid columns are hidden. I added on extra fake column from db, but it did not help

i am using jqGrid 4.13.7-pre

Upvotes: 1

Views: 166

Answers (1)

Oleg
Oleg

Reputation: 221997

I'd recommend you to return objects like

{
    "id": 32,
    "uid": "889daf31ff3e49544f52850258439600",
    "ta_id": "2uu",
    "image": "2ok",
    "x": 2,
    "y": 2,
    "gender": "m",
    "progress": "-",
    "status": "a",
    "date_created": "2017-02-10 18:57:05",
    "last_updated": "2017-02-10 23:37:12"
}

instead of 

{
    "id": 32,
    "cell": [
        32, "889daf31ff3e49544f52850258439600", "2uu", "2ok", 2, 2, "m", "-", "a",
        "2017-02-10 18:57:05", "2017-02-10 23:37:12"
    ]
}

as the server response. It will simplify your code.

If you do need to process the current format of the data, then you will have to force repeatitems: false mode by usage the option

jsonReader: {
    repeatitems: false
}

and to use jsonmap property of colModel to inform jqGrid from which element of the item one should read the column data. The jsonmap could be either in the string form like

jsonmap: "cell.1"

or in the function form:

jsonmap: function (item) {
    return item.cell[1];
}

To make the code better maintainable you can define an object like

var columnOrder = {
        id: 0,
        uid: 1,
        ta_id: 2,
        image: 3,
        x: 4,
        y: 5,
        gender: 6,
        progress: 7,
        status: 8,
        date_created: 9,
        last_updated: 10
    };

which provides the index in cell array by the column name and to use jsonmap like

jsonmap: function (item) {
    return item.cell[columnOrder.uid];
}

The demo https://jsfiddle.net/OlegKi/ozzgnaeh/2/ demonstrates the approach.

Upvotes: 1

Related Questions