Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I find the question interesting, but I think that one can better use individual icons for the tree nodes. If you do need to set CSS style per row I can you forward to <a href="https://stackoverflow.com/a/6575634/315935">the answer</a> and <a href="https://stackoverflow.com/a/5690583/315935">this one</a>. You should just change the test criteria in the demos to test the content of the hidden <code>level</code> column.</p> <p>So I created <a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree11.htm" rel="nofollow noreferrer">the demo</a> which demonstrate how you can set individual icons per node level:</p> <p><img src="https://i.stack.imgur.com/DYFFG.png" alt="enter image description here"></p> <p>First of all I should mention, that TreeGrid supports individual icons for leafs out-of-the-box. You can just add <code>icon</code> property to the posted data. The value of the property should be the CSS class which will be added to the <code>div</code> which represent the icon. For example <code>icon: "ui-icon-star"</code>. The standard class for the icon is "ui-icon-radio-off". Additionally the div receive the classes "ui-icon tree-leaf treeclick". So if you find the icon which you need in the standard <a href="http://wiki.jqueryui.com/w/page/12137970/jQuery%20UI%20CSS%20Framework" rel="nofollow noreferrer">jQuery UI icons</a> the changing if the icon of the leaf will be very easy.</p> <p>Non-leaf tree nodes have two icons: one in the collapsed form and another in the expanding form. There are no simple way to change the icons per jqGrid configuration, but you can implement the requirement by writing an additional JavaScript code inside of <code>loadComplete</code> and with respect of chaining (overwriting or subclassing) of <code>expandNode</code> and <code>collapseNode</code> method like I suggested <a href="https://stackoverflow.com/a/9181899/315935">here</a>.</p> <p>In the demo I just changed the icons of the top-level tree nodes. In the same way you can change icons on any other level. Below you find the most important parts of the code from my demo:</p> <pre class="lang-js prettyprint-override"><code>var $grid = $("#treegrid"), orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode; $grid.jqGrid({ .... loadComplete: function (data) { var item, i, l = data.length || 0; for (i = 0; i &lt; l; i++) { item = data[i]; if (!item.isLeaf &amp;&amp; (item.level === "0" || item.level === 0)) { if (item.expanded) { $("#" + item.id + " div.treeclick") .removeClass("ui-icon-triangle-1-s") .addClass("ui-icon-carat-1-s"); } else { $("#" + item.id + " div.treeclick") .removeClass("ui-icon-triangle-1-e") .addClass("ui-icon-carat-1-e"); } } } } }); $.jgrid.extend({ expandNode: function (rc) { var ret = orgExpandNode.call(this, rc); if (!rc.isLeaf &amp;&amp; (rc.level === "0" || rc.level === 0)) { $("#" + rc._id_ + " div.treeclick") .removeClass("ui-icon-triangle-1-s ui-icon-carat-1-e") .addClass("ui-icon-carat-1-s"); } return ret; }, collapseNode: function (rc) { var ret = orgCollapseNode.call(this, rc); if (!rc.isLeaf &amp;&amp; (rc.level === "0" || rc.level === 0)) { $("#" + rc._id_ + " div.treeclick") .removeClass("ui-icon-triangle-1-e ui-icon-carat-1-s") .addClass("ui-icon-carat-1-e"); } return ret; } }); </code></pre> <p><strong>UPDATED</strong>: I thought a little more about the problem of tree icons and modified the code to <a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree12.htm" rel="nofollow noreferrer">the new demo</a>.</p> <p>I decided that it would be more practicable to be able to define icons of the tree node exactly like for the leafs. Because one need to specify two icons one can separate the classes for collapsed and expanded icons by comma. For example: <code>icon: "ui-icon-carat-1-e,ui-icon-carat-1-s"</code>. The code can be rewritten to the following:</p> <pre class="lang-js prettyprint-override"><code>var $grid = $("#treegrid"), orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode, changeTreeNodeIcon = function (item) { var icons, $div, id; if (!item.isLeaf &amp;&amp; typeof item.icon === "string") { icons = item.icon.split(','); if (icons.length === 2) { id = item[this.p.localReader.id] || item[this.p.jsonReader.id]; $div = $("#" + $.jgrid.jqID(id) + " div.treeclick"); if (item.expanded) { $div.removeClass(icons[0]) .removeClass("ui-icon-triangle-1-s") .addClass(icons[1]); } else { $div.removeClass(icons[1]) .removeClass("ui-icon-triangle-1-e") .addClass(icons[0]); } } } }; $grid.jqGrid({ .... loadComplete: function (data) { var item, i, l = data.length || 0; for (i = 0; i &lt; l; i++) { item = data[i]; changeTreeNodeIcon.call(this, item); } } }); $.jgrid.extend({ expandNode: function (rc) { var ret = orgExpandNode.call(this, rc); changeTreeNodeIcon.call(this[0], rc); return ret; }, collapseNode: function (rc) { var ret = orgCollapseNode.call(this, rc); changeTreeNodeIcon.call(this[0], rc); return ret; } }); </code></pre> <p><strong>UPDATED</strong>: I posted <a href="http://www.trirand.com/blog/?page_id=393/feature-request/extend-treegrid-functionality-to-support-icons-assinged-per-node/#p26211" rel="nofollow noreferrer">the feature request</a> and <a href="https://github.com/tonytomov/jqGrid/pull/277" rel="nofollow noreferrer">the pull request</a> which add the described above functionality to TreeGrid.</p>
    singulars
    1. This table or related slice is empty.
    1. POjqgrid treegrid custom css-class for each tree-level
      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 treegrid custom css-class for each tree-level
      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. COThank you Oleg. Very good answer!
      singulars
      1. PO
      1. USdegressor
    2. CO@gleb: You are welcome! If you have problem with horizontal scrolling of Tree Grid with many columns [another answer](http://stackoverflow.com/a/6509495/315935) can give you ideas how to improve the situation.
      singulars
      1. PO
      1. USOleg
    3. CO@gleb: I posted just now [the feature request](http://www.trirand.com/blog/?page_id=393/feature-request/extend-treegrid-functionality-to-support-icons-assinged-per-node/#p26211) and [the pull request](https://github.com/tonytomov/jqGrid/pull/277) which add the described above functionality to TreeGrid.
      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