jqGrid tree grid with local data

Question

jqGrid docs for tree grid says:

"Currently jqGrid can work only with data returned from server. There are some tricks and articles which describes how to work with local data."

Fair enough, but I was unable to find such articles. Any hints on how I can achieve it, preferably with equivalent of datatype=local?

If you read my answer before look at the modified answer. – Oleg Jul 22 '11 at 11:55 — Oleg, Jul 22 '11 at 11:55

score 8 · Accepted Answer · edited May 23 '17 at 12:06

Probably this old answer could help you. The demo which used the last current version of jqGrid you can find here.

UPDATED: Now I would be prefer to use datatype: "jsonstring" which is almost the same as datatype: "local". One need to use datastr: mydata instead of data: mydata in the case. Additionally one have to use jsonReader as function. As the result one will have the following modified demo.

The corresponding code of the demo you find below

var mydata = [
    { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
      level:"0", parent:"",  isLeaf:false, expanded:false, loaded:true },
    { id:"2", name:"Cash 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
      level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
    { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
      level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
    { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
      level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
    { id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
      level:"0", parent:"",  isLeaf:false, expanded:true, loaded:true },
    { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
    { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
      level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
    { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
      level:"0", parent:"",  isLeaf:true,  expanded:false, loaded:true }
    ],
    grid = $("#treegrid");

grid.jqGrid({
    datatype: "jsonstring",
    datastr: mydata,
    colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
    colModel:[
        {name:'id', index:'id', width:1, hidden:true, key:true},
        {name:'name', index:'name', width:180},
        {name:'num', index:'acc_num', width:80, align:"center"},
        {name:'debit', index:'debit', width:80, align:"right"},
        {name:'credit', index:'credit', width:80,align:"right"},
        {name:'balance', index:'balance', width:80,align:"right"},
        {name:'enbl', index:'enbl', width: 60, align:'center',
         formatter:'checkbox', editoptions:{value:'1:0'},
         formatoptions:{disabled:false}}
    ],
    height: 'auto',
    gridview: true,
    rowNum: 10000,
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'name',
    caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});

UPDATED 2: One should use parent:"null" or parent:null instead of parent:"".

I have TreeGrid working with local data as the example you have linked. The only problem i have is that local search is not working at all. Any ideas? — nvrs, Aug 26 '11 at 14:14
I have TreeGrid working with local data as shown here. The only problem i have is that local search is not working at all. Any ideas? If i disable treegrid, search is working properly as expected. — nvrs, Aug 26 '11 at 14:16
@nvrs: You are right the treegrid can't be filtered because of the [return](https://github.com/tonytomov/jqGrid/blob/v4.1.2/js/grid.base.js#L1418). — Oleg, Aug 26 '11 at 15:35
@hello_amigo: It's better that you ask new question about that and I post my answer with description. Only in the way other people could find the information on the stackoverflow. Probably other people have an interest in the same question? — Oleg, Dec 09 '14 at 08:54
@Oleg done. Here is a [link](http://stackoverflow.com/q/27387267/877035). Thanks in advance. — amigo, Dec 09 '14 at 19:33

jqGrid tree grid with local data

1 Answers1

Linked