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

YUI - Creating a context menu for different levels of a TreeView

Expand Messages
  • macumbermark
    Hi All, Im very new to YUI, but not new to JavaScript, I am trying to create a small page that contains a TreeView which will have 3 different levels, this I
    Message 1 of 4 , Feb 3, 2009
    • 0 Attachment
      Hi All, Im very new to YUI, but not new to JavaScript, I am trying to
      create a small page that contains a TreeView which will have 3
      different levels, this I can do fine.

      But I would like to add a context menu to each of the nodes in the
      tree, a different context menu for each different level of the tree...
      can this be done?

      Each level of the tree is created using some JSON, and each level DOES
      have a unique attribute that can separate them out, I have tried this
      style:

      var nodes = tree.getNodesByProperty("apmtType", "LEVEL1");
      var oContextMenu = new
      YAHOO.widget.ContextMenu("myContextMenuForLevel1", {
      trigger: nodes,
      lazyload: true,
      itemdata: [
      { text: "Menu Item 1", onclick: { fn: testFunc } },
      { text: "Menu Item 2", onclick: { fn: testFunc } },
      { text: "Menu Item 3", onclick: { fn: testFunc } }
      ] }
      );
      oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);

      so as you can see, Im trying to get all nodes with a special custom
      attribute of apmtType that equals "LEVEL1" then use that collection as
      the "trigger" attribute of the ContextMenu, but it simply does nothing...

      Any help is greatly appreciated!

      Thanks.
      Mark
    • macumbermark
      ... nothing... ... Sorry to bump, but I would really appreciate anyone who can help out with this! Thanks, Mark
      Message 2 of 4 , Feb 4, 2009
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "macumbermark"
        <mark.macumber@...> wrote:
        >
        > Hi All, Im very new to YUI, but not new to JavaScript, I am trying to
        > create a small page that contains a TreeView which will have 3
        > different levels, this I can do fine.
        >
        > But I would like to add a context menu to each of the nodes in the
        > tree, a different context menu for each different level of the tree...
        > can this be done?
        >
        > Each level of the tree is created using some JSON, and each level DOES
        > have a unique attribute that can separate them out, I have tried this
        > style:
        >
        > var nodes = tree.getNodesByProperty("apmtType", "LEVEL1");
        > var oContextMenu = new
        > YAHOO.widget.ContextMenu("myContextMenuForLevel1", {
        > trigger: nodes,
        > lazyload: true,
        > itemdata: [
        > { text: "Menu Item 1", onclick: { fn: testFunc } },
        > { text: "Menu Item 2", onclick: { fn: testFunc } },
        > { text: "Menu Item 3", onclick: { fn: testFunc } }
        > ] }
        > );
        > oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
        >
        > so as you can see, Im trying to get all nodes with a special custom
        > attribute of apmtType that equals "LEVEL1" then use that collection as
        > the "trigger" attribute of the ContextMenu, but it simply does
        nothing...
        >
        > Any help is greatly appreciated!
        >
        > Thanks.
        > Mark
        >

        Sorry to bump, but I would really appreciate anyone who can help out
        with this!

        Thanks,
        Mark
      • macumbermark
        ... nothing... ... Ok so I have made progress, what I can do to make this work is to use: trigger: nodes[0].getContentEl() instead of trigger: nodes So this
        Message 3 of 4 , Feb 4, 2009
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "macumbermark"
          <mark.macumber@...> wrote:
          >
          > Hi All, Im very new to YUI, but not new to JavaScript, I am trying to
          > create a small page that contains a TreeView which will have 3
          > different levels, this I can do fine.
          >
          > But I would like to add a context menu to each of the nodes in the
          > tree, a different context menu for each different level of the tree...
          > can this be done?
          >
          > Each level of the tree is created using some JSON, and each level DOES
          > have a unique attribute that can separate them out, I have tried this
          > style:
          >
          > var nodes = tree.getNodesByProperty("apmtType", "LEVEL1");
          > var oContextMenu = new
          > YAHOO.widget.ContextMenu("myContextMenuForLevel1", {
          > trigger: nodes,
          > lazyload: true,
          > itemdata: [
          > { text: "Menu Item 1", onclick: { fn: testFunc } },
          > { text: "Menu Item 2", onclick: { fn: testFunc } },
          > { text: "Menu Item 3", onclick: { fn: testFunc } }
          > ] }
          > );
          > oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
          >
          > so as you can see, Im trying to get all nodes with a special custom
          > attribute of apmtType that equals "LEVEL1" then use that collection as
          > the "trigger" attribute of the ContextMenu, but it simply does
          nothing...
          >
          > Any help is greatly appreciated!
          >
          > Thanks.
          > Mark
          >

          Ok so I have made progress, what I can do to make this work is to use:

          trigger: nodes[0].getContentEl()

          instead of

          trigger: nodes

          So this change uses the HTMLElement of the first element of the nodes
          array as the trigger of the context menu... which is annoying because
          I then need to iterate of the array and attach a context menu to each
          node in the array. But it will work for now.

          I would love to hear from someone who has overcome this type of thing.
        • kdadey2000
          ... The way I do this, is to trigger off of the div the treeview is attached to, then I subscribe to the beforeShow event and then in the function that s
          Message 4 of 4 , Feb 4, 2009
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "macumbermark"
            <mark.macumber@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "macumbermark"
            > <mark.macumber@> wrote:
            > >
            > > Hi All, Im very new to YUI, but not new to JavaScript, I am trying to
            > > create a small page that contains a TreeView which will have 3
            > > different levels, this I can do fine.
            > >
            > > But I would like to add a context menu to each of the nodes in the
            > > tree, a different context menu for each different level of the tree...
            > > can this be done?
            > >
            > > Each level of the tree is created using some JSON, and each level DOES
            > > have a unique attribute that can separate them out, I have tried this
            > > style:
            > >
            > > var nodes = tree.getNodesByProperty("apmtType", "LEVEL1");
            > > var oContextMenu = new
            > > YAHOO.widget.ContextMenu("myContextMenuForLevel1", {
            > > trigger: nodes,
            > > lazyload: true,
            > > itemdata: [
            > > { text: "Menu Item 1", onclick: { fn: testFunc } },
            > > { text: "Menu Item 2", onclick: { fn: testFunc } },
            > > { text: "Menu Item 3", onclick: { fn: testFunc } }
            > > ] }
            > > );
            > > oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
            > >
            > > so as you can see, Im trying to get all nodes with a special custom
            > > attribute of apmtType that equals "LEVEL1" then use that collection as
            > > the "trigger" attribute of the ContextMenu, but it simply does
            > nothing...
            > >
            > > Any help is greatly appreciated!
            > >
            > > Thanks.
            > > Mark
            > >
            >
            > Ok so I have made progress, what I can do to make this work is to use:
            >
            > trigger: nodes[0].getContentEl()
            >
            > instead of
            >
            > trigger: nodes
            >
            > So this change uses the HTMLElement of the first element of the nodes
            > array as the trigger of the context menu... which is annoying because
            > I then need to iterate of the array and attach a context menu to each
            > node in the array. But it will work for now.
            >
            > I would love to hear from someone who has overcome this type of thing.
            >

            The way I do this, is to trigger off of the div the treeview is
            attached to, then I subscribe to the "beforeShow" event and then in
            the function that's called by the "beforeShow" event I dynamically set
            the items in the menu based on the node that triggered the menu.

            Hope this helps.

            Ken....
          Your message has been successfully submitted and would be delivered to recipients shortly.