jqGrid change dynamically edittype for specific row

Question

Following to this post where I found some way to do that I would want to get, I meet some trouble with it. Here is my code : ``` var myDlg = $("#dlgpers"),lastsel; myDlg.jqGrid({ url:'pers.php?id='+dataRow.id, mtype:'GET', datatype: "json", ajaxGridOptions: { cache: false }, height:250, cmTemplate: {sortable:false}, gridview: true, cellEdit:true, scroll:false, colNames:['Id','Label','Information','Type','Data'], colModel:[ {name:'id',index:'id',hidden:true,key:true}, {name:'label',index:'label',align:'right',width:100,editable:false, cellattr: function (rowId, val, rawObject, cm, rdata) { return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"' ; } }, {name:'info',index:'info',width:200,editable:true,edittype:'text'}, {name:'type',index:'type',width:30,hidden:true}, {name:'data',index:'data',width:30,hidden:true} ], loadComplete: function () { var rowIds = myDlg.jqGrid('getDataIDs'); $.each(rowIds, function (i, row) { var rowData = myDlg.…

Accepted Answer

I think that many from the problems in your code common. So I tried to answer on you question more detailed.

First of all you posted wrong JSON data. The line

```
{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},
```

contains two errors:

- no ':' after "cell"

- no `"` after `"Service`

After the changes the line will be so

```
{"cell":[4,"Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]},
```

and JSON data could be read. The next problem is the usage of numbers together with string in one array. Because the bug in the line of jqGrid code

```
idr = ccur !== undefined ? ccur[idn] || idr : idr;
```

ids could not be integer value 0. I posted the bug report about the error. To fix the problem using existing code of jqGrid you should use strings instead of numbers. For example the line

```
{"cell":[0,"Nom ","LEBRUN","text",""]},
```

should be changed to

```
{"cell":["0","Nom ","LEBRUN","text",""]},
```

Without the changes you will have id duplicates. Both first lines (`{"cell":[0,"Nom ","LEBRUN","text",""]}` and `{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},`) will get the same id equal to 1 instead of 0 and 1. It was the main reason of the problem which you described.

Additionally I would recommend you the following:

- remove `cellEdit:true` option. You use `editRow` later in the code. It means that you use inline editing instead of cell editing which means `cellEdit:true`. You can't combine both editing modes in one grid.

- replace `height:250` option to `height:"auto"`

- remove all `index` properties from `colModel`. Remove all properties of `colModel` with default values (`edittype:'text'`, `editable:false`)

- remove options of jqGrid with default values (`mtype:'GET'`, `scroll:false`)

- all parameters of functions in JavaScript are optional. So if you don't use for example any parameters of `cellattr` callback you can replace `cellattr: function (rowId, val, rawObject, cm, rdata) {...}` to `cellattr: function () {...}`

- the callback `loadComplete` has one parameter `data` which can provide you all data which returned from the server. So you don't need to use `getDataIDs` and `getRowData`. The array `data.rows` can by directly used.

- if you use `data` parameter of `loadComplete` callback you can remove unneeded `'type'` and `'data'` columns from the grid.

- if you place information about `id` after `'Label','Information'` then you can use `id` property of `jsonReader` and remove hidden `id` column from the grid too. For example if you move `id` as the last in the `cell` array you can use `jsonReader: {id: 4}` and remove hidden `id` column from the grid. If you add additionally `cell: ""` property in `jsonReader` you can remove `"cell":` from the input data. If you would use `root` property of `jsonReader` defined as function (see the documentation) you can remove some unneeded data from the server response.

For example the server can produce the simplified data

```
[
["Nom ","LEBRUN","text","","0"],
["Pr\u00e9nom ","Jacques","text","","1"],
["Initiales ","LJ","text","","2"],
["Fonction ","","text","","3"],
["Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests","4"],
["T\u00e9l\u00e9phone ","","text","","5"],
["Email ","","text","","6"],
["Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int","7"],
["Entr\u00e9 le ","2008-10-06","text","","8"],
["Sorti le ","0000-00-00","text","","9"]
]
```

The corresponding jqGrid could be

```
$("#dlgpers").jqGrid({
    url: "pers.php?id=" + dataRow.id,
    datatype: "json",
    height: "auto",
    cmTemplate: {sortable: false},
    gridview: true,
    colNames: ["Label", "Information"],
    colModel: [
        {name: "label", align: "right", width: 100,
            cellattr: function () {
                return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"';
            }},
        {name: "info", width: 200, editable: true}
    ],
    jsonReader: {id: 4, cell: "", root: function (obj) { return obj; } },
    loadComplete: function (data) {
        var $self = $(this),
            cm = $self.jqGrid("getColProp", "info"),
            idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
            l = data.length,
            i,
            item;

for (i = 0; i < l; i++) {
            item = data[i];
            cm.edittype = item[2] === "select" ? "select" : "text";
            cm.editoptions = { value: item[3] };
            $self.jqGrid("editRow", idPrefix + item[4]);
        }
    },
    idPrefix: "dlg",
    rowNum: 10000 // to have no paging
});
```

See the demo:

jqGrid change dynamically edittype for specific row

Solution

Problem

Related problems