Make only deepest level tree elements clickable - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: click, collapse, collapseItem, expand, expandItem, hasItems, hover, item, jqxtree, leaf, select, selectItem, Tree

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

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

Author

Make only deepest level tree elements clickable Posts

August 12, 2014 at 11:03 am Make only deepest level tree elements clickable #58267

dmathewes

Participant

I am using jqxtree to display a product’s options for a user to choose from. These options are organized hierarchically and I have the data populating the jqxtree beautifully. However, I need the user to only be able to click on the final elements of the tree, the ones that don’t have any child elements beneath them. Is there an option that accomplishes this, and if not, how might I get started customizing it? Thank you for your help.

August 12, 2014 at 11:34 am Make only deepest level tree elements clickable #58268

Dimitar

Participant

Hello dmathewes,

Here is an 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.10.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">
        $(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ height: '300px', width: '300px' });

            var selection = null;

            $('#jqxTree').on('select', function (event) {
                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                if (item.hasItems == true) {
                    $('#jqxTree').jqxTree('selectItem', selection);
                } else {
                    selection = item;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree'>
        <ul>
            <li>Home</li>
            <li item-expanded='true'>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 12, 2014 at 3:22 pm Make only deepest level tree elements clickable #58284

dmathewes

Participant

Thank you, I was able to get this to work, partly. The tree is in a dropdown box and if you click on a parent item, the box closes. The data does not get set, which is good, but it’s confusing to the user, I want the box to stay open.

My question is, is there a way to take the functionality of clicking on the expand arrow and make the parent node’s text behave the same way? Also, is there somewhere I can modify the style of a parent node so it doesn’t get highlighted on mouseover? The way it is now, it’s visually confusing.

Thanks again for your time, I have been trying to figure this out for a while.

August 13, 2014 at 5:18 am Make only deepest level tree elements clickable #58301

Dimitar

Participant

Hi dmathewes,

Here is an update of the example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.orange.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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">
        $(document).ready(function () {
            // Create jqxTree
            var theme = "orange";
            $('#jqxTree').jqxTree({ height: '300px', width: '300px', theme: theme });

            var selection = null;

            $('#jqxTree').on('select', function (event) {
                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                if (item.hasItems == true) {
                    $('#jqxTree').jqxTree('selectItem', selection);
                    if (item.isExpanded == true) {
                        $("#jqxTree").jqxTree('collapseItem', item);
                    } else {
                        $("#jqxTree").jqxTree('expandItem', item);
                    }
                } else {
                    selection = item;
                }
            });

            $(".jqx-tree-item").mouseenter(function (event) {
                var item = $('#jqxTree').jqxTree('getItem', $(event.target.parentElement)[0]);
                if (item.hasItems == true) {
                    $(event.target).removeClass("jqx-fill-state-hover");
                    $(event.target).removeClass("jqx-fill-state-hover-" + theme);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree'>
        <ul>
            <li>Home</li>
            <li item-expanded='true'>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.