Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 16 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view
Previous topic | Next topic

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile
Tags:
  • click
  • event
  • node

Tree View highlighting question

Post Posted: Thu Jan 14, 2010 8:14 am
+0-
I am wondering if it is possible to get the following highlighting functionality:

When a user clicks on a plus/minus sign the node expands/contracts. When a user clicks on a node label the node highlights, if it is collapsed it expands, and it makes a JS function call to make an Ajax call. So far this is all the default behavior. However when a user clicks on a node label that is expanded, I want to make the same Ajax call I did before, highlight the node, but NOT collapse it. So as you browse through the tree any nodes you expand stay expanded unless you click on the minus sign. Every time you click on a node it becomes highlighted and makes a call to my Ajax function.

I currently subscribe to the clickEvent, make my Ajax call, and I return false if the node is already expanded to cancel the collapse event. This works perfectly except for the fact that it doesn't highlight the node that has been clicked on when it is already expanded. Can anyone think of a way to accomplish this? I tried to modify the class name of the node directly before I return false as a hack to get it to highlight, but when I do anything other than simply return false after checking node.expanded the node collapses. I even tried editing the class name in the function that makes the Ajax call, but that errored out.

Hopefully that makes sense, I am happy to provide more information if necessary. Thanks in advance for any ideas you have.


Pseudo
Code:
tree.render();
tree.subscribe("clickEvent", handleclick);

buildTree();

function handleclick(oArgs) {
  makeAjaxCall(node.data.wgid);
  if (node.expanded) {
         return false;
  }
}

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:
  • node

Re: Tree View highlighting question

Post Posted: Thu Jan 14, 2010 8:47 am
+0-
I am not sure if by highlight you really mean highlight or focus, I believe it must be the second. The default built-in clickEvent works as if you had the following:

tree.subscribe("clickEvent",function(oArgs) {
var node = oArgs.node;
node.toggle();
node.focus();
return false;
});

When you return false from your listener, you are canceling both the toggling and the focusing. You might want to call node.focus() before the return.

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile
Tags:
  • node

Re: Tree View highlighting question

Post Posted: Thu Jan 14, 2010 8:51 am
+0-
Bingo! You were 100% correct on all counts, I did in fact mean focus and calling node.focus() before the return did exactly what I needed. Is there documentation on node properties? A.K.A. could I have found information on node.focus() or node.toggle() in the YUI docs somewhere?

Thanks for the help.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Tree View highlighting question

Post Posted: Thu Jan 14, 2010 9:14 am
+0-
http://developer.yahoo.com/yui/docs/YAH ... .Node.html

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile
Tags:
  • event
  • node
  • problem

Re: Tree View highlighting question

Post Posted: Wed Jan 27, 2010 2:37 pm
+0-
Alright so I have been told that we need to add something to this situation...

Now I need to fire the exact same Ajax call when a user clicks on the plus sign in addition to everything else. Initially this seemed easy, just subscribe to the expand event and call the same function I was calling before. I had to tweak things a bit because the expand event passes a node object along while the clickEvent passes oArgs, but w/e, it worked.

Then I noticed that IE was throwing an "Unknown Runtime Error" in what seemed like random cases. After some digging I discovered that when you clicked on an unexpanded label my Ajax call was actually being made twice, causing the error. This was happening because the clickEvent makes the Ajax call, which then fires the expand event which in turn is handled and makes the Ajax call again.

This seems like a bit of a catch 22 situation. I want to handle both expand and label click events, but not make the Ajax call twice. The problem is that clicking on the plus sign fires the expand event, and I also need it to make the Ajax call. By definition the clickEvent will also expand the node, which will trigger the expand event subscription.

My latest thought was to just subscribe to the expandComplete event and make the call there, but then when a user clicks on an expanded label I want to make the Ajax call as well, but not collapse the node. So I could subscribe to the collapse event, but I want clicking on the minus sign to collapse the node but not make the Ajax call....

Sorry for the convoluted nature of this post, but this is the desired behavior (I wish it was otherwise). Is there any way to make this happen? Thanks in advance for any help.

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile

Re: Tree View highlighting question

Post Posted: Wed Jan 27, 2010 2:47 pm
+0-
Actually I have one idea involving node.expanded...give me a minute.

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile

Re: Tree View highlighting question

Post Posted: Wed Jan 27, 2010 2:52 pm
+0-
Yeah no dice...the core problem here is that there is no specific event for clicking on the plus/minus sign.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Tree View highlighting question

Post Posted: Thu Jan 28, 2010 3:21 am
+0-
As I mentioned, the default actions for clickEvent are focus() and toggle() which means that if it is expanded it will call collapse, it collapsed it will call expand. You can prevent the default or control it any way you want, which will allow you to prevent duplicate actions

Jonathan Klein

  • Username: jnklein
  • Joined: Thu Jan 14, 2010 7:54 am
  • Posts: 12
  • Offline
  • Profile
Tags:
  • event
  • node
  • problem

Re: Tree View highlighting question

Post Posted: Thu Jan 28, 2010 6:57 am
+0-
The clickEvent is not the problem, I can handle that exactly how I want. The concern is dealing with the the click on the plus sign. The only ways to subscribe to this event are via the expand and expandComplete events (as far as I understand it anyway). If I throw an Ajax call on either of those events, then I'm halfway there. Clicking on an unexpanded label or on the plus sign does what I want. The problem is when you click on an expanded label, or a label that is an end node with no expand/collapse abilities. In the former case you can't listen for the collapse event since I don't want to collapse it, I just want to make the Ajax call, and while I could return false to cancel the collapse I want people to be able to collapse a node by clicking on the minus sign. In the latter case you run into problems because you can't just check node.expanded because the end nodes do not have that property.

If you just tell me it is impossible I can bring that back to the project sponsor and be done with it, but I feel like there must be a clever way of accomplishing this.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Tree View highlighting question

Post Posted: Thu Jan 28, 2010 7:31 am
+0-
I find myself at a loss about what stage are you at right now and what exactly is that is not working. You have quite a fine control over everything that happens when clicking everywhere, I told you how all this breaks down. At this point I really don't get it.
  [ 16 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view
Previous topic | Next topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum