jQWidgets Forums

Tagged: angularjs, angularjs directives, jqwidgets angularjs, theme angularjs controller

This topic contains 6 replies, has 2 voices, and was last updated by Kavyad23 10 years, 8 months ago.

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

Author

Why theme is not applying globally Posts

September 26, 2014 at 4:42 am Why theme is not applying globally #60093

Participant

<!DOCTYPE html>
<html ng-app="ForexOrderBookApp" lang="en">
<head>
<meta charset="ISO-8859-1">
<title>Intellect GoTx FX Portal</title>
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="css/eTy_Style.css" type="text/css" />
<link rel="stylesheet" type="text/css"	href="css/Styles/jqx.energyblue.css" />
<link rel="stylesheet" type="text/css"	href="css/Styles/jqx.metrodark.css" />
<script>
var ForexOrderBookApp = angular.module("ForexOrderBookApp", [ "jqwidgets" ]);
ForexOrderBookApp.controller("ForexOrderBookController", function($scope) {
$scope.themes = [ "energyblue", "metrodark" ];
	$scope.themeList = {
		width : 100,
		height : 18,
		autoDropDownHeight : true,
		source : $scope.themes,
		theme : $scope.theme
	};
	$scope.selectedValue = $scope.themes[0];
	$scope.changeTheme = function() {
		$scope.newTheme = $scope.selectedValue;
		$scope.themeList.theme = $scope.newTheme;
		$scope.MenuSplit.theme = $scope.newTheme;
		$scope.FilterSplit.theme = $scope.newTheme;
		$scope.MarketWatchSplit.theme = $scope.newTheme;
		$scope.expander.theme = $scope.newTheme;
		$scope.bankDropDown.theme = $scope.newTheme;
		$scope.curpairDropDown.theme = $scope.newTheme;
		$scope.pricetypeDropDown.theme = $scope.newTheme;
		$scope.buysellDropDown.theme = $scope.newTheme;
		$scope.ValueDateDropDown.theme = $scope.newTheme;
		$scope.AdvradioBtn.theme = $scope.newTheme;
		$scope.SimpradioBtn.theme = $scope.newTheme;
		$scope.submitBtn.theme = $scope.newTheme;
		$scope.cnfmBtn.theme = $scope.newTheme;
		$scope.mrktWtcBtn.theme = $scope.newTheme;
		$scope.pendingQuotegridsettings.theme = $scope.newTheme;
		$scope.activeOrdergridsettings.theme = $scope.newTheme;
	};
</script>
</head>
<body style="background: #EEE;">
	<div ng-controller="ForexOrderBookController">
		<jqx-splitter jqx-settings="MenuSplit" jqx-watch="MenuSplit.theme">
		<div class="MenuHeader">
			<div class="MainTitle">
				<span>FX TRADING</span>
			</div>
		</div>
		<div>
			<jqx-splitter jqx-settings="FilterSplit" style="overflow-x: auto;"
				jqx-watch="FilterSplit.theme">
			<div class="marketWatchFilter">
				<form name="FXMWForm" ng-controller="ForexOrderBookController">
					<div class="titleHeader" style="float: left; width: 100%;">
						<span> Market Watch</span>
						<strong><div class="themeSetter">
							<label>Theme</label>
							<jqx-drop-down-list ng-model="selectedValue" jqx-ng-model
								jqx-settings="themeList" ng-change="changeTheme()"
								jqx-watch="themeList.theme" class="themeSelect"></jqx-drop-down-list>
						</div></strong>
					</div>
					<div class="contentfilters">
						<div class="filter" style="width: 150px;">
							<jqx-label class="formlabel">Bank</jqx-label>
							<jqx-drop-down-list jqx-settings="bankDropDown"
								class="selectList" jqx-watch="bankDropDown.theme"></jqx-drop-down-list>
						</div>
						<div class="filter" style="width: 200px;">
							<jqx-label class="formlabel">Currency Pair </jqx-label>
							<jqx-drop-down-list jqx-settings="curpairDropDown"
								class="selectList" jqx-watch="curpairDropDown.theme"></jqx-drop-down-list>
						</div>
						<div class="filter" style="width: 230px;">
							<jqx-label class="formlabel">Value Date </jqx-label>
							<jqx-drop-down-list jqx-settings="ValueDateDropDown"
								class="selectList" jqx-watch="ValueDateDropDown.theme"></jqx-drop-down-list>
						</div>
						<div class="filter"
							style="margin-top: 11px; margin-left: 15px; width: 180px;">
							<jqx-Radio-Button jqx-settings="AdvradioBtn" class="radioBtn"
								jqx-watch="AdvradioBtn.theme">Advanced</jqx-Radio-Button>
							<jqx-Radio-Button jqx-settings="SimpradioBtn" class="radioBtn"
								jqx-watch="SimpradioBtn.theme">Simple</jqx-Radio-Button>
						</div>
						<div class="filter" style="margin-top: 6px;">
							<jqx-button jqx-settings="submitBtn" class="marketWatchBtn"
								jqx-watch="submitBtn.theme">Add</jqx-button>
							<jqx-button jqx-settings="submitBtn" class="marketWatchBtn"
								jqx-watch="submitBtn.theme">Save</jqx-button>
						</div>
					</div>

				</form>
			</div>
			</jqx-splitter>
		</div>
		</jqx-splitter>
	</div>
</body>
</html>

I am changing the themes using Dropdownlist. If I select “Metrodark” theme. that theme is only applying for “theme dropdownlist” only. its not applying for others controls like splitters, dropdownlist, buttons. I think scope is not getting for all controls. how to set the scope globally.?

September 26, 2014 at 5:27 am Why theme is not applying globally #60103

Peter Stoev

Keymaster

Hi Kavyad23,

When you bind something to a property of undefined object, that should be expected behavior. You created widgets which have jqx-settings pointing to undefined objects and you watch for changes using jqx-watch in properties of undefined objects.

Best Regards,
Peter Stoev

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

September 26, 2014 at 5:34 am Why theme is not applying globally #60104

Kavyad23

Participant

Hi peter,

I set


$scope.theme = 'energyblue';
$scope.themeList = {
		width : 100,
		height : 18,
		autoDropDownHeight : true,
		source : $scope.themes,
		theme : $scope.theme
	};

so default is “energyblue”. then again if I change to “Metrodark” its not working.

September 26, 2014 at 6:02 am Why theme is not applying globally #60108

Peter Stoev

Keymaster

Hi Kavyad23,

Where are the references to jQWidgets JavaScript files in this code?

Best Regards,
Peter Stoev

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

September 26, 2014 at 8:54 am Why theme is not applying globally #60147

Kavyad23

Participant

Hi Peter,

I added “import.js” this file in my head section. this contains all Widget resources.

September 26, 2014 at 2:25 pm Why theme is not applying globally #60165

Peter Stoev

Keymaster

Hi Kavyad23,

I think that you should modify your code to something like the sample below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxDropDownList directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.energyblue.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.metrodark.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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.themes = ["energyblue", "metrodark"];
            $scope.theme = "";
            $scope.themeList = {
                width: 100,
                height: 18,
                autoDropDownHeight: true,
                source: $scope.themes
            };
            $scope.changeTheme = function (event) {
                $scope.theme = event.args.item.label;
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
      	<jqx-splitter jqx-theme="theme" jqx-settings="MenuSplit">
		<div class="MenuHeader">
			<div class="MainTitle">
				<span>FX TRADING</span>
			</div>
		</div>
		<div>
			<jqx-splitter jqx-settings="FilterSplit" jqx-theme="theme" style="overflow-x: auto;"
				>
			<div class="marketWatchFilter">
				<form name="FXMWForm">
					<div class="titleHeader" style="float: left; width: 100%;">
						<span> Market Watch</span>
						<div class="themeSetter">
							<label>Theme</label>
							<jqx-drop-down-list
								jqx-settings="themeList" jqx-theme="theme" jqx-on-change="changeTheme()"
								 class="themeSelect"></jqx-drop-down-list>
						</div>
					</div>
					<div class="contentfilters">
						<div class="filter" style="width: 150px;">
							<label class="formlabel">Bank</label>
							<jqx-drop-down-list jqx-theme="theme" jqx-settings="bankDropDown"
								class="selectList"></jqx-drop-down-list>
						</div>
						<div class="filter" style="width: 200px;">
							<label class="formlabel">Currency Pair </label>
							<jqx-drop-down-list jqx-theme="theme" jqx-settings="curpairDropDown"
								class="selectList"></jqx-drop-down-list>
						</div>
						<div class="filter" style="width: 230px;">
							<label class="formlabel">Value Date </label>
							<jqx-drop-down-list jqx-theme="theme" jqx-settings="ValueDateDropDown"
								class="selectList"></jqx-drop-down-list>
						</div>
						<div class="filter"
							style="margin-top: 11px; margin-left: 15px; width: 180px;">
							<jqx-radio-button jqx-theme="theme" jqx-settings="AdvradioBtn" class="radioBtn"
								>Advanced</jqx-radio-button>
							<jqx-radio-button jqx-theme="theme" jqx-settings="SimpradioBtn" class="radioBtn"
								>Simple</jqx-radio-button>
						</div>
						<div class="filter" style="margin-top: 6px;">
							<jqx-button jqx-theme="theme" jqx-settings="submitBtn" class="marketWatchBtn"
								>Add</jqx-button>
							<jqx-button jqx-theme="theme" jqx-settings="submitBtn" class="marketWatchBtn"
								>Save</jqx-button>
						</div>
					</div>

				</form>
			</div>
			</jqx-splitter>
		</div>
		</jqx-splitter>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

September 30, 2014 at 3:39 am Why theme is not applying globally #60288

Kavyad23

Participant

Hi peter,

Thank you 🙂

Author

Posts

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

You must be logged in to reply to this topic.