Loading ...
Sorry, an error occurred while loading the content.
 

Possibility of Node Sort

Expand Messages
  • dlazar911
    Hi, With a hypothetical treeview of three nodes, labeled A, B an C. Each node will be a folder, and each one contains arbitrary child nodes (0, 1 or more). My
    Message 1 of 3 , Jun 22, 2006
      Hi,

      With a hypothetical treeview of three nodes, labeled A, B an C. Each
      node will be a folder, and each one contains arbitrary child nodes (0,
      1 or more).

      My tree is constructed by using setDynamicLoad() for the folders, not
      the tree as a whole. A click on a folder allows the folder name to be
      edited in a text box. The edit is confirmed by sending the changes the
      the server where the backend updates the change.

      Now, to keep the tree in synch with the backend, I need to refresh the
      tree. If node B label was changed to 'Z', the folders should display
      as A, C, Z and not A, Z, C. At the moment I simply clear out the tree
      and force it to redraw, which is not ideal once the tree attains a
      larger number of nodes. Ideally, since the backend has recorded the
      change, I would like to simply sort the nodes in the tree, right in
      the DOM, to reflect the change without redrawing the whole tree.

      Could someone kindly express how this may be accomplished using the
      available methods of YUI's codebase, or point out how I might extend
      the codebase myself to do this? Any tips most appreciated.

      Thanks
    • Nige White
      You could just iterate through thr Nodes changing the label text to the correct value to change the appearance to being sorted. It should be possible to write
      Message 2 of 3 , Jun 23, 2006
        You could just iterate through thr Nodes changing the label text to the
        correct value to change the appearance to being sorted.

        It should be possible to write a node sorting method. Just look at
        treeview.js. Each Node has an array called "children", each of which is
        a Node.

        Every child Node has a nextSibling and previousSibling pointer. You can
        sort that array as you see fit, then make a pass through updating the
        sibling pointers, call refresh() on the parent Node, and that *should*
        do it... YMMV!

        I've done a bit of "Node shuffling" when adding drag and drop to my
        DDTreeView class, so I think that should work.

        Nige

        dlazar911 wrote:

        > Hi,
        >
        > With a hypothetical treeview of three nodes, labeled A, B an C. Each
        > node will be a folder, and each one contains arbitrary child nodes (0,
        > 1 or more).
        >
        > My tree is constructed by using setDynamicLoad() for the folders, not
        > the tree as a whole. A click on a folder allows the folder name to be
        > edited in a text box. The edit is confirmed by sending the changes the
        > the server where the backend updates the change.
        >
        > Now, to keep the tree in synch with the backend, I need to refresh the
        > tree. If node B label was changed to 'Z', the folders should display
        > as A, C, Z and not A, Z, C. At the moment I simply clear out the tree
        > and force it to redraw, which is not ideal once the tree attains a
        > larger number of nodes. Ideally, since the backend has recorded the
        > change, I would like to simply sort the nodes in the tree, right in
        > the DOM, to reflect the change without redrawing the whole tree.
        >
        > Could someone kindly express how this may be accomplished using the
        > available methods of YUI's codebase, or point out how I might extend
        > the codebase myself to do this? Any tips most appreciated.
        >
        > Thanks
        >
        >
        > _____________________________________________________________________
        > This message has been checked for all known viruses. Virus scanning
        > powered by Messagelabs http://www.messagelabs.com For more information
        > e-mail : hostmaster@...



        _____________________________________________________________________
        This message has been checked for all known viruses. Virus scanning
        powered by Messagelabs http://www.messagelabs.com For more information
        e-mail : hostmaster@...
      • Brandon Fosdick
        ... I ve been trying to figure out how to do the same thing. Rearranging the labels doesn t quite work in my case because the nodes have data associated with
        Message 3 of 3 , Jul 1, 2006
          Nige White wrote:
          > You could just iterate through thr Nodes changing the label text to the
          > correct value to change the appearance to being sorted.
          >
          > It should be possible to write a node sorting method. Just look at
          > treeview.js. Each Node has an array called "children", each of which is
          > a Node.
          >
          > Every child Node has a nextSibling and previousSibling pointer. You can
          > sort that array as you see fit, then make a pass through updating the
          > sibling pointers, call refresh() on the parent Node, and that *should*
          > do it... YMMV!
          >
          > I've done a bit of "Node shuffling" when adding drag and drop to my
          > DDTreeView class, so I think that should work.

          I've been trying to figure out how to do the same thing. Rearranging the labels doesn't quite work in my case because the nodes have data associated with them and some nodes could gain or lose children during the update. Calling refresh() on the node is exactly what I'm trying to avoid because it creates a discontinuity in the UI.

          I think it should be possible to change the sibling pointers on the DOM elements directly, as opposed to just the tree nodes, but I don't know if the browser will automatically rearrange the items when that happens. Anybody know for sure? I haven't tried it yet.
        Your message has been successfully submitted and would be delivered to recipients shortly.