jQWidgets Forums

Tagged: expand, jqxtree, Tree

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

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

Author

get Item expanded in jqxTree Posts

December 18, 2012 at 10:28 am get Item expanded in jqxTree #12506

Michael76

Member

Hi,

I have a jqxTree (collapsed) and then I select programmatically one Item in it.

$(“#myTree”).jqxTree(‘selectItem’, myelement);

I’d like to make this selected Item visible, i.e. expand it’s parent and parent of the parent and so on. How could I get it?

December 19, 2012 at 7:20 am get Item expanded in jqxTree #12552

Dimitar

Participant

Hello Michael76,

Here is an example that demonstrates how to achieve this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Tree Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.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' });
            $("#expandNine").click(function () {
                var ninthLi = $("li:eq(8)");
                var ninthItem = $('#jqxTree').jqxTree('getItem', ninthLi[0]);
                var firstParent = ninthItem.parentElement;
                $('#jqxTree').jqxTree('expandItem', firstParent);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="expandNine">
        Expand the element Photo</button>
    <div id='jqxTree'>
        <ul>
            <li>Home</li>
            <li>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video
                                <ul>
                                    <li>Photo</li>
                                    <li>Video</li>
                                </ul>
                            </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/

December 19, 2012 at 11:10 am get Item expanded in jqxTree #12580

Michael76

Member

Thank you very much, Dimitar, it works!

Author

Posts

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

You must be logged in to reply to this topic.