Can we set Two contents in JqxDocking - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angularjs, change, collapse, content, docking, expand, jqxDocking, jqxwindow, set, setContent, window

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

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

Author

Can we set Two contents in JqxDocking Posts

September 29, 2014 at 11:40 am Can we set Two contents in JqxDocking #60246

Participant

I am using JqxDocking for window. in docking, If we click collapse button, that dock is collapsed. again click means its expanding. Now I want to change that content when I click collapse button. If I click again, the previous content have to show. Can I get this in Jqxdocking? or any some other JQwidget component have this facility?

September 29, 2014 at 12:04 pm Can we set Two contents in JqxDocking #60250

Dimitar

Participant

Hello Kavyad23,

Do you have only a single window in your docking? In that case, we recommend you use jqxWindow instead which has a setContent method which can be called on the collapse (or expand) event.

If not, please clarify your requirement (and provide us with a relevant sample code).

Best Regards,
Dimitar

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

September 29, 2014 at 12:26 pm Can we set Two contents in JqxDocking #60254

Kavyad23

Participant

Hi Dimitar,

The window count is N. Its depends upon the array size. so I used Docking.

<!DOCTYPE html>
<html ng-app="ForexOrderBookApp" lang="en">
<head>
<title>FX Portal</title>
<link rel="stylesheet" href="../CSS/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../CSS/MyStyle.css" type="text/css" />
<!-- Import all js file -->
<script type="text/javascript">
	var ForexOrderBookApp = angular.module("ForexOrderBookApp", [ "jqwidgets" ]);
	ForexOrderBookApp.filter('substringDecimal', function() {
		return function(str, start, end) {
			str = str.toString().split('.');
			return str[1].substring(start, end);
		};
	});

	ForexOrderBookApp.filter('substring', function() {
		return function(str) {
			str = str.toString().split('.');
			str = str[0] + "." + str[1].substring(0, 3);
			return str;
		};
	});
	ForexOrderBookApp.controller("ForexOrderBookController", function($scope) {
		$scope.currencyList = [];
		$scope.currencyList.push({
			currencyListId : "001",
			currencyPair : "USDINR",
			bank : "SBI",
			spot : "Spot(08-Aug-2014)",
			sellPriceLeft : "58.596667",
			footerPriceCenter : "93.8",
			buyPriceRight : "58.597923"
		});
		$scope.currencyList.push({
			currencyListId : "002",
			currencyPair : "USDINR",
			bank : "SBI",
			spot : "1Month(05-Sep-2014)",
			sellPriceLeft : "58.597235",
			footerPriceCenter : "93.8",
			buyPriceRight : "58.597661"
		});
		$scope.currencyList.push({
			currencyListId : "003",
			currencyPair : "GBPUSD",
			bank : "SBI",
			spot : "Spot(08-Aug-2014)",
			sellPriceLeft : "1.556735",
			footerPriceCenter : "77.8",
			buyPriceRight : "1.558181"
		});
		$scope.currencyList.push({
			currencyListId : "004",
			currencyPair : "EURAUD",
			bank : "SBI",
			spot : "Spot(08-Aug-2014)",
			sellPriceLeft : "1.456225",
			footerPriceCenter : "3.6",
			buyPriceRight : "1.456839"
		});
		
               $scope.dockSettings = {
			height : 155,
			width : 222,
			orientation : 'horizontal'
		}
	});
</script>
</head>
<body style="background: #EEE;">
	<div ng-controller="ForexOrderBookController">
		<div ng-repeat="record in currencyList" class="windowContainer">
			<jqx-docking jqx-mode="'default'" id="docking" jqx-data="record"
				style="float: left;" jqx-settings="dockSettings">
			<div>
				<div id={{data.currencyListId}} class="window">
					<div id="title">
						<span>{{ data.currencyPair}} {{ data.bank}}</span>
					</div>

					<div>
						<div id="spot" class="spotVal">
							<span>{{ data.spot }}</span>
						</div>
						<div id="rateDetails" class="rateDetail">
							<span id="leftArrow"> </span>
							<div id="mainValue1" class="value1">
								<p>{{ data.sellPriceLeft | substring }}</p>
								<p class="valuebig">{{ data.sellPriceLeft |
									substringDecimal:3:5 }}</p>
								<p class="valuesmall">{{ data.sellPriceLeft |
									substringDecimal:5:6 }}</p>
							</div>
							<div id="mainValue2" class="value2">
								<p>{{ data.buyPriceRight | substring }}</p>
								<p class="valuebig">{{ data.buyPriceRight |
									substringDecimal:3:5 }}</p>
								<p class="valuesmall">{{ data.buyPriceRight |
									substringDecimal:5:6 }}</p>
							</div>
							<span id="leftArrow"> </span>
						</div>
						<div class="sellBuy">
							<div class="sell">
								<jqx-button jqx-settings="mrktWtcBtn">Sell</jqx-button>
							</div>
							<div class="buy">
								<jqx-button jqx-settings="mrktWtcBtn">Buy</jqx-button>
							</div>
						</div>
						<div id="footer" class="footerdetails">
							<p class="fooHighvalue">{{ data.sellPriceLeft }}</p>
							<span class="fooMidvalue">{{ data.footerPriceCenter }}</span>
							<p class="fooLowvalue">{{ data.buyPriceRight }}</p>
						</div>
					</div>
				</div>
			</div>
			</jqx-docking>
		</div>
	</div>
</body>
</html>

in docking close button only showing, how to set collapse button, and If I click collapse button, the content <div> contents have to change and that size of <DIV> have to increase.

September 30, 2014 at 8:04 am Can we set Two contents in JqxDocking #60323

Dimitar

Participant

Hi Kavyad23,

Here is an example. Is this what you were looking for?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.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/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({ width: 250, theme: 'classic' });
            $('#docking').jqxDocking('showAllCollapseButtons');
            $("#window1").on("collapse", function () {
                $('#window1').jqxWindow('setContent', 'New content');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="docking">
        <div>
            <div id="window1">
                <div>
                    Header 1</div>
                <div>
                    Content 1</div>
            </div>
            <div id="window2">
                <div>
                    Header 2</div>
                <div>
                    Content 2</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 30, 2014 at 9:29 am Can we set Two contents in JqxDocking #60342

Kavyad23

Participant

Hi Dimitar,

Yes, Exactly same, But want a sample in Angularjs.

Here I can say, ` $(“#window1”).on(“collapse”, function () {
$(‘#window1’).jqxWindow(‘setContent’, ‘New content’);
});`

but how to use this code in angularjs.

October 1, 2014 at 5:05 am Can we set Two contents in JqxDocking #60406

Dimitar

Participant

Hi Kavyad23,

Here is how to achieve your requirement. Apart from AngularJS, you would need some jQuery code in your implementation, too:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.dockingInstance = {};
            $scope.$on('jqxDockingCreated', function (event, args) {
                $scope.dockingInstance.showAllCollapseButtons();
                $("#window1").on('collapse', function () {
                    $("#window1").jqxWindow('setContent', 'New Content');
                });
            });
        });
    </script>
</head>
<body class='default'>
    <div ng-controller="demoController">
        <jqx-docking jqx-width="800" jqx-orientation="'horizontal'" jqx-mode="'docked'" id="docking"
            jqx-instance="dockingInstance">
            <div>
                    <div id="window1">
                        <div>
                            Header 1</div>
                        <div>
                            Content 1</div>
                    </div>
                    <div id="window2">
                        <div>
                            Header 2</div>
                        <div>
                            Content 2</div>
                    </div>
            </div>
        </jqx-docking>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.