jQuery UI Widgets Forums Navigation Tree jqxTree Hyperlink within Tree

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxTree Hyperlink within Tree #61465

    jqwidgetsdev
    Participant

    Hello.

    Is there a way to create a hyperlink in jqxTree, and have the hyperlink target another node in the same jqxTree?
    How can this be accomplished?

    Thank you.

    jqxTree Hyperlink within Tree #61471

    Dimitar
    Participant

    Hello jqwidgetsdev,

    Basically, when you click one tree item, you wish to select another. Is that correct?

    Best Regards,
    Dimitar

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

    jqxTree Hyperlink within Tree #61479

    jqwidgetsdev
    Participant

    Hello Dimitar.

    Yes, that is correct. The tree item should have a hyperlink to another tree item.

    Best regards.

    jqxTree Hyperlink within Tree #61520

    Dimitar
    Participant

    Hi jqwidgetsdev,

    Here is an example using selectItem:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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 () {
                // Create jqxExpander
                $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
                // Create jqxTree
                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" }
                ];
    
                $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
                $('#jqxTree').jqxTree('selectItem', null);
    
                $('#jqxTree').on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var items = $('#jqxTree').jqxTree('getItems');
                    if (label == "Mail") {
                        $('#jqxTree').jqxTree('selectItem', items[3]);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxExpander'>
                <div>
                    Folders
                </div>
                <div style="overflow: hidden;">
                    <div style="border: none;" id='jqxTree'>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    jqxTree Hyperlink within Tree #61556

    jqwidgetsdev
    Participant

    Thank you Dimitar for showing the way. This works like a charm.

    Two follow-up questions

    1- How can I make the item with label = ‘Mail’ appear with an underline, indicating that the item references another item?
    2- After the selectItem method is called, how can I put focus on that specific item in case there are many items in the tree?

    Thanks & regards.

    jqxTree Hyperlink within Tree #61581

    Dimitar
    Participant

    Hi jqwidgetsdev,

    Here is an updated version of the example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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 () {
                // Create jqxExpander
                $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
                // Create jqxTree
                var source = [
                {
                    icon: "../../images/mailIcon.png", html: "<span style='text-decoration: underline;'>Mail</span>", 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" }
                ];
    
                $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
                $('#jqxTree').jqxTree('selectItem', null);
    
                $('#jqxTree').on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var items = $('#jqxTree').jqxTree('getItems');
                    if (label == "Mail") {
                        $('#jqxTree').jqxTree('selectItem', items[3]);
                        $('#jqxTree').jqxTree('ensureVisible', items[3].element);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxExpander'>
                <div>
                    Folders
                </div>
                <div style="overflow: hidden;">
                    <div style="border: none;" id='jqxTree'>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.