jQuery UI Widgets Forums Navigation Tree Add images/icons to tree nodes programatically

This topic contains 9 replies, has 3 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • gmarrufo
    Member

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

    Thanks

    G


    Dimitar
    Participant

    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/


    gmarrufo
    Member

    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


    Dimitar
    Participant

    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/


    gmarrufo
    Member

    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


    Dimitar
    Participant

    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/


    gmarrufo
    Member

    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


    Dimitar
    Participant

    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/


    Raithyn
    Participant

    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


    Dimitar
    Participant

    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/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.