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

TreeView, drag&drop, and how to save new order of nodes.

Expand Messages
  • Mario
    Hello, thanks for some hints on the following issue. Let me explain myself with a very basic example. So, I have a mysql table which models a tree:
    Message 1 of 6 , Oct 28, 1939
      Hello,

      thanks for some hints on the following issue.
      Let me explain myself with a very basic example.

      So, I have a mysql table which models a tree:
      +----+-----------+-----+
      | Id | Content | Ancestor |
      +----+-----------+-----+
      |  1    | a            |   0 |
      |  2    | b            |   1 |
      |  3    | c            |   5 |
      |  4    | d            |   3 |
      |  5    | g            |   2 |
      ....

      I diplay my tree as a UL/LI list.
      Thanks to the TreeView widget and the Drag and Drop utility, I get a nice visual presentation of my tree and I am able to rearrange the nodes of my tree (I use code by http://andrewroth.ca/others/treeview_dragdrop/ ).

      Now I wish to save the new ancestor relationship.
      I am able to use the Connection Manager to pass data to the server, but I am not sure how to read the info I need after I did drag&drop  and shuffle nodes around.

      My question is: which is the best way to do that?

      My best wishes
      mario


      ps should I post this msg at http://yuilibrary.com/forum/  ?




    • Sahid Khan (সাহিদ)
      ... As I see it you have to use store the database id as a custom property in your nodes. Please follow [1] on how to do this. Now you can write some
      Message 2 of 6 , Oct 28, 1939
        On Fri, Nov 27, 2009 at 8:08 PM, Mario <mario25960@...> wrote:
        Hello,

        thanks for some hints on the following issue.
        Let me explain myself with a very basic example.
         [snipped..]

        Now I wish to save the new ancestor relationship.
        I am able to use the Connection Manager to pass data to the server, but I am not sure how to read the info I need after I did drag&drop  and shuffle nodes around.

        My question is: which is the best way to do that?


        As I see it you have to use store the database id as a custom property in your nodes. Please follow [1] on how to do this. Now you can write some javascript on submit event of the form (assuming you have a form). Basically this javascript should use the yui treeview api [2] to iterate through the nodes and create a list of objects which your server side component will understand. If you use java/jsp in the server side , json object will be a good bet.
         

        ps should I post this msg at http://yuilibrary.com/forum/  ?


        IMO, This list is better because this is much more active than the forum.

        1. http://developer.yahoo.com/yui/treeview/#customproperties
        2. http://developer.yahoo.com/yui/docs/module_treeview.html

        HTH,
        --
        S.
        Argue with idiots, and you become an idiot. - PG
      • Satyam
        You can post to either place right now, though most of the traffic is moving to the new forum, but this place is fine. Since, in the end, you want a flat
        Message 3 of 6 , Oct 28, 1939
          You can post to either place right now, though most of the traffic is
          moving to the new forum, but this place is fine.

          Since, in the end, you want a flat representation of the tree so you can
          store it in a database table, the easiest and fastest it to go through
          the _nodes private array. Each node has a parent property that points
          to the ancestor. The array does not have all its items consecutive,
          specially if some nodes moved around, some items might be undefined. As
          always, private properties are for TreeView's internal use and, thus,
          unsupported. The formally correct way to do this is, starting from the
          root node (method getRoot) loop through its children array and for each
          node instance there, recursively loop their children arrays. In fact,
          I'm not sure you will gain that much by going the 'unsupported' way, and
          speed might not matter that much anyway.

          You must have some means of identify the nodes uniquely. All nodes have
          an index property, which is unique to each node within all trees in the
          same web page. Of course, this, on its own, is not good enough as a
          unique key in a database server if there might be other tree instances
          stored. All nodes can also store extra custom data, see:

          http://developer.yahoo.com/yui/treeview/#customproperties

          Satyam


          Mario escribió:
          >
          >
          > Hello,
          >
          > thanks for some hints on the following issue.
          > Let me explain myself with a very basic example.
          >
          > So, I have a mysql table which models a tree:
          > +----+-----------+-----+
          > | Id | Content | Ancestor |
          > +----+-----------+-----+
          > | 1 | a | 0 |
          > | 2 | b | 1 |
          > | 3 | c | 5 |
          > | 4 | d | 3 |
          > | 5 | g | 2 |
          > ....
          >
          > I diplay my tree as a UL/LI list.
          > Thanks to the TreeView widget and the Drag and Drop utility, I get a
          > nice visual presentation of my tree and I am able to rearrange the
          > nodes of my tree (I use code by
          > http://andrewroth.ca/others/treeview_dragdrop/ ).
          >
          > Now I wish to save the new ancestor relationship.
          > I am able to use the Connection Manager to pass data to the server,
          > but I am not sure how to read the info I need after I did drag&drop
          > and shuffle nodes around.
          >
          > My question is: which is the best way to do that?
          >
          > My best wishes
          > mario
          >
          >
          > ps should I post this msg at http://yuilibrary.com/forum/
          > <http://yuilibrary.com/forum/%20> ?
          >
          >
          >
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 9.0.709 / Virus Database: 270.14.83/2529 - Release Date: 11/26/09 20:42:00
          >
          >
        • Mario
          Hello thanks for your replies. Yes, something similar is working. I ll try to clean the code and post it here. A question. With textNode, I may use something
          Message 4 of 6 , Oct 28, 1939
            Hello

            thanks for your replies.
            Yes, something similar is working.
            I'll try to clean the code and post it here.

            A question.
            With textNode, I may use something as
            myobj = { label: "<content>", myNodeId: "<id>" } ;
            var tmpNode = new YAHOO.widget.TextNode(myobj, root);
            and I get back the id's by node.data.myNodeId.
            But which is the trick you suggest, if I need to use HTMLNode?

            Thanks for your help
            mario

            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            .....
            >
            > Since, in the end, you want a flat representation of the tree so you can
            > store it in a database table, .....
          • Satyam
            Same thing, both HTMLNode and TextNode derive from Node and storing custom variables is the same in both, the difference being that HTMLNodes don t have a
            Message 5 of 6 , Oct 28, 1939
              Same thing, both HTMLNode and TextNode derive from Node and storing
              custom variables is the same in both, the difference being that
              HTMLNodes don't have a label property but instead they have an html
              property. Your custom property is the same, you simply set html instead
              of label, the rest remains the same.

              Satyam

              Mario escribió:
              >
              > Hello
              >
              > thanks for your replies.
              > Yes, something similar is working.
              > I'll try to clean the code and post it here.
              >
              > A question.
              > With textNode, I may use something as
              > myobj = { label: "<content>", myNodeId: "<id>" } ;
              > var tmpNode = new YAHOO.widget.TextNode(myobj, root);
              > and I get back the id's by node.data.myNodeId.
              > But which is the trick you suggest, if I need to use HTMLNode?
              >
              > Thanks for your help
              > mario
              >
              > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              > .....
              >
              >> Since, in the end, you want a flat representation of the tree so you can
              >> store it in a database table, .....
              >>
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 9.0.709 / Virus Database: 270.14.84/2530 - Release Date: 11/27/09 08:58:00
              >
              >
            • Mario
              Yes, :-) I missed that, shame on me! Thanks mario ... ........
              Message 6 of 6 , Oct 28, 1939
                Yes, :-)
                I missed that, shame on me!
                Thanks
                mario

                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                >
                > Same thing, both HTMLNode and TextNode derive from Node and storing
                > custom variables is the same in both, the difference being that
                > HTMLNodes don't have a label property but instead they have an html
                > property. Your custom property is the same, you simply set html instead
                > of label, the rest remains the same.
                >
                > Satyam
                >
                > Mario escribió:
                > >
                ........
              Your message has been successfully submitted and would be delivered to recipients shortly.