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

Re: [ydn-javascript] Re: Treeview remaining expanded

Expand Messages
  • Devin Singleton
    Take a look at this thread. If you wish to change your existing page content an IFrame may
    Message 1 of 9 , Jul 2, 2007
    • 0 Attachment
      Take a look at this thread. 

      If you wish to change your existing page content an IFrame may help.  If the hrefs are external sites then that may not be ideal.

      Devin

      On 7/2/07, caraconan2 <caraconan2@...> wrote:

      Hi again.

      Maybe I'm not explaining myself. I wan't to maintain expanded the node
      after a page reload, because every node points to a link.

      My code works fine, but if I substitute the # a href tag with the real
      link, and I click this node, when the page reloads, because I had
      click the link, the treeview comes back collapsed.

      --- In ydn-javascript@yahoogroups.com, "Devin Singleton" <devsin@...>
      wrote:
      >
      > Looking at your previous link http://pastebin.com/938170 I realized your
      > HTML is not valid.
      >
      > That being said, I do not experience the same behaviour. Every node
      I click
      > has the style applied, expands and will not collapse unless the page is
      > reloaded.
      >
      > I did notice that an improvement to my previous code is to change
      the line:
      > if (!node.expanded) node.expand();
      > to
      > if (!node.expanded && node.children.length != 0) node.expand();
      >
      > That code change will disable expanding nodes that do not have children.
      >
      >
      > Regards,
      >
      > Devin
      >
      >
      > On 6/29/07, caraconan2 <caraconan2@...> wrote:
      > >
      > > I'been testing your code, but it causes another behavior:
      > >
      > > 1. I click the 'expandable' node. It expands (correct)
      > >
      > > 2. When I move the mouse to click the sub_node (that has to mantainns
      > > expanded and marked with a certain style), the node collapses
      > >
      > > If I do the step 2) fast, I can go to the link sub_node points to, but
      > > the node go collapsed back.
      > >
      > > :(
      > >
      > > --- In ydn-javascript@yahoogroups.com

      <ydn-javascript%40yahoogroups.com>,
      > > "Devin Singleton" <devsin@>
      > > wrote:
      > > >
      > > > Actually, I believe you will want a bit more code than I provided.
      > > Put the
      > > > following in your treeInit function, after you have created the tree
      > > > control. Put the following code after the line "tree = new
      > > > YAHOO.widget.TreeView("menu_2"); ".
      > > >
      > > > // any time someone clicks a node it will apply the style. If the
      > > node is
      > > > not already expanded, expand it.
      > > > tree.subscribe("labelClick", function(node)
      > > > {
      > > > node.labelStyle = "nodeHighlight";
      > > > if (!node.expanded) node.expand();
      > > > tree.draw();
      > > > });
      > > >
      > > > // subscribe to the collapse event. Returning false stops the
      > > behaviour.
      > > > tree.subscribe("collapse", function(node)
      > > > {
      > > > return false;
      > > > });
      > > >
      > > >
      > > > Hope that helps
      > > >
      > > >
      > > > On 6/28/07, caraconan2 <caraconan2@> wrote:
      > > > >
      > > > > Thanks in advice for your answer.
      > > > >
      > > > > Sorry, but I come from php and I'm starting with javascript. I
      only
      > > > > know some things...
      > > > >
      > > > > I paste a sample in this url:
      > > > >
      > > > > http://pastebin.com/938170
      > > > >
      > > > > Can you take a look and tell me where I have to put your code?
      I have
      > > > > been trying but the node is still opened.
      > > > >
      > > > > Thanks ind advice.
      > > > >
      > > > > --- In
      ydn-javascript@yahoogroups.com<ydn-javascript%40yahoogroups.com>
      > > <ydn-javascript%40yahoogroups.com>,
      > >
      > > > > "Devin Singleton" <devsin@>
      > > > > wrote:
      > > > > >
      > > > > > To disable the collapse and apply a style to the clicked
      node you
      > > > > need to
      > > > > > subscribe to the treeview's labelClick event like this.
      > > > > >
      > > > > > tree.subscribe("labelClick", function(node)
      > > > > > {
      > > > > > node.labelStyle = "nodeHighlight";
      > > > > > return !node.expanded;
      > > > > > });
      > > > > >
      > > > > > If you want to remove the style of previously clicked nodes such
      > > > > that only
      > > > > > the last clicked node has the "nodeHighlight" style it gets a
      > > bit more
      > > > > > tricky. What I did was to iterate the nodes collection and
      apply the
      > > > > > default of "ygtvlabel".
      > > > > >
      > > > > > Regards,
      > > > > >
      > > > > > Devin
      > > > > >
      > > > > >
      > > > > > On 6/27/07, caraconan2 <caraconan2@> wrote:
      > > > > > >
      > > > > > > Hi.
      > > > > > >
      > > > > > > I have a treeview wich nodes point, via href tag, to a certain
      > > web.
      > > > > > > When I click over this link, I would 2 things:
      > > > > > >
      > > > > > > 1. The node has been opened remain opened
      > > > > > > 2. Mark the selected node with another style.
      > > > > > >
      > > > > > > A example:
      > > > > > >
      > > > > > > -Node_1
      > > > > > > -Node_2
      > > > > > >
      > > > > > > I click over Node_1 and this expand:
      > > > > > >
      > > > > > > -Node_1
      > > > > > > |
      > > > > > > - Node_1_1
      > > > > > > -Node_2
      > > > > > >
      > > > > > > I click over Node_1_1 and I go to this page, but then I have
      > > again:
      > > > > > >
      > > > > > > -Node_1
      > > > > > > -Node_2
      > > > > > >
      > > > > > > And, insted, I would something like:
      > > > > > >
      > > > > > > -Node_1
      > > > > > > |
      > > > > > > - Node_1_1 (with some other class to distinguish)
      > > > > > > -Node_2
      > > > > > >
      > > > > > > If anyone can help me I would apreciate.
      > > > > > >
      > > > > > > Thanks in advice


    • Shyam
      Hi, I need a similar solution. Need to highlight the selected tree node. I did that with solution suggested by Devin. tree.subscribe( labelClick ,
      Message 2 of 9 , Feb 19, 2008
      • 0 Attachment
        Hi,

        I need a similar solution. Need to highlight the selected tree node.
        I did that with solution suggested by Devin.
        tree.subscribe("labelClick", function(node) {
        node.labelStyle = "ygtvnodeSel";
        tree.draw();
        }
        Now I want highlighting only for the last selected node. How to
        iterate thru the tree nodes and apply the default style for all
        other nodes in labelclick function?

        Thanks for your help,
        Shyam

        --- In ydn-javascript@yahoogroups.com, "caraconan2" <caraconan2@...>
        wrote:
        >
        > Hi again.
        >
        > Maybe I'm not explaining myself. I wan't to maintain expanded the
        node
        > after a page reload, because every node points to a link.
        >
        > My code works fine, but if I substitute the # a href tag with the
        real
        > link, and I click this node, when the page reloads, because I had
        > click the link, the treeview comes back collapsed.
        >
        >
        >
        >
        > --- In ydn-javascript@yahoogroups.com, "Devin Singleton" <devsin@>
        > wrote:
        > >
        > > Looking at your previous link http://pastebin.com/938170 I
        realized your
        > > HTML is not valid.
        > >
        > > That being said, I do not experience the same behaviour. Every
        node
        > I click
        > > has the style applied, expands and will not collapse unless the
        page is
        > > reloaded.
        > >
        > > I did notice that an improvement to my previous code is to change
        > the line:
        > > if (!node.expanded) node.expand();
        > > to
        > > if (!node.expanded && node.children.length != 0) node.expand();
        > >
        > > That code change will disable expanding nodes that do not have
        children.
        > >
        > >
        > > Regards,
        > >
        > > Devin
        > >
        > >
        > > On 6/29/07, caraconan2 <caraconan2@> wrote:
        > > >
        > > > I'been testing your code, but it causes another behavior:
        > > >
        > > > 1. I click the 'expandable' node. It expands (correct)
        > > >
        > > > 2. When I move the mouse to click the sub_node (that has to
        mantainns
        > > > expanded and marked with a certain style), the node collapses
        > > >
        > > > If I do the step 2) fast, I can go to the link sub_node points
        to, but
        > > > the node go collapsed back.
        > > >
        > > > :(
        > > >
        > > > --- In ydn-javascript@yahoogroups.com
        > <ydn-javascript%40yahoogroups.com>,
        > > > "Devin Singleton" <devsin@>
        > > > wrote:
        > > > >
        > > > > Actually, I believe you will want a bit more code than I
        provided.
        > > > Put the
        > > > > following in your treeInit function, after you have created
        the tree
        > > > > control. Put the following code after the line "tree = new
        > > > > YAHOO.widget.TreeView("menu_2"); ".
        > > > >
        > > > > // any time someone clicks a node it will apply the style.
        If the
        > > > node is
        > > > > not already expanded, expand it.
        > > > > tree.subscribe("labelClick", function(node)
        > > > > {
        > > > > node.labelStyle = "nodeHighlight";
        > > > > if (!node.expanded) node.expand();
        > > > > tree.draw();
        > > > > });
        > > > >
        > > > > // subscribe to the collapse event. Returning false stops the
        > > > behaviour.
        > > > > tree.subscribe("collapse", function(node)
        > > > > {
        > > > > return false;
        > > > > });
        > > > >
        > > > >
        > > > > Hope that helps
        > > > >
        > > > >
        > > > > On 6/28/07, caraconan2 <caraconan2@> wrote:
        > > > > >
        > > > > > Thanks in advice for your answer.
        > > > > >
        > > > > > Sorry, but I come from php and I'm starting with
        javascript. I
        > only
        > > > > > know some things...
        > > > > >
        > > > > > I paste a sample in this url:
        > > > > >
        > > > > > http://pastebin.com/938170
        > > > > >
        > > > > > Can you take a look and tell me where I have to put your
        code?
        > I have
        > > > > > been trying but the node is still opened.
        > > > > >
        > > > > > Thanks ind advice.
        > > > > >
        > > > > > --- In
        > ydn-javascript@yahoogroups.com<ydn-javascript%40yahoogroups.com>
        > > > <ydn-javascript%40yahoogroups.com>,
        > > >
        > > > > > "Devin Singleton" <devsin@>
        > > > > > wrote:
        > > > > > >
        > > > > > > To disable the collapse and apply a style to the clicked
        > node you
        > > > > > need to
        > > > > > > subscribe to the treeview's labelClick event like this.
        > > > > > >
        > > > > > > tree.subscribe("labelClick", function(node)
        > > > > > > {
        > > > > > > node.labelStyle = "nodeHighlight";
        > > > > > > return !node.expanded;
        > > > > > > });
        > > > > > >
        > > > > > > If you want to remove the style of previously clicked
        nodes such
        > > > > > that only
        > > > > > > the last clicked node has the "nodeHighlight" style it
        gets a
        > > > bit more
        > > > > > > tricky. What I did was to iterate the nodes collection
        and
        > apply the
        > > > > > > default of "ygtvlabel".
        > > > > > >
        > > > > > > Regards,
        > > > > > >
        > > > > > > Devin
        > > > > > >
        > > > > > >
        > > > > > > On 6/27/07, caraconan2 <caraconan2@> wrote:
        > > > > > > >
        > > > > > > > Hi.
        > > > > > > >
        > > > > > > > I have a treeview wich nodes point, via href tag, to a
        certain
        > > > web.
        > > > > > > > When I click over this link, I would 2 things:
        > > > > > > >
        > > > > > > > 1. The node has been opened remain opened
        > > > > > > > 2. Mark the selected node with another style.
        > > > > > > >
        > > > > > > > A example:
        > > > > > > >
        > > > > > > > -Node_1
        > > > > > > > -Node_2
        > > > > > > >
        > > > > > > > I click over Node_1 and this expand:
        > > > > > > >
        > > > > > > > -Node_1
        > > > > > > > |
        > > > > > > > - Node_1_1
        > > > > > > > -Node_2
        > > > > > > >
        > > > > > > > I click over Node_1_1 and I go to this page, but then
        I have
        > > > again:
        > > > > > > >
        > > > > > > > -Node_1
        > > > > > > > -Node_2
        > > > > > > >
        > > > > > > > And, insted, I would something like:
        > > > > > > >
        > > > > > > > -Node_1
        > > > > > > > |
        > > > > > > > - Node_1_1 (with some other class to distinguish)
        > > > > > > > -Node_2
        > > > > > > >
        > > > > > > > If anyone can help me I would apreciate.
        > > > > > > >
        > > > > > > > Thanks in advice
        > > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.