jQWidgets Forums

Tagged: javascript tree, jQuery TreeView, jqxtree

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

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

Author

Tree: Display already selected node name on click of that node Posts

October 9, 2012 at 7:52 am Tree: Display already selected node name on click of that node #9085

abc

Participant

Using ‘select’ method of ‘bind’ event, i displayed the name of selected node of tree, but when i click on that selected node again, it is not displaying the name …

plz tell me how to do ?

October 9, 2012 at 7:58 am Tree: Display already selected node name on click of that node #9090

Peter Stoev

Keymaster

Hi abcd,

If the tree item is selected, the ‘select’ event of jqxTree will not be raised again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 9, 2012 at 8:48 am Tree: Display already selected node name on click of that node #9095

abc

Participant

Hi Peter,
thanx for reply,

i want to display that selected item again on single click…what i need to do to display it..?
any solution?

October 9, 2012 at 11:59 am Tree: Display already selected node name on click of that node #9104

Peter Stoev

Keymaster

Hi abcd,

As a solution, you can do the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Tree Sample</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ height: '300px', width: '300px' });
            $("#jqxTree .jqx-tree-item").click(function (event) {
                var clickedElement = event.target;
                var elementName = clickedElement.innerHTML;
                alert(elementName);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree'>
        <ul>
            <li item-selected='true'>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>