jQuery UI Widgets Forums Navigation Tree selectItem method and automatic collapse

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • selectItem method and automatic collapse #6567

    vlad
    Member

    Hello,

    First of all, congratulations on a great product! I’ve been able to get it going in just one day, despite my shortcomings in JS.

    I have two related question regarding the selectItem method for trees:

    1. your documentation states to use the syntax $(‘#jqxTree’).jqxTree(‘selectItem’, element); But how does one get a handle on “element”, the 2nd parameter? The only way I’ve been able to go about it so far is a bit tedious – surely there must be a better way?

    var items = $(“#jqxTree”).jqxTree(‘getItems’);
    $.each(items, function () {
    if (this.id == myid) {
    $(‘#jqxTree’).jqxTree(‘selectItem’, this.element);
    return false;
    }
    });

    2. When using the code above, the item is properly selected but the branch of the tree where the item is found is not automatically expanded. Therefore the user is a bit confused, since the selection is not highlighted. Any way to do this automatically?

    Thanks again,

    Vlad


    Peter Stoev
    Keymaster

    Hi Vlad,

    To select an item, you can do the following:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxTree").jqxTree({ width: 200, height: 300});
    $("#jqxTree").jqxTree('selectItem', $("#solutions")[0]);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxTree'>
    <ul>
    <li>Home</li>
    <li id='solutions'>Solutions
    <ul>
    <li>Education</li>
    <li>Financial services</li>
    <li>Government</li>
    <li>Manufacturing</li>
    <li>Solutions
    <ul>
    <li>eLearning</li>
    <li>Mobile</li>
    <li>RIA</li>
    <li>Training</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Products
    <ul>
    <li>PC products</li>
    <li>Mobile products</li>
    <li>All products</li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

    2. To ensure that the selected item is in the view, you can do this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxTree").jqxTree({ width: 200, height: 300});
    $("#jqxTree").jqxTree('selectItem', $("#eLearning")[0]);
    $("#jqxTree").jqxTree('expandItem', $("#eLearning")[0]);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxTree'>
    <ul>
    <li>Home</li>
    <li id='solutions'>Solutions
    <ul>
    <li>Education</li>
    <li>Financial services</li>
    <li>Government</li>
    <li>Manufacturing</li>
    <li>Solutions
    <ul>
    <li id='eLearning'>eLearning</li>
    <li>Mobile</li>
    <li>RIA</li>
    <li>Training</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Products
    <ul>
    <li>PC products</li>
    <li>Mobile products</li>
    <li>All products</li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    vlad
    Member

    Excellent! I guess it was intuitive, except for the [0] at the end. Thanks Peter!

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

You must be logged in to reply to this topic.