How can I automatically resize jqxTree and jqxSplitter? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 4 replies, has 2 voices, and was last updated by kerusia 11 years ago.

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

Author

How can I automatically resize jqxTree and jqxSplitter? Posts

May 7, 2012 at 7:28 am How can I automatically resize jqxTree and jqxSplitter? #3914

Member

Hello,
I’m making the layout sample using the jQuery-widget trial version.
When I adjust the jqxSplitter size after attaching the jqxTree on jqxSplitter, I want to make the sample to change the jqxTree size automatically as the adjusted the jqxSplitter size.
If the overflow text exists, I want to use the scrollbar in jqxTree.
Can I make the layout sample using the jQuery-widget?

<!DOCTYPE html>

<html lang="ko">

<head>

<title>Splitter</title>

<link rel="stylesheet" href="widget/styles/jqx.base.css" type="text/css" />

<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="widget/jqxcore.js"></script>

<script type="text/javascript" src="widget/jqxsplitter.js"></script>

<script type="text/javascript" src="widget/jqxbuttons.js"></script>

<script type="text/javascript" src="widget/jqxscrollbar.js"></script>

<script type="text/javascript" src="widget/jqxpanel.js"></script>

<script type="text/javascript" src="widget/jqxtree.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// 1. Create jqxSpliter

	$('#mainSplitter').jqxSplitter({ width: 800, height: 800, orientation: 'horizontal', panels: [{size: 650}, {size:150}] });

	$('#viewSplitter').jqxSplitter({ width: 800, height: 650, orientation: 'vertical', panels: [{size: 200}, {size: 600}] });

	$('#mainSplitter').jqxSplitter({ splitBarSize: '3px'});

	$('#viewSplitter').jqxSplitter({ splitBarSize: '3px'});

	$('#headerSplitter').jqxSplitter('disable');

// 2. Create tree source date

var source = [

		{label: "Root1", expanded: true, selected: true, items: [

			{label: "Group1", items: [

				{label: "Group1-1", items: [

					{label: "Group1-1-1", items: [

						{label: "Group-1-1-1-1-1-1-1-1-1"}

]}

]}

]}

]},

		{label: "Root2", items:[

			{label: "Group1"}

]}

];

	$('#treeView').jqxTree({height: '100px', width: '100%', source: source});

// 3. Set event

	$('#viewSplitter').bind('resize', function(e){

		$('#treeView').jqxTree({width: $('#viewSplitter').width() + 'px'});

});

});

</script>

</head>

<body>

<div id="jqxWidget">

		<div id="mainSplitter">

			<div id="viewSplitter">

				<div id="treeView">

				</div>

				<div id="listView">

Right Panel

				</div>

			</div>

			<div id="outputSplitter">

Bottom Panel

			</div>

		</div>

</div>

</body>

</html>

This topic was modified 11 years ago by kerusia. Reason: html code highliting
This topic was modified 11 years ago by kerusia.
This topic was modified 11 years ago by kerusia.
This topic was modified 11 years ago by kerusia.

May 7, 2012 at 11:43 am How can I automatically resize jqxTree and jqxSplitter? #3945

Minko

Blocked

Hello kerusia,

you can do this with the new release of jQWidgets v2.1.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

May 8, 2012 at 12:40 am How can I automatically resize jqxTree and jqxSplitter? #3957

kerusia

Member

Hello Minko.
I test the issue using jQWidgets v2.1.

The result, horizontal scrollbar appered at the jqxTree, but vertical scrollbar don’t appeared there.
In addition, horizontal scrollbar was not appeared end point area.

check please~

May 8, 2012 at 5:17 am How can I automatically resize jqxTree and jqxSplitter? #3958

Minko

Blocked

Hello,

make sure you’ve set jqxTree’s height to ‘100%’:

$('#treeView').jqxTree({ height: '100%', width: '100%', source: source });

Here is the whole source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows a complex layout implementation that shows nesting multiple splitters.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.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/jqxtree.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#mainSplitter').jqxSplitter({ width: 800, height: 800, orientation: 'horizontal', panels: [{ size: 650 }, { size: 150}] });
        $('#viewSplitter').jqxSplitter({ width: 800, height: 650, orientation: 'vertical', panels: [{ size: 200 }, { size: 600}] });
        $('#mainSplitter').jqxSplitter({ splitBarSize: '3px' });
        $('#viewSplitter').jqxSplitter({ splitBarSize: '3px' });
        $('#headerSplitter').jqxSplitter('disable');
        var source = [
		{ label: "Root1", expanded: true, selected: true, items: [
			{ label: "Group1", items: [
				{ label: "Group1-1", items: [
					{ label: "Group1-1-1", items: [
						{ label: "Group-1-1-1-1-1-1-1-1-1" }]
					}]
				}]
			}]
		},
		{ label: "Root2", items: [
			{ label: "Group1" }]
		}];
        $('#treeView').jqxTree({ height: '100%', width: '100%', source: source });
    });
</script>
</head>
<body>
<div id="jqxWidget">
    <div id="mainSplitter">
	    <div id="viewSplitter">
		    <div id="treeView">
		    </div>
		    <div id="listView">
                Right Panel
		    </div>
	    </div>
	    <div id="outputSplitter">
            Bottom Panel
	    </div>
    </div>
</div>
</body>
</html>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

May 9, 2012 at 6:07 am How can I automatically resize jqxTree and jqxSplitter? #3998

kerusia

Member

I complete the issue~
Thanx Minko ^^

regards,
Kerusia

Author

Posts

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

You must be logged in to reply to this topic.