jQWidgets Forums

Tagged: ensureVisible, jqxtree, selectItem, Tree

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

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

Author

Tree and scrollbar Posts

January 29, 2015 at 2:18 pm Tree and scrollbar #66176

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

January 29, 2015 at 2:21 pm 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]);
});`

January 29, 2015 at 3:20 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.