Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You code small simple errors, but the main problem which you have is that your code are made to add simple rows and not tree nodes. You can go on <a href="http://trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow noreferrer">the official demo page</a> and choose under "New in version 3.4" the demo "Tree Grid Adjacency model".</p> <p>I wrote <a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree.htm" rel="nofollow noreferrer">the demo</a> which work exactly like the demo from the demo from the trirand demo page, but <strong>use only local data</strong>:</p> <p><img src="https://i.stack.imgur.com/ookdN.png" alt="enter image description here"></p> <p>In you case you have to extend the objects from <code>mydata</code> with the properties <code>level</code>, <code>parent</code>, <code>isLeaf</code>, <code>expanded</code>:</p> <pre><code>var mydata = [ {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1", level:"0", parent:"", isLeaf:false, expanded:false}, {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1", level:"1", parent:"1", isLeaf:false, expanded:false}, {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1", level:"2", parent:"1_1", isLeaf:true, expanded:false}, {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1", level:"1", parent:"1", isLeaf:true, expanded:false}, {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2", level:"0", parent:"", isLeaf:false, expanded:true}, {id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2", level:"1", parent:"2", isLeaf:true, expanded:false}, {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2", level:"1", parent:"2", isLeaf:true, expanded:false}, {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3", level:"0", parent:"", isLeaf:false, expanded:false}, {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3", level:"1", parent:"3", isLeaf:true, expanded:false}, {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3", level:"1", parent:"3", isLeaf:true, expanded:false} ]; </code></pre> <p>Here I modified a little id values, because points should not used in ids. Additionally I set the <code>expanded</code> status of the "Main Menu1" to <code>true</code> to demonstrate only that you can expanded some nodes automatically immediately after the loading.</p> <p>I modified the jqGrid definition to the following</p> <pre><code>$("#treegridsamp").jqGrid({ datatype: "local", data: mydata, // will not used at the loading, // but during expanding/collapsing the nodes colNames:['id','Name','MenuId','Menu Name'], colModel:[ {name:'id',index:'id',width:100,hidden:true}, {name:'Name',index:'Name',width:150}, {name:'MenuId',index:'MenuId',width:100}, {name:'MenuName',index:'MenuName',width:100} ], height:'auto', //pager : "#ptreegrid", sortname: 'id', treeGrid: true, treeGridModel: 'adjacency', treedatatype: "local", ExpandColumn: 'Name', caption: "Sample Tree View Model" }); </code></pre> <p>I made the 'id' column hidden and reduced the grid size. To add the data I used <code>addJSONData</code> method because it will set the tree nodes </p> <pre><code>$("#treegridsamp")[0].addJSONData({ total: 1, page: 1, records: mydata.length, rows: mydata }); </code></pre> <p>As the result you will receive</p> <p><img src="https://i.stack.imgur.com/iyS3M.png" alt="enter image description here"></p> <p>You can see the demo live <a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree-hkv.htm" rel="nofollow noreferrer">here</a>.</p> <p><strong>UPDATED</strong>: If you use jqGrid version 4.0 or higher it is important to set <code>loaded:true</code> property for the tree nodes if you want have expanded. For example in the above example the "Main Menu1" item is a node (<code>isLeaf:false</code>) which should be display expanded (<code>expanded:true</code>), so one should add <code>loaded:true</code> for the item definition:</p> <pre><code>{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true} </code></pre> <p>For more examples see <a href="https://stackoverflow.com/questions/5817489/access-jqgrid-elements-using-a-javascript/5819136#5819136">here</a>, <a href="https://stackoverflow.com/questions/5862336/jqgrid-autoloading-treegrid-issue/5867537#5867537">here</a>, <a href="https://stackoverflow.com/questions/6507186/is-it-possible-to-have-html-inside-of-a-jqgrid-treegrid-cell/6509041#6509041">here</a> and <a href="https://stackoverflow.com/questions/6521059/in-jqgrid-treegrid-how-can-i-specify-that-i-want-the-data-collapsed-by-default/6527790#6527790">here</a>.</p> <p><strong>UPDATED 2</strong>: To have sorting work correctly one have to use <strong><code>parent:null</code> or <code>parent:"null"</code> instead of <code>parent:""</code></strong> see <a href="https://stackoverflow.com/questions/7330572/sorting-of-jqgrid-v4-1-2-treegrid-not-working-with-ajacency-model/7332627#7332627">here</a> for more details.</p>
    singulars
    1. This table or related slice is empty.
    1. POJqgrid Tree View Adjacencey
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USOleg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POJqgrid Tree View Adjacencey
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@Oleg: Thanks for this beautiful stuff with your help i have learnt and understood adjacency model and i have completed my task after doing some modification as per my requirement....
      singulars
      1. PO
      1. UShkv
    2. CO@hkv: You are welcome! I have seen that you has 0 votes in your profile. Probably you don't know, that starting with 15 reputation points you have right to vote up any answer or question. There are [the simple rule](http://stackoverflow.com/faq#howtoask): "As you see new answers to your question, vote up the helpful ones by clicking the upward pointing arrow to the left of the answer.". Voting is very important for the stackoverflow and I recommend you to use it.
      singulars
      1. PO
      1. USOleg
    3. CO@hkv: I wanted to write in trirand forum small suggestion to make small changes in jqGrid code to allow to use `data` with tree grid **without** needed to make additional call of `addJSONData`. So I hope that in the next version of jqGrid it will be not more needed.
      singulars
      1. PO
      1. USOleg
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload