jQuery UI Widgets Forums Navigation Tree How to dynamically insert HTML LI items

This topic contains 8 replies, has 3 voices, and was last updated by  Peter Stoev 12 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • How to dynamically insert HTML LI items #1856

    MikeA
    Member

    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

    How to dynamically insert HTML LI items #1857

    support
    Participant

    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

    • This reply was modified 12 years, 3 months ago by  support.
    • This reply was modified 10 years, 5 months ago by  support.
    How to dynamically insert HTML LI items #1870

    MikeA
    Member

    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

    How to dynamically insert HTML LI items #1871

    MikeA
    Member

    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

    • This reply was modified 12 years, 3 months ago by  MikeA.
    • This reply was modified 12 years, 3 months ago by  MikeA.
    • This reply was modified 12 years, 3 months ago by  MikeA.
    • This reply was modified 12 years, 3 months ago by  MikeA.
    • This reply was modified 10 years, 5 months ago by  MikeA.
    How to dynamically insert HTML LI items #1876

    support
    Participant

    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

    How to dynamically insert HTML LI items #1877

    MikeA
    Member

    Ok thanks Peter for your help on this.
    – Mike

    How to dynamically insert HTML LI items #1922

    Peter Stoev
    Keymaster

    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

    How to dynamically insert HTML LI items #1956

    MikeA
    Member

    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

    • This reply was modified 12 years, 2 months ago by  MikeA.
    How to dynamically insert HTML LI items #1959

    Peter Stoev
    Keymaster

    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

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

You must be logged in to reply to this topic.