CODEWITHSUNDEEP
jqgrid
Permana
Permana

Reputation: 1991

Creating tree grid using jqGrid with json data

I'm trying to create tree using json data

I have:

json data:

{
   "page":"1",
   "total":4,
   "records":36,
   "rows":{
      "1":{
         "taxonomy_id":"1",
         "taxonomy_type_id":"product",
         "parent_id":null,
         "name":"Agriculture",
         "slug":"agriculture",
         "description":"Agriculture",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":null,
         "level":1,
         "is_leaf":true
      },
      "4":{
         "taxonomy_id":"4",
         "taxonomy_type_id":"product",
         "parent_id":"1",
         "name":"Rice",
         "slug":"rice",
         "description":"Rice",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":"Agriculture",
         "level":2,
         "is_leaf":true
      },
      "5":{
         "taxonomy_id":"5",
         "taxonomy_type_id":"product",
         "parent_id":"1",
         "name":"Apples",
         "slug":"apples",
         "description":"Apples",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":"Agriculture",
         "level":2,
         "is_leaf":true
      },
      "6":{
         "taxonomy_id":"6",
         "taxonomy_type_id":"product",
         "parent_id":"1",
         "name":"Olive Oil",
         "slug":"olive-oil",
         "description":"Olive Oil",
         "sort_order":"0",
         "is_visible":"1",
         "data":"",
         "parent_name":"Agriculture",
         "level":2,
         "is_leaf":true
      },
      "2":{
         "taxonomy_id":"2",
         "taxonomy_type_id":"product",
         "parent_id":null,
         "name":"Apparel",
         "slug":"apparel",
         "description":"Apparel",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":null,
         "level":1,
         "is_leaf":true
      },
      "7":{
         "taxonomy_id":"7",
         "taxonomy_type_id":"product",
         "parent_id":"2",
         "name":"Clothes",
         "slug":"clothes-2",
         "description":"Clothes",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":"Apparel",
         "level":2,
         "is_leaf":true
      },
      "8":{
         "taxonomy_id":"8",
         "taxonomy_type_id":"product",
         "parent_id":"7",
         "name":"Men's Clothing",
         "slug":"mens-clothing",
         "description":"Men's Clothing",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":"Clothes",
         "level":3,
         "is_leaf":true
      },
      "3":{
         "taxonomy_id":"3",
         "taxonomy_type_id":"product",
         "parent_id":null,
         "name":"Automobiles & Motorcycles",
         "slug":"automobiles-motorcycles",
         "description":"Automobiles & Motorcycles",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":null,
         "level":1,
         "is_leaf":true
      },
      "9":{
         "taxonomy_id":"9",
         "taxonomy_type_id":"product",
         "parent_id":null,
         "name":"Hardware",
         "slug":"hardware",
         "description":"Hardware",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":null,
         "level":1,
         "is_leaf":true
      },
      "10":{
         "taxonomy_id":"10",
         "taxonomy_type_id":"product",
         "parent_id":null,
         "name":"Computer Hardware & Software",
         "slug":"computer-hardware-software",
         "description":"Computer Hardware & Software",
         "sort_order":"0",
         "is_visible":"1",
         "data":null,
         "parent_name":null,
         "level":1,
         "is_leaf":true
      }
   }
}

javascript code like this:

/* grid */  
    $('#the-grid').jqGrid({
        url: SITE_URL+'/admin/taxonomy/taxo_data/category',
        datatype: 'json',
        mtype: 'GET',
        colNames:['ID', 'Parent ID', 'Parent', 'Name', 'Description', 'Machine Code', 'Sort Order', 'Is Visible', 'Data', 'Type'], 
        colModel:[ 
            {name:'taxonomy_id',index:'taxonomy_id', width:15, jsonmap: 'taxonomy_id'}, 
            {name:'parent_id',index:'parent_id', width:15, jsonmap: 'parent_id'}, 
            {name:'parent_name',index:'parent_name', width:15, jsonmap: 'parent_name'}, 
            {name:'name',index:'name', width:15, jsonmap: 'name'}, 
            {name:'description',index:'description', width:15, jsonmap: 'description'}, 
            {name:'slug',index:'slug', width:15, jsonmap: 'slug'}, 
            {name:'sort_order',index:'sort_order', width:15, jsonmap: 'sort_order', align: 'right'}, 
            {name:'is_visible',index:'is_visible', width:15, jsonmap: 'is_visible', formatter: boolFormatter, unformat: boolUnFormatter, formatoptions: {iconTrue: 'ui-icon-check', iconFalse: 'ui-icon-minus'}, align:'center'}, 
            {name:'data',index:'data', width:15, jsonmap: 'data', hidden:true}, 
            {name:'taxonomy_type_id',index:'taxonomy_type_id', width:15, jsonmap: 'taxonomy_type_id', hidden:true}
        ],
        editurl:SITE_URL+'/admin/taxonomy/taxo_crud',
        rowNum: 10,
        rowList: [10, 25, 50, 75, 100],
        pager: '#the-grid-pager',
        autowidth: true,
        sortname: 'taxonomy_id',
        sortorder: 'ASC',
        height: 400,
        viewrecords: true,
        treeGridModel:'adjacency',
        caption: 'Taxonomy Items',
        jsonReader : { 
            root: "rows", 
            page: "page", 
            total: "total", 
            records: "records", 
            repeatitems: false, 
            cell: "", 
            id: "taxonomy_id"
        }
    });
    $('#the-grid').jqGrid('navGrid','#the-grid-pager',{edit:false,add:false,del:false, search: false});

Data is loaded, but the grid is not shown up. What could be the problem ?Is my json data format correct ?

Upvotes: 0

Views: 2978

Answers (1)

Oleg
Oleg

Reputation: 221997

There are many errors in both JSON data and in the grid.

I start with the JSON data. The rows must be an array and not an object with properties 1,2,3... Such object will have no length property and so will not be able to be read by jqGrid. So to fix the problem you should use

"rows":[
    {
        "taxonomy_id":"1",
        ...
    },
    ...
]

instead of

"rows":{
    "1":{
        "taxonomy_id":"1",
        ...
    },
    ...
}

The next problem are the jqGrid specific properties: parent, level, isLeaf, loaded. If you want to load children of the node instead of loading the child nodes on demand you should include loaded:true for the nodes.

In the JSON you use the name of some TreeGrid properties which not corresponds to the default names. So you should either rename the parent_id and is_leaf properties to parent and isLeaf or use additional jqGrid option

treeReader: {parent_id_field: "parent_id", leaf_field: "is_leaf"}

In the jqGrid you have to define the most important parameters of the Tree Grid:

treeGrid: true,
ExpandColumn: 'taxonomy_id',

No jsonmap is required in the colModel and the properties can be removed.

Upvotes: 2

Related Questions