Inserting jqxTree item at specified location

[wojtekMember]

Is there a way to insert a jqxTree item at a specified location? ‘addTo’ appends new item as the last child of the parent argument but I don’t see a method (something like ‘insertAt’) that would allow me to  insert it as the first (or say i-th) child?

thanks

Wojtek

[Peter StoevKeymaster]

Hi Wojtek,

There’s no built-in API for inserting a tree item before/after a specific item. I will create a new work item regarding this and we will implement it in the future versions of jQWidgets. Unfortunately, there’s no workaround that I can suggest you at present. It is possible to add a new item only as a last child of a parent item or as a last child to the tree.

A possible solution could be to dynamically change the entire data source(if you populate the jqxTree from object).

For example:

Initial Tree:

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" },
    ];
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '250px'});

Change data source:

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" },
    ]
    }
    ];
$("#jqxTree").jqxTree({ source: source });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts