Something Similar to Treegrid in Jqgrid

something similar to treegrid in jqGrid

It seems to me, that what you really try to implement is grouping of the data by subCategory. I strictly recommend you to look at the official demo page of jqGrid to see different possibilities which it can.

Your code have one more general problem. You use name and index properties inside of colModel items in the form 'attribute[0].firstValue' which is not permitted. The name property and, in case of the local data also index property, can't contain any special characters. What you need to read your JSON data is to use additional jsonmap property:

{ name: 'firstValue', index: 'firstValue', width: 350, jsonmap:'attribute.0.firstValue' },
{ name: 'secondValue', index: 'secondValue', width: 350,jsonmap:'attribute.0.secondValue' }

Additionally you should define one more column which you will use for grouping of the data:

{ name: 'subCategory', index: 'subCategory' }

To use grouping you should add following options in the jqGrid definition:

grouping: true,
groupingView: {
    groupField: ['subCategory'],
    groupOrder: ['desc'],
    groupDataSorted : true,
    groupColumnShow: [false],
    groupText: ['<b>{0} - {1} Item(s)</b>']
}

The setting groupColumnShow: [false] hide the subCategory column used in grouping.

If you want to hide the grouping header over all groups excepting the "envVariable" group and collapse "envVariable" group you can do this in the following way:

loadComplete: function() {
    var i, names=this.p.groupingView.sortnames[0], l = names.length;
    for (i=0;i<l;i++) {
        if (names[i]==='envVariable') {
            $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
        } else {
            // hide the grouping row
            $('#'+this.id+"ghead_"+i).hide();
        }
    }
}

After all you will have the following:

After the click on the "+" icon in the grouping header of the "envVariable" group the details will be shown:

The corresponding demo you will find here. I included page: function() { return 1; } in the jsonReader additionally to show correct page number.

If you want to see only "envVariable" text in the grouping header you should replace groupText: ['<b>{0} - {1} Item(s)</b>'] to groupText: ['{0}'].

is there any similar treegrid similar to jqGrid Treegrid but supports frozen columns

Not out-of-the-box solution, but you could try slickGrid

Unfortunately it doesn't provide fixed columns functionality (yet), but there is fork, that has frozen columns you can use

UPDATE

You may also take look at jQuery EasyUI -

Sample

Jqgrid treegrid Data format

It's important to understand that the current implementation of old jqGrid, commercial Guriddo jqGrid JS (which you use currently) and free jqGrid suppose specific order of items in the input data. The nodes or leafs have to follow its parent node.

The items with ids from 4 till 6 contains the property "p_id": "2". It means that one have to move the items to place there directly after the item "id": "2" (between the item "id": "2" and the item "id": "3"). It should fix the problem, which you describes.

jqGrid tree grid with local data

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:"".

Can jqgrid tree grid show user-defined icon

The input data of the TreeGrid can contain icon property with the class name, which specify the icon of the tree leaf. The value of node properties should contain two classes: one for expanded node and one more for collapsed node. For example

[
    { ...
        level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true,
        icon: "ui-icon-folder-open,ui-icon-folder-collapsed" },
    { ...
        level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true,
        icon: "ui-icon-flag" },
    { ...
        level: "2", parent: "2", isLeaf: true, expanded: false, loaded: true,
        icon: "ui-icon-star" },
    ...
]

The demo https://jsfiddle.net/OlegKi/4svafpub/3/ demonstrates the TreeGrid, which displays

You don't posted any details what you do. No version of jqGrid, which you use, no information about the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). It's unknown which CSS framework you use: jQuery UI or Bootstrap and which icon set (jQuery UI icons, Font Awesome 4.x, glyph icons of Bootstrap ...). The exact implementation of your requirements will depends on the information. In any way you will have to choose the icons classes from the set of icons, which you use or you will need to define custom CSS classes, which you will use for TreeGrid nodes and leafs, and to define CSS rules, which specify all required CSS properties: background-image, background-position and so on. As the result you will be able to display any icon which you need.

UPDATED: It seems to me that icon will be used only for leafs, not for nodes as it is described above.

UPDATED 2: I made some changes in the code of free jqGrid and now one can specify the icons for the nodes of TreeGrid. The same code with updated version of free jqGrid displays

See the demo https://jsfiddle.net/OlegKi/4svafpub/4/

in jqgrid treegrid, how can i specify that i want the data collapsed by default (even though all data is loaded)

You don't included in the question neither jqGrid definition nor the test JSON or XML data which you use to fill the three grid. I suppose, that you filled the 'expanded' column of the tree grid with true. The hidden column 'expanded' exist in the tree grid for both mode Nested Set Model and Adjacency Model. If you would set false in the column the tree will be not expended. See here an example.

You should take a look in the next-to-last column of the AdjacencyTree.json. It contains false, so no tree node will be expanded. The contain of the hidden columns from the JSON file are the following

level parent isLeaf expanded loaded
-----------------------------------
  0          false    false   true
  1     1    false    false   true
  2     2     true    false   true
  2     2    false    false   true
  3     4     true    false   true
  2     2     true    false   true
  1     1    false    false   true
  2     7    false    false   true
  3     8     true    false   true
  3     8     true    false   true
  2     7     true    false   true

jqGrid tree grid with pager

Tree grid has some limitations which are documented:

Pager functionality currently disabled
for treeGrid

In other place of the documentation you can read almost the same:

Since jqGrid currently does not
support paging, when we have a
treegrid the pager elements are
disabled automatically.

jqGrid. Tree grid with local data and special field loaded

TreeGrid was implemented originally so that it holds all additional information about the tree structure in hidden columns of jqGrid. Later jqGrid starts to supports local data, but the hidden columns still exists in every row.

Old versions of TreeGrid can load only the data from the server. At the beginning jqGrid needs to load only the root nodes (the nodes which parent is null). If the node need be expanded then new Ajax request with additional parameters nodeid, parentid and n_level (or nodeid, n_left, n_right, n_level in case of usage treeGridModel: "nested") will be sent to url. The server should returns the data based on the parameters. Once the data will be loaded and the node need be collapsed the children will be make just hidden using display: none CSS style. Next time jqGrid should don't load the data from the server once more. Instead of that jqGrid just show children of the node. Exactly in the case the loaded column (the hidden column) of the parent node will hold true value.

In case of creating TreeGrid with local data all works exactly like described above. It's a pity, but TreeGrid don't support datatype: "local" till now, but one can do almost the same by usage datatype: "jsonstring". My old answer which you referenced in your question demonstrates the approach. Because the structure of jqGrid (TreeGrid) is still oriented of remote loading one should just set loaded:true property on all nodes of the data. As the result the remote TreeGrid works without any additional communication with the server. All the data will be loaded at once, but collapsed node fill follows hidden children.

So one can say, that the usage of loaded:true property is a hack which allows to load all TreeGrid data at once and to make late expanding or collapsing of nodes without any additional communication with the server.

jqGrid Treegrid is not rendering as a treegrid

You use the values from SiteID column in parent, but you don't informs jqGrid about that. Moreover it't unclear how you fill the grid with the data.

datatype: "jsonstring",
datastr: mydata,
jsonReader: { id: "SiteID" }

where mydata is the input data which you posted. Look at https://jsfiddle.net/rfwvovub/2/, which fixes the grid. I used free jqGrid in the demo, but the same, I think, should work with old versions of jqGrid too.

---

Related Topics