Home - Forums-.NET - FlyTreeView (ASP.NET) - Client-side onclick event

FlyTreeView (ASP.NET)

Technical support and KB related to the FlyTreeView control

This forum related to following products: FlyTreeView for ASP.NET
Client-side onclick event
Link Posted: 03-Jul-2009 23:34
Cassini avatar
Cassini
Total Posts:0
Joined:4/26/2024
Hi, we need to do some client-side operations when user click a node, we cannot find any support for onclick event, we cannot use OnSelectedNodeChangingJavascript because we do different operations in this function, how to allow FlyTreeView's nodes to fire onclick event?
Link Posted: 03-Jul-2009 23:45
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:4/26/2024
Just use node.NavigationUrl instead:
node.NavigateUrl = "javascript:alert('node clicked')";
Link Posted: 04-Jul-2009 01:00
Cassini avatar
Cassini
Total Posts:0
Joined:4/26/2024
It does not work for me! the alert does not appear, here is my code just case:
            Dim ftn As New FlyTreeNode()
            ftn.Text = HttpUtility.HtmlEncode(subDir.Name)
            ftn.Value = subDir.FullName
            ftn.NavigateUrl = "javascript:alert('hello');"
            ftn.NavigateTarget = "frmFilesList"
            nodes.Add(ftn)
Link Posted: 04-Jul-2009 04:40
Cassini avatar
Cassini
Total Posts:0
Joined:4/26/2024
It works, thank you.
Link Posted: 03-Aug-2009 03:08
ConstructingInsight avatar
ConstructingInsight
Total Posts:0
Joined:4/26/2024
I can't get this to work when the node has a check box.

Is there a way to hook up an extra on click handler when IsCheckbox is true?
Link Posted: 03-Aug-2009 03:52
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:4/26/2024
To handle checkbox changes, you need to use OnNodeEventJavascript  javascript handler
See here:
http://www.9rays.net/asp.net_2/treeview/miscpages/doc/ClientEvents.aspx

You need to handle for cases when eventType parameter is checked or unchecked

Also here is sample usage for this event:
http://www.9rays.net/asp.net_2/treeview/Demo_Checkboxes_Adv.aspx
Link Posted: 03-Aug-2009 21:51
ConstructingInsight avatar
ConstructingInsight
Total Posts:0
Joined:4/26/2024
Thanks, but I didn't really make my problem very clear with hindsight...

I have a very large tree view set up, that uses on demand loading. When lots of nodes have been added to the tree, it takes a significant amount of time to check/uncheck the check boxes. Its using the same code that is shown in the "checkboxes scripting" example to achieve this.

I am attempting to incorporate the jquery blockUI plugin to the treeview so it appears to "go busy" when the user performs a long running action. This works great for the on demand loading, by using the expanded and populated events to control the blocking and unblocking. It doesn't work so well for the checking and unchecking events, the tree does not appear to go busy while the long running action is taking place. This is almost as if the tree is performing a lot of tasks before it reaches the check event. As the javascript is obfuscated it makes it very difficult to work out exactly whats going on.

I am attempting to find an earlier event than the checked event of the node event handler to activate the blockUI plugin and make the tree appear to be busy performing the action.
Link Posted: 04-Aug-2009 18:14
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:4/26/2024
Actually, for large amounts of nodes "scripting checkboxes" code will always take much time, because it recursively loops for every check/uncheck.

If you need to handle a DOM-level event by jQuery (which is a nice library), then you can use jQuery selectors to fetch all flytreeview checkbox elements (which are actually img elements) and subscribe to click event of those.

You can use Firebug or IE Dev Toolbar to see what CSS classes are used by checkboxes, so you can use them as in jquery selector $(".checkboxclass").

For example at http://www.9rays.net/asp.net_2/treeview/Demo_Checkboxes_Adv.aspx
Checkbox class is "nrf0221-0", so I can use
$(".nrf0221-0").click(function(){alert("Checkbox clicked!");});

If you are familiar with jQuery selectors, then you might be able to find some other approaches to select checkboxes.
Link Posted: 04-Aug-2009 21:23
ConstructingInsight avatar
ConstructingInsight
Total Posts:0
Joined:4/26/2024
Thank you for the comprehensive reply.

I wasn't sure if I could rely on the checkbox class being the same all of the time and therefore whether I could hard code it in the way that you suggest. I found a much more complicated way of achieving the same result by applying a content template to each node and using a css class on the node. I then used  $('.node').parent().parent().prev().children() to select the check box. Seems pretty crazy now I know that the node class is not generated! Maybe that would have been a good question to ask too!

I may choose to use mouseup instead of click, as this should guarantee it will happen before the click event of the flytreeview.

I have also tried using setTimeout to execute the 'scripting checkboxes' code and help prevent the browser locking up, have you ever tried that?
Link Posted: 04-Aug-2009 21:31
EvgenyT avatar
EvgenyT
Total Posts:0
Joined:4/26/2024
Okay, there can be more complicated selectors.
You can set a dummy CSS class for nodes in designer (say "node").
Then do something like this
$("div:has(div.node) > div:first_or_whaeverselector") to select parent element of node, and then have some logic to find checkbox image (my code is just example of how it will look like, not something tested and working).

This way will definitely work much faster than looping over all nodes and select parent().parent()...

I have also tried using setTimeout to execute the 'scripting checkboxes' code and help prevent the browser locking up, have you ever tried that?

No. But of course it can help, though it will introduce some additional complexity.
Share:

Company  |  Privacy  |  Legal Information

© 1999-2024 9Rays.Net. All rights reserved.