jQuery UI Widgets › Forums › Navigation › Tree › jqxtree add icon for nodes and subnodes (load on demand)

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  kamran 10 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    jqxtree add icon for nodes and subnodes (load on demand) Posts
  • June 5, 2013 at 5:56 am jqxtree add icon for nodes and subnodes (load on demand) #22600

    kamran
    Member

    Hello there,

    How can I add icons for the jqxtree nodes and sub nodes when using load on demand version?

    Thanks,

    • This topic was modified 10 years, 6 months ago by  kamran.
    June 5, 2013 at 7:38 am jqxtree add icon for nodes and subnodes (load on demand) #22611

    Dimitar
    Participant

    Hello kamran,

    Please take a look at the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This sample demonstrates how to load Tree Items via Ajax
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create jqxTree
                var tree = $('#jqxTree');
                var source = [{
                    label: "Root", expanded: true,
                    items: [
                        { label: "Root Folder 1", items: [{ value: "ajax1.htm", label: 'Loading...' }] },
                        { label: "Root Folder 2", items: [{ value: "ajax2.htm", label: 'Loading...' }] }
                    ]
                }];
                tree.jqxTree({ source: source, theme: theme, height: 300, width: 200 });
                tree.bind('expand', function (event) {
                    var label = tree.jqxTree('getItem', event.args.element).label;
                    var $element = $(event.args.element);
                    var loader = false;
                    var loaderItem = null;
                    var children = $element.find('ul:first').children();
                    $.each(children, function () {
                        var item = tree.jqxTree('getItem', this);
                        if (item && item.label == 'Loading...') {
                            loaderItem = item;
                            loader = true;
                            return false
                        };
                    });
                    if (loader) {
                        $.ajax({
                            url: loaderItem.value,
                            success: function (data, status, xhr) {
                                var items = jQuery.parseJSON(data);
                                tree.jqxTree('addTo', items, $element[0]);
                                tree.jqxTree('removeItem', loaderItem.element);
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxTree">
        </div>
    </body>
    </html>

    with the files:

    ajax1.htm:

    [
    { "label": "Folder 1", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] },
    { "label": "Folder 2", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] },
    { "label": "Folder 3", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] }
    ]

    ajax2.htm:

    [
    {"label": "Folder 5" },
    {"label": "Folder 6" },
    {"label": "Folder 7" },
    {"label": "Folder 8" }
    ]

    and ajax.htm:

    [
    {"label": "Folder 9" },
    {"label": "Folder 10" },
    {"label": "Folder 11" },
    {"label": "Folder 12" }
    ]

    You may modify one of them (e.g. ajax1.htm:) in the following way to add an icon:

    [
    { "icon": "http://www.jqwidgets.com/jquery-widgets-demo/images/tree.png", "label": "Folder 1", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] },
    { "label": "Folder 2", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] },
    { "label": "Folder 3", "items": [{ "value": "ajax.htm", "label" : "Loading..." } ] }
    ]

    Best Regards,
    Dimitar

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

    June 6, 2013 at 1:15 am jqxtree add icon for nodes and subnodes (load on demand) #22654

    kamran
    Member

    thanks that helps

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.