jQWidgets Forums

Tagged: jqxnavigationbar, jqxtree, navigationbar, Tree

This topic contains 5 replies, has 3 voices, and was last updated by castt 12 years, 1 month ago.

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

Author

Place tree into other control Posts

April 8, 2013 at 7:58 am Place tree into other control #18804

Mhanna AbuTareef

Participant

Hi,

I’m trying to place jqxTree into jqxNavigationBar’s borders.

the tree initialized well, but it expanded outside the navigation bar’s border.

Any Fix?

April 8, 2013 at 8:23 am Place tree into other control #18819

Mhanna AbuTareef

Participant

I’m using this code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="Scripts/jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/gettheme.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxdocking.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxnavigationbar.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="Scripts/jqwidgets/jqxtree.js"></script>
<!-- TESTING -->
<script type="text/javascript">
$(document).ready(function () {
var source = [
{ label: "Item 1", expanded: true, items: [
{ label: "Item 1.1" },
{ label: "Item 1.2", selected: true }
]
},
{ label: "Item 2" },
{ label: "Item 3" },
{ label: "Item 4", items: [
{ label: "Item 4.1" },
{ label: "Item 4.2" }
]
},
{ label: "Item 5" },
{ label: "Item 6" },
{ label: "Item 7" }
];
// Create jqxTree.
$('#jqxTree').jqxTree({ source: source, width: '300px' });
///
$("#jqxnavigationbar").jqxNavigationBar({ width: 300, height: 'auto' });
});
</script>
</head>
<body class='default'>
<div id='jqxnavigationbar'>
<div>Pages</div>
<div>
<div id='jqxlistbox'></div>
<form id="addPageForm" action="./">
<input type="text" id="addPageInput"/>
</form>
</div>
<div>Tree</div>
<div id='jqxTree'>
</div>
</div>
</body>
</html>

April 9, 2013 at 11:18 am Place tree into other control #18882

Dimitar

Participant

Hello

Here is the solution. The issue came from trying to initialize the tree from the navigation bar’s content div.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <!-- TESTING -->
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
{ label: "Item 1", expanded: true, items: [
{ label: "Item 1.1" },
{ label: "Item 1.2", selected: true }
]
},
{ label: "Item 2" },
{ label: "Item 3" },
{ label: "Item 4", items: [
{ label: "Item 4.1" },
{ label: "Item 4.2" }
]
},
{ label: "Item 5" },
{ label: "Item 6" },
{ label: "Item 7" }
];
            // Create jqxTree.
            $('#jqxTree').jqxTree({ source: source, height: '99%', width: '99%' });
            ///
            $("#jqxnavigationbar").jqxNavigationBar({ width: 300, height: 300 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxnavigationbar'>
        <div>
            Pages</div>
        <div>
            <div id='jqxlistbox'>
            </div>
            <form id="addPageForm" action="./">
            <input type="text" id="addPageInput" />
            </form>
        </div>
        <div>
            Tree</div>
        <div>
            <div id='jqxTree'>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 9, 2013 at 12:44 pm Place tree into other control #18898

Mhanna AbuTareef

Participant

Hi,
Make sense.
Anyway, why are you using 99% (not 100%) in tree dimension?

Thanks,

April 10, 2013 at 10:11 am Place tree into other control #18988

Dimitar

Participant

Hi Mhanna AbuTareef,

When it is 100%, scrollbars show.

Best Regards,
Dimitar

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

April 23, 2013 at 1:26 am Place tree into other control #19776

castt

Participant

99% height of the tree works, but now I see border of the tree which is shorter then navigation panel by couple pixels(depends on window size). How can I fix it?

Author

Posts

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

You must be logged in to reply to this topic.