Dynatree - Where can I store additional info in each node?

Question

I am currently testing out Dynatree and I just want to ask if there is an available property/parameter in which I can store additional info (like property 'value' in ASP.NET TreeView) for each node? Thanks in advance.

Answer 1

You can add custom properties using HTML with the data attribute (works, although a validator might complain.)

For example add a new url property:

<ul>
    <li data="url: 'http://jquery.com'">jQuery home
    <li data="url: 'http://docs.jquery.com'">jQuery docs

Or when loading from JSON or JS objects:

children: [
    { title: "jQuery home", url: "http://jquery.com" },
    { title: "jQuery docs", url: "http://docs.jquery.com" },

After that, you can access it like so:

onActivate: function(node) {
    if( node.data.url )
        window.open(node.data.url);
    $("#echoActive").text(node.data.title);
},

EDIT: Starting with release 1.2 <a> tags are natively supported ( How to make hyperlinks in dynaTree jQuery plugin clickable? ).

Answer 2

If you're adding data to be read by dynatree then mar10 is correct. For instance, if you want to have dynatree not display icons you can use the following:

<li data="icon: 'null'">

Unfortunately this isn't really valid HTML and my HTML5 validator (Visual Studio 2010 SP1) likes to complain about it.

If you simply want to embed your own data HTML5 allows you to add data-* attributes to your li elements:

<li data-myprop="myvalue">

Here's some additional info from HTML5Doctor.