[ydn-javascript] eventing problems on TreeView with complex HTMLNode

I have this really pesky problem with YUI. It has been bothering me for a =
long time, and I cannot figure it out.
I am using a YAHOO.widget.TreeView with many YAHOO.widget.HTMLNode objects =
as the leaf nodes of the tree.
My HTMLNode has complex html that has a gui in of itself that can receive k=
eyboard input, has drop down menus etc.
The problem is that the tree is somehow interfering with routine events in =
my HTMLNode such that I cannot even type in a text box without holding the =
mouse down.
I cannot figure out how to configure the tree to leave the events alone.
Here is a small self-contained example that demonstrates the problem:=20=20
http://arthurblake.thruhere.net/treeviewproblem.html
Thanks in advance for any help or insight you might have...

The problem is that you are not capturing the events yourself in the
controls you have added and preventing their propagation up to their
containers. Events at any level bubble up through the DOM element
hierarchy unless it is explicitly prevented. You are not preventing
this effect and it will simply bubble up naturally and will be picked up
by whatever listener is out there, in this case the key and click events
of the container. So, one way is for you to put listeners for the
events you want to allow in this events and use
YAHOO.util.Event.stopPropagation to prevent the bubbling from reaching
the TreeView or you could place your controls in floating panels outside
of the TreeView hierarchy and have them position and show at the
appropriate places when needed. Being outside of the same DOM branch,
their events cannot bubble into a lateral branch.
Satyam
blakesys escribi

Thanks for your reply. That is one of the first things I tried. But it do=
esn't work. Here is my example that tries to stop the events:
http://arthurblake.thruhere.net/treeviewproblem2.html
I attach the event handlers to the div that encloses the item in the tree a=
nd attempt to stop the event. My event handlers are never even getting cal=
led... but they do get called if I don't create the tree.
I thought about your second approach as well, but it's much more of a pain =
to implement, and I wanted to avoid that if at all possible.
--- In ydn-javascript@yahoogroups.com, Satyam wrote:
>
> The problem is that you are not capturing the events yourself in the=20
> controls you have added and preventing their propagation up to their=20
> containers. Events at any level bubble up through the DOM element=20
> hierarchy unless it is explicitly prevented. You are not preventing=20
> this effect and it will simply bubble up naturally and will be picked up=
=20
> by whatever listener is out there, in this case the key and click events=
=20
> of the container. So, one way is for you to put listeners for the=20
> events you want to allow in this events and use=20
> YAHOO.util.Event.stopPropagation to prevent the bubbling from reaching=20
> the TreeView or you could place your controls in floating panels outside=
=20
> of the TreeView hierarchy and have them position and show at the=20
> appropriate places when needed. Being outside of the same DOM branch,=20
> their events cannot bubble into a lateral branch.
>=20
> Satyam
>=20
>=20
> blakesys escribi=F3:
> > I have this really pesky problem with YUI. It has been bothering me fo=
r a long time, and I cannot figure it out.
> >
> > I am using a YAHOO.widget.TreeView with many YAHOO.widget.HTMLNode obje=
cts as the leaf nodes of the tree.
> >
> > My HTMLNode has complex html that has a gui in of itself that can recei=
ve keyboard input, has drop down menus etc.
> >
> > The problem is that the tree is somehow interfering with routine events=
in my HTMLNode such that I cannot even type in a text box without holding =
the mouse down.
> >
> > I cannot figure out how to configure the tree to leave the events alone=
.
> >
> > Here is a small self-contained example that demonstrates the problem: =
=20
> >
> > http://arthurblake.thruhere.net/treeviewproblem.html
> >
> > Thanks in advance for any help or insight you might have...
> >
> >
> >
> > ------------------------------------
> >
> > Yahoo! Groups Links
> >
> >
> >
> > -----------------------------------------------------------------------=
-
> >
> >
> > No virus found in this incoming message.
> > Checked by AVG - www.avg.com=20
> > Version: 8.5.375 / Virus Database: 270.13.3/2217 - Release Date: 07/03/=
09 18:11:00
> >
> >
>

If you check the values of variables search and fruits at the time of
setting the listeners for the events, both are null because the calls to
getElementById fail to find the elements. The TreeView doesn't draw the
elements of collapsed branches until they are expanded so when you just
have the tree drawn with all branches collapsed, there is no search box
and there is no fruits dropdown so there is nothing to be found. You
can create the nodes with the property renderHidden set to true to force
nodes to be drawn, even children of collapsed ones.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Node.html#property_renderHidden
Since you are using existing markup you might use yuiConfig like:
Yahoo
or set the property once in all nodes after you create the tree and
before you render it by doing:
tree.setNodesProperty('renderHidden',true);
http://developer.yahoo.com/yui/docs/YAHOO.widget.TreeView.html#method_setNodesProperty
Satyam
blakesys escribi

Thank you very much! I finally got it working.
--- In ydn-javascript@yahoogroups.com, Satyam wrote:
>
> If you check the values of variables search and fruits at the time of=20
> setting the listeners for the events, both are null because the calls to=
=20
> getElementById fail to find the elements. The TreeView doesn't draw the=
=20
> elements of collapsed branches until they are expanded so when you just=20
> have the tree drawn with all branches collapsed, there is no search box=20
> and there is no fruits dropdown so there is nothing to be found. You=20
> can create the nodes with the property renderHidden set to true to force=
=20
> nodes to be drawn, even children of collapsed ones.
>=20
> http://developer.yahoo.com/yui/docs/YAHOO.widget.Node.html#property_rende=
rHidden
>=20
> Since you are using existing markup you might use yuiConfig like:
>=20
> Yahoo
>=20
> or set the property once in all nodes after you create the tree and=20
> before you render it by doing:
>=20
> tree.setNodesProperty('renderHidden',true);
>=20
> http://developer.yahoo.com/yui/docs/YAHOO.widget.TreeView.html#method_set=
NodesProperty
>=20
> Satyam
>=20
> blakesys escribi=F3:
> > Thanks for your reply. That is one of the first things I tried. But i=
t doesn't work. Here is my example that tries to stop the events:
> >
> > http://arthurblake.thruhere.net/treeviewproblem2.html
> >
> > I attach the event handlers to the div that encloses the item in the tr=
ee and attempt to stop the event. My event handlers are never even getting=
called... but they do get called if I don't create the tree.
> >
> > I thought about your second approach as well, but it's much more of a p=
ain to implement, and I wanted to avoid that if at all possible.
> >
> >
> > --- In ydn-javascript@yahoogroups.com, Satyam wrote:
> >=20=20=20
> >> The problem is that you are not capturing the events yourself in the=20
> >> controls you have added and preventing their propagation up to their=20
> >> containers. Events at any level bubble up through the DOM element=20
> >> hierarchy unless it is explicitly prevented. You are not preventing=20
> >> this effect and it will simply bubble up naturally and will be picked =
up=20
> >> by whatever listener is out there, in this case the key and click even=
ts=20
> >> of the container. So, one way is for you to put listeners for the=20
> >> events you want to allow in this events and use=20
> >> YAHOO.util.Event.stopPropagation to prevent the bubbling from reaching=
=20
> >> the TreeView or you could place your controls in floating panels outsi=
de=20
> >> of the TreeView hierarchy and have them position and show at the=20
> >> appropriate places when needed. Being outside of the same DOM branch,=
=20
> >> their events cannot bubble into a lateral branch.
> >>
> >> Satyam
> >>
> >>
> >> blakesys escribi=F3:
> >>=20=20=20=20=20
> >>> I have this really pesky problem with YUI. It has been bothering me =
for a long time, and I cannot figure it out.
> >>>
> >>> I am using a YAHOO.widget.TreeView with many YAHOO.widget.HTMLNode ob=
jects as the leaf nodes of the tree.
> >>>
> >>> My HTMLNode has complex html that has a gui in of itself that can rec=
eive keyboard input, has drop down menus etc.
> >>>
> >>> The problem is that the tree is somehow interfering with routine even=
ts in my HTMLNode such that I cannot even type in a text box without holdin=
g the mouse down.
> >>>
> >>> I cannot figure out how to configure the tree to leave the events alo=
ne.
> >>>
> >>> Here is a small self-contained example that demonstrates the problem:=
=20=20
> >>>
> >>> http://arthurblake.thruhere.net/treeviewproblem.html
> >>>
> >>> Thanks in advance for any help or insight you might have...
> >>>
> >>>
> >>>
> >>> ------------------------------------
> >>>
> >>> Yahoo! Groups Links
> >>>
> >>>
> >>>
> >>> ---------------------------------------------------------------------=
---
> >>>
> >>>
> >>> No virus found in this incoming message.
> >>> Checked by AVG - www.avg.com=20
> >>> Version: 8.5.375 / Virus Database: 270.13.3/2217 - Release Date: 07/0=
3/09 18:11:00
> >>>
> >>>
> >>>=20=20=20=20=20=20=20
> >
> >
> >
> >
> > ------------------------------------
> >
> > Yahoo! Groups Links
> >
> >
> >
> > -----------------------------------------------------------------------=
-
> >
> >
> > No virus found in this incoming message.
> > Checked by AVG - www.avg.com=20
> > Version: 8.5.375 / Virus Database: 270.13.3/2217 - Release Date: 07/03/=
09 18:11:00
> >
> >
>