jQuery UI Widgets Forums Layouts Docking Can we set Two contents in JqxDocking

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Can we set Two contents in JqxDocking #60246

    Kavyad23
    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?

    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/

    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.

    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/

    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.

    • This reply was modified 9 years, 6 months ago by  Kavyad23.
    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/

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

You must be logged in to reply to this topic.