jQWidgets Forums

Tagged: ensureVisible, hyperlink, item, jqxtree, Link, node, selectItem, target, Tree

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

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

Author

jqxTree Hyperlink within Tree Posts

October 21, 2014 at 11:26 pm jqxTree Hyperlink within Tree #61465

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.

October 22, 2014 at 5:16 am 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/

October 22, 2014 at 7:12 am 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.

October 23, 2014 at 5:37 am 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/

October 23, 2014 at 7:21 pm 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.

October 24, 2014 at 6:48 am 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/

Author

Posts

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

You must be logged in to reply to this topic.