jQuery UI Widgets Forums Navigation Tree Tree and scrollbar

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Tree and scrollbar #66176

    shardik
    Participant

    Hallo
    I’ve a tre view with a lot of sub element (3 level)
    My tree load the sub-element with json and that vork very good (it’s a great job)
    The problem is when I select a element ($(‘#jqxTree’).jqxTree(‘selectItem’, element);) in any position on my tree, but this tree don’t scroll to show me the element selected
    Can I move the scroll bar to show me the selected item?
    Is very good if the element selected is in the top position.

    Merci
    Shardik

    Tree and scrollbar #66177

    shardik
    Participant
    <div id='jqxTree'>
        <ul>
            <li item-selected='true'>Home</li>
            <li item-expanded='true'>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li id="government">Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </div>
    <input type="button" style="margin: 10px;" id="jqxbutton" value="Select 'Government'" />

    `$(‘#jqxTree’).jqxTree({
    height: ‘100px’,
    width: ‘300px’,
    theme: ‘energyblue’

    });
    $(“#jqxbutton”).jqxButton({
    theme: ‘energyblue’,
    width: 200,
    height: 30
    });
    $(‘#jqxbutton’).click(function () {
    $(“#jqxTree”).jqxTree(‘selectItem’, $(“#government”)[0]);
    });`

    Tree and scrollbar #66181

    Nadezhda
    Participant

    Hello Shardik,

    You can use ‘ensureVisible’ method to ensure the visibility of dynamically selected item. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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: '100px',
                    width: '300px',
                });
                $("#jqxbutton").jqxButton({
                    width: 200,
                    height: 30
                });
                $('#jqxbutton').click(function () {
                    $("#jqxTree").jqxTree('selectItem', $("#government")[0]);
                    $('#jqxTree').jqxTree('ensureVisible', $("#government")[0]);
                });
    
            });
        </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 id="government">Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
                </li>
            </ul>
        </div>
        <input type="button" style="margin: 10px;" id="jqxbutton" value="Select 'Government'" />
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.