jQuery UI Widgets Forums Navigation Tree Make only deepest level tree elements clickable

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

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

  • 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.


    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/


    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.


    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/

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

You must be logged in to reply to this topic.