selectItem method and automatic collapse - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: expand tree item, javascript tree, jquery tree, jqxtree, select tree item

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

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

Author

selectItem method and automatic collapse Posts

August 3, 2012 at 11:01 am 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

August 4, 2012 at 8:54 pm selectItem method and automatic collapse #6581

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

August 5, 2012 at 7:28 am selectItem method and automatic collapse #6586

vlad

Member

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

Author

Posts

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

You must be logged in to reply to this topic.