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.

score 6 · Accepted Answer · edited May 23 '17 at 10:27

6

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? ).

edited May 23 '17 at 10:27

Community

1
1

answered May 16 '11 at 12:11

mar10

14,320
5
39
64

1

I was trying to access the url as node.url, instead of node.data.url. Thanks for the heads up! – theTuxRacer Jan 16 '12 at 10:30
Right. I get how it works now. The information is there in data. It just doesn't show up in the HTML markup. – James P. Aug 30 '13 at 21:58
I add custom properties using HTML but after run js that remove attribute, why? I must set a property in dyntree plugin? – Hamid Bahmanabady Jul 08 '14 at 13:53

score 0 · Answer 2 · answered Nov 14 '11 at 09:04

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.

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

2 Answers2