Results 1 to 4 of 4

Thread: A Patch for indenting DwtTreeItem nodes

  1. #1
    Join Date
    Nov 2005
    Posts
    5
    Rep Power
    9

    Default A Patch for indenting DwtTreeItem nodes

    Hi,

    I wanted the children nodes to be indented with respect to their parents. So I inserted n blank NodeCells to the left of the node icon. Here n is tree node's depth. Here is the diff:

    --- spc/server/web/docroot/js/ajax/dwt/widgets/DwtTreeItem.js (revision 304)
    +++ spc/server/web/docroot/js/ajax/dwt/widgets/DwtTreeItem.js (working copy)
    @@ -26,10 +26,14 @@
    // NOTE: Where you see the word "deferred", think "uninitialized"
    function DwtTreeItem(parent, index, text, imageInfo, deferred, className, posStyle) {

    - if (parent instanceof DwtTree)
    + if (parent instanceof DwtTree) {
    this._tree = parent;
    - else if (parent instanceof DwtTreeItem)
    + this._depth = 1;
    + }
    + else if (parent instanceof DwtTreeItem) {
    this._tree = parent._tree;
    + this._depth = parent._depth + 1;
    + }
    else
    throw new DwtException("DwtTreeItem parent must be a DwtTree or DwtTreeItem", DwtException.INVALIDPARENT, "DwtTreeItem");

    @@ -277,10 +281,13 @@

    this._row = this._table.insertRow(0);
    var i = 0;
    - nodeCell = this._row.insertCell(i++);
    - nodeCell.style.width = nodeCell.style.height = DwtTreeItem._NODECELL_DIM;
    - nodeCell.align = "center";
    - nodeCell.noWrap = true;
    + // indent the tree item according to its nesting level
    + for (var pad = 0; pad < this._depth; pad++) {
    + nodeCell = this._row.insertCell(i++);
    + nodeCell.style.width = nodeCell.style.height = DwtTreeItem._NODECELL_DIM;
    + nodeCell.align = "center";
    + nodeCell.noWrap = true;
    + }
    this._nodeCell = nodeCell;

  2. #2
    Join Date
    Oct 2005
    Posts
    6
    Rep Power
    10

    Default Another possible way of getting the indentation you want.

    I had a similar problem, but I think adding this to my CSS will be sufficient:

    Code:
    .DwtTreeItemLevel1ChildDiv, .DwtTreeItemChildDiv {
      margin-left: 1em;
    }
    --Chouser

  3. #3
    Join Date
    Nov 2005
    Posts
    5
    Rep Power
    9

    Default

    Quote Originally Posted by Chouser
    I had a similar problem, but I think adding this to my CSS will be sufficient:

    Code:
    .DwtTreeItemLevel1ChildDiv, .DwtTreeItemChildDiv {
      margin-left: 1em;
    }
    --Chouser
    Thanks. It worked for me too.
    jpenguin

  4. #4
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    54
    Rep Power
    10

    Default

    What about some dots to clearly visually link a child node to its parent with a dotted line ?

    Has anyone got something like that ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •