Accessing node attributes with jQuery assigned mouseup event handler

[Jeremy Cavner]

I want to use jQuery to assign an event handler for MouseUp on nodes in the treeview, like this:

$("div.issuesTree span.issueTitle").mouseup(handleMouseup);

[I gave the tree a css class of "issuesTree" and the nodes a css class of "issueTitle"]

In the handleMouseup function, I want to be able to access the attributes of the node, similar to this example, from:

http://www.telerik.com/help/aspnet-ajax/tree_attributesclientside.html

function onNodeClicked(sender, args)
{
     var node = args.get_node();
     alert(node.get_attributes().getAttribute("ScientificName"));
     //you can also set attributes, like:
     //node.get_attributes().setAttribute("ScientificName");
}

 

The above example includes setting the RadTreeView property, OnClientNodeClicked, in which the Telerik RadTreeNode is in the args object.

Within my mouseup handler, is there a way to access this node, so that I can access its attributes?

 

Also note: My page already has jQuery 1.3.2 referenced directly, and I read that including the RadTreeView will also include jQuery, but with $telerik.$ as the default alias. Trying to use $telerik.$(“selector”).mouseup(…) didn’t seem to help… $telerik.$ is shown as undefined in my debugger.

I got the idea to try the $telerik.$ alias from reading, "Using jQuery," here:
http://www.telerik.com/help/aspnet-ajax/using-jquery.html

I’m using Visual Studio 2008.

Telerik.Web.UI.dll
File/product version: 2008.2.1001.20

Thanks in advance for any help or tips to accomplish what I need, by whatever method you might suggest.

[Veselin Vasilev]

Hello Jeremy Cavner,

jQuery has been added to RadTreeView in Q3 2008 which is newer than your version hence $telerik.$ is undefined. In this case manually reference the jQuery library and directly use the $ alias.

Here is how your handler might look like :

function handleMouseup(e) {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree._extractNodeFromDomElement(this);
    alert(node.get_attributes().getAttribute("ScientificName"));
}

Here I am using a private method to extract the node from the dom element (this).


Hope this helps.

Best wishes,
Veskoni
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.