Add images/icons to tree nodes programatically

[gmarrufoMember]

Is it possible to add images/icons next to the items (nodes) programatically?

Thanks

G

[DimitarParticipant]

Hello gmarrufo,

You cannot add the icons once an item has been created. A possibility is to set the source property again, with the desired changes. However, you can add an item with icon programmatically:

            $('#jqxTree').jqxTree('addTo', { icon: "../../images/mailIcon.png", label: "Mail" });

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gmarrufoMember]

Hi Dimitar,

Thanks for the response, one question though:

I notice the tree uses “arrows” (left, right, down, up), what if I can change those icons with my own? Is that an issue at the CSS level I presume?

Thanks again for your time.

GM

[DimitarParticipant]

Hi GM,

With the following style you can change the collapse and expand arrows of a tree:

    <style type="text/css">
        .jqx-tree-item-arrow-collapse, .jqx-tree-item-arrow-collapse-hover
        {
            background-image: url("../../../2.6.1/images/previous.png") !important;
        }
        .jqx-tree-item-arrow-expand, .jqx-tree-item-arrow-expand-hover
        {
            background-image: url("../../../2.6.1/images/next.png") !important;
        }
    </style>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gmarrufoMember]

Hi Dimitar,

Thanks for the info, I’m doing this now:

$(‘#jqxTree’).jqxTree({ height: ‘500px’, width: ‘400px’, theme : summer, toggleMode: ‘none’ });

for(var i =0; i < records.length; i++) {
$('#jqxTree').jqxTree('addTo', { icon: "resources/img/page-foldericon.png", label: records[i] });
}

And it works however my label gets chopped up at the end missing at least one letter or two. Also because I have to recreate the tree multiple times I use the "clean" tree and I don't know because that sometimes my browser throws a "Script busy, cancel or continue"

Any ideas?

Thanks,

GM

[DimitarParticipant]

Hi GM,

Note that you can add the icons before initialization, as is done in the demo Events.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gmarrufoMember]

Hi Dimitar,

Only if the source is actually written in the code like this:
var source = [
{ icon: “../../images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “../../images/calendarIcon.png”, label: “Calendar” },
{ icon: “../../images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{ icon: “../../images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “../../images/folder.png”, label: “Admin” },
{ icon: “../../images/folder.png”, label: “Corporate” },
{ icon: “../../images/folder.png”, label: “Finance” },
{ icon: “../../images/folder.png”, label: “Other” },
]
},
{ icon: “../../images/recycle.png”, label: “Deleted Items” },
{ icon: “../../images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “../../images/settings.png”, label: “Settings” },
{ icon: “../../images/favorites.png”, label: “Favorites” },
];

but in my case data is coming using this:

var records = s.split(“\|”);

where s = “Cost Center|Actuarial|etc”;

I need to create the tree first and then “addTo” in order for the Tree to be populated with the issues I mentioned before.

Any ideas?

Thanks,

G

[DimitarParticipant]

Hi G,

Unfortunately, this is all the help we can offer on the matter. We will consider implementing adding icons to tree items programmatically in future versions.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[RaithynParticipant]

Not to necro this thread, but has there been any update to allow programmatically updating icons? That is definitely a feature I would use.

Thanks
Raithyn

[DimitarParticipant]

Hello Raithyn,

The feature has been implemented. Items with icons can be added the following way:

$('#jqxTree').jqxTree('addTo', { icon: "../../images/folder.png", label: "Folder" }, firstItemElement);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts