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

Re: Treeview remaining expanded

Expand Messages
  • caraconan2
    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,
    Message 1 of 9 , Jul 2, 2007
    • 0 Attachment
      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
      > >
      >
    • Devin Singleton
      Take a look at this thread. If you wish to change your existing page content an IFrame may
      Message 2 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 3 of 9 , Feb 19 5:04 PM
        • 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.