How to dynamically insert HTML LI items

[MikeAMember]

Hi,
I am trying to insert LI elements into a jqxtree. However, I can only seem to get simple text inserted into a JQTree.

Here is my test code.
var source = [];
//source[0] = { label: Category }; // this works, but I need images and other html elements in the LI....
source[0] = { html: " ABC" };
$('#DashboardTree').jqxTree('addTo', source[0]); //-- This does not work, all I see in Treeview is 'undefined'

Question: How do I insert a LI which has other HTML elements in it into a JQTree ?
In the sample you provide the LI’s are already in the HTML with an image, I need to add them dynamically.
My guess is I am missing something simple..

P.S. If i add an LI the standard way (TreeRoot(UL).append(LI)…) , that works, however I see that this may be not the proper way as my tree does not collapse properly. I would like to use JQ api to insert items into a tree.

Thanks,
Mike

[supportParticipant]

Hi Mike,

To add ‘html’ item to the Tree widget, you can use this:

$('#jqxTree').jqxTree('addTo', { label: '<b>Item</b>' });

It is possible to insert only one item with the ‘addTo’ method.

To add a Tree item as a child of another item, you need to pass the parent element as a second parameter of the ‘addTo’ method.

  $('#jqxTree').jqxTree('addTo', { label: '<b>Item</b>' }, $('#home')[0]);

Best Regards,,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[MikeAMember]

Hi Peter,
Ah yes, I was using the ‘html:’ keyword instead of ‘label:’ (I had carried that over from the JQXListBox code, but I see it’s different for the tree ..)

I have the HTML inserted into a tree leaf now, I have an image in the leaf, i want that image to be 24px in size. I can style it in CSS to be 24px fine, but when the tree is shown the Tree item is offset. (See Pic)
Tree Item is Offset

Do you support changing the height of a Tree item? Or a way where a Tree item lines up properly when an image is bigger than the default height of a tree item?

Thanks,
Mike

[MikeAMember]

Forgot to show the code .. here it is

$('#DashboardTree').jqxTree('addTo', { label: "<img style='width:24px;' src = '../images/folder.png'/> <span><b>Item</b></span> " });

– Mike

[supportParticipant]

Hi Mike,

Thank you for the feedback.

It makes sense. We will add support in the next version for ‘html’ property and custom items height in the Tree, too. In this version, the items height is calculated automatically by a span tag that wraps each tree item but this seems to work correctly only for simple items but not for items with additional nested tags.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MikeAMember]

Ok thanks Peter for your help on this.
– Mike

[Peter StoevKeymaster]

Hi Mike,

In the newest release(available from yesterday) we improved the jqxTree rendering by adding icon and iconsize options in the source object’s initialization.

For example:

        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',});

The above code is from the jqxTree’s Events demo.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[MikeAMember]

Peter,
I downloaded the 1.5 version. I was in the process of trying the new Tree options out, but I have run into a strange thing.
I am using IE9, when I have a tree which has a vertical scrollbar, I can click on the vertical scroll bar (middle section Tab) and scroll the items fine, but it does not detect the mouseup event when i am done scrolling. It continues to scroll the content even though my mouse-left button is not down anymore. I tested the SAME tree/app on Chrome and it works properly.
Can you check and see if IE9 and the new version of the tree has an issue with exiting scroll mode?

Thanks,
Mike

[Peter StoevKeymaster]

I tested the reported issue with IE9, too. This happens on my side when the mouse up is over a Tree item. It the mouse up is in the tree’s empty area or outside the Tree it is Ok. We will upload a fix as soon as possible. Thank you.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[Author]

Posts