First of all you should fix the JSON data:
- replace
"parent": ""
to"parent": "null"
in the root element - you should invert the values of
isLeaf
property: change alltrue
values tofalse
and change allfalse
values totrue
- you should remove
"cell"
part from all items - The value
"records": 1
don't corresponds 4 items of data. I suppose that the correct value should be"records": 4
, but the best will be to remove thepager
from the list of options of the grid. In the case setting of anypage
,total
orrecords
will be not important.
You can more simplify the data and remove the rows
part from JSON data. In the case we have to change the root
property of jsonReader
to root: function (obj) { return obj; }
. As the result you can use the following simple JSON data:
[
{
"id": "1",
"name": "ECHANGEUR",
"level": "0",
"parent": "null",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1",
"name": "Intervention Aller sur Site",
"level": "1",
"parent": "1",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1_1",
"name": "Date et heure d'arrivée sur le site",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
},
{
"id": "1_1_2",
"name": "Consignation de l'échangeur",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
}
]
The demo demonstrate the results of the changes. After extending the grid looks like on the picture below
The code which I used in the demo is:
$("#grid").jqGrid({
url: "user2132268.json",
datatype: "json",
colNames: [ 'id', 'Prestations'],
colModel: [
{name: 'id', width: 100, key: true, hidden: true},
{name: 'name', width: 785, sortable: false}
],
sortname: 'id',
sortorder: "asc",
hiddengrid: true,
gridview: true,
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: 'name',
ExpandColClick: true,
jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
height: "auto"
});