Get tree node on mouse over - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: get, item, jqxtree, mouseover, Tree

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

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

Author

Get tree node on mouse over Posts

February 5, 2013 at 7:06 am Get tree node on mouse over #14709

abc

Participant

Hi,

How to get tree node just on mouse over of that tree node(Not after selecting the node, only on mouse over) ?

is it possible?

February 5, 2013 at 9:05 am Get tree node on mouse over #14724

Dimitar

Participant

Hello abcd,

Here is how to do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree can easily display images next to each item. In order to achieve that, you need to add 'img' element inside a 'li' element." />
    <title id='Description'>The jqxTree in this demo displays images next to the tree items.
    </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.2.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 = getTheme();
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme });
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
            $("#jqxTree .jqx-tree-item").mouseenter(function (event) {
                var item = event.toElement.parentElement;
                var text = event.toElement.innerText;
                alert(text);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders</div>
            <div id='jqxTree'>
                <ul>
                    <li item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
                            item-title="true">Mail</span>
                        <ul>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
                                    item-title="true">Calendar</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">Contacts</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Admin</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Corporate</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Finance</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Today</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Week</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
                                        item-title="true">Notes</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
                                        item-title="true">Settings</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                        item-title="true">Favorites</span> </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

February 5, 2013 at 9:36 am Get tree node on mouse over #14726

abc

Participant

Hi Dimitar,

I have tried this code, but it giving me an error – “TypeError: event.toElement is undefined”

February 5, 2013 at 9:47 am Get tree node on mouse over #14727

Dimitar

Participant

Hi abcd,

Could you, please, provide us with more information, such as the jQWidgets and browser versions you are using.

Best Regards,
Dimitar

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

February 5, 2013 at 10:04 am Get tree node on mouse over #14731

abc

Participant

Hi Dimitar,

I’m using
Mozilla Firefox version 18.0.1 and
JqWidget version 2.5

February 5, 2013 at 10:18 am Get tree node on mouse over #14732

Dimitar

Participant

Hi abcd,

It seems Firefox does not support toElement. Here is a better solution:

            $("#jqxTree .jqx-tree-item").mouseenter(function (event) {
                var item = event.target.parentElement;
                var text = event.target.textContent;
                var text2 = text.replace(/\s+/g, ' ');
                alert(text2);
            });

Best Regards,
Dimitar

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

February 5, 2013 at 12:16 pm Get tree node on mouse over #14738

abc

Participant

Thank You So much Dimitar

Author

Posts

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

You must be logged in to reply to this topic.