jQWidgets Forums

Tagged: angularjs controllers, angularjs controls, angularjs directives, angularjs splitter, angularjs tabs, angularjs ui widgets, angularjs widgets

This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

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

Author

How to use two controllers? Posts

October 1, 2014 at 4:01 am How to use two controllers? #60401

Kavya D

Participant

Main.html

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
<!-- CSS & JS files -->
</head>
<body>
	<div ng-controller="MainController">
		<jqx-splitter jqx-settings="FilterSplit">
		<div>
			<div ng-include src=" 'SecondPage.html'"></div>
		</div>
		<div>
		        <div ng-include src=" 'ThirdPage.html'"></div>
		</div>
		</jqx-splitter>
	</div>
</body>
</html>

SecondPage.html

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
<!-- CSS & JS files -->
</head>
<body ng-controller="SecondController">
	<div>
		<jqx-tabs jqx-width="'100%'" jqx-height="'200px'" jqx-theme="theme">
		<ul>
			<li style="margin-left: 30px;">Pending Quote Confirmation</li>
			<li>Active Order Book</li>
		</ul>
		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="pendingQuotegridsettings" ></jqx-grid>
			</div>
		</div>

		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="activeOrdergridsettings" ></jqx-grid>
			</div>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>

Controller.js

var DemoApp = angular.module("demoApp", [ "jqwidgets" ]);

DemoApp.controller("MainController", function($scope) {

	$scope.FilterSplit = {
		width : '100%',
		height : 819,
		orientation : 'horizontal',
		showSplitBar : true,
		panels : [ {
			size : '90%',
			collapsible : false
		}, {
			size : '10%',
			collapsible : false
		} ]
	};
});

DemoApp.controller("SecondController", function($scope) {
	$scope.pendingQuotegridsettings = {
		width : '98%',
		autoheight : true,
		showheader : true,
		theme : $scope.theme,
		columns : [ {
			text : 'Bank',
			datafield : 'bank',
			width : '70'
		}, {
			text : 'Currency Pair',
			datafield : 'Currencypair',
			width : '165'
		}, {
			text : 'Value Date',
			datafield : 'ValueDate',
			width : '130',
		}, {
			text : 'Buy/Sell',
			datafield : 'BuySell',
			width : '105',
		}, {
			text : 'Amount',
			datafield : 'Amount',
			width : '110',
		}, {
			text : 'Rate',
			datafield : 'Rate',
			width : '65',
		}, {
			text : 'OrderRefNo',
			datafield : 'OrderRefNo',
			width : '140',
		}, {
			text : 'Active Time(in sec)',
			datafield : 'activetime',
			width : '245',
		}, {
			text : 'Status',
			datafield : 'Status',
			width : '90',
		}, {
			text : 'Options',
			datafield : 'Options',
			width : '110',
		} ]
	};

	$scope.activeOrdergridsettings = {
		width : '98%',
		autoheight : true,
		showheader : true,
		theme : $scope.theme,
		columns : [ {
			text : 'Currency Pair',
			datafield : 'Currencypair',
			width : '155'
		}, {
			text : 'Bank',
			datafield : 'bank',
			width : '70'
		}, {
			text : 'OrderRefNo',
			datafield : 'OrderRefNo',
			width : '130',
		}, {
			text : 'ExcRefNo',
			datafield : 'ExcRefNo',
			width : '130',
		}, {
			text : 'FillType',
			datafield : 'FillType',
			width : '75',
		}, {
			text : 'Product',
			datafield : 'Product',
			width : '75',
		}, {
			text : 'Value Date',
			datafield : 'ValueDate',
			width : '120',
		}, {
			text : 'Buy/Sell',
			datafield : 'BuySell',
			width : '105',
		}, {
			text : 'Amount',
			datafield : 'Amount',
			width : '110',
		}, {
			text : 'Rate',
			datafield : 'Rate',
			width : '65',
		}, {
			text : 'Status',
			datafield : 'Status',
			width : '90',
		}, {
			text : 'Options',
			datafield : 'Options',
			width : '110',
		} ]
	};
});

How to get the “SecondController” Scope in MainPage.html?

October 1, 2014 at 4:36 am How to use two controllers? #60403

Peter Stoev

Keymaster

Hi Dinez,

Isn’t it supposed the SecondPage.html to be a partial view? Your Controllers should be referenced in Main.html and there’s no problem to use them.

Main.html

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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("MainController", function ($scope) {

            $scope.FilterSplit = {
                width: '100%',
                height: 819,
                orientation: 'horizontal',
                showSplitBar: true,
                panels: [{
                    size: '90%',
                    collapsible: false
                }, {
                    size: '10%',
                    collapsible: false
                }]
            };
        });

        DemoApp.controller("SecondController", function ($scope) {
            $scope.pendingQuotegridsettings = {
                width: '98%',
                autoheight: true,
                showheader: true,
                theme: $scope.theme,
                columns: [{
                    text: 'Bank',
                    datafield: 'bank',
                    width: '70'
                }, {
                    text: 'Currency Pair',
                    datafield: 'Currencypair',
                    width: '165'
                }, {
                    text: 'Value Date',
                    datafield: 'ValueDate',
                    width: '130',
                }, {
                    text: 'Buy/Sell',
                    datafield: 'BuySell',
                    width: '105',
                }, {
                    text: 'Amount',
                    datafield: 'Amount',
                    width: '110',
                }, {
                    text: 'Rate',
                    datafield: 'Rate',
                    width: '65',
                }, {
                    text: 'OrderRefNo',
                    datafield: 'OrderRefNo',
                    width: '140',
                }, {
                    text: 'Active Time(in sec)',
                    datafield: 'activetime',
                    width: '245',
                }, {
                    text: 'Status',
                    datafield: 'Status',
                    width: '90',
                }, {
                    text: 'Options',
                    datafield: 'Options',
                    width: '110',
                }]
            };

            $scope.activeOrdergridsettings = {
                width: '98%',
                autoheight: true,
                showheader: true,
                theme: $scope.theme,
                columns: [{
                    text: 'Currency Pair',
                    datafield: 'Currencypair',
                    width: '155'
                }, {
                    text: 'Bank',
                    datafield: 'bank',
                    width: '70'
                }, {
                    text: 'OrderRefNo',
                    datafield: 'OrderRefNo',
                    width: '130',
                }, {
                    text: 'ExcRefNo',
                    datafield: 'ExcRefNo',
                    width: '130',
                }, {
                    text: 'FillType',
                    datafield: 'FillType',
                    width: '75',
                }, {
                    text: 'Product',
                    datafield: 'Product',
                    width: '75',
                }, {
                    text: 'Value Date',
                    datafield: 'ValueDate',
                    width: '120',
                }, {
                    text: 'Buy/Sell',
                    datafield: 'BuySell',
                    width: '105',
                }, {
                    text: 'Amount',
                    datafield: 'Amount',
                    width: '110',
                }, {
                    text: 'Rate',
                    datafield: 'Rate',
                    width: '65',
                }, {
                    text: 'Status',
                    datafield: 'Status',
                    width: '90',
                }, {
                    text: 'Options',
                    datafield: 'Options',
                    width: '110',
                }]
            };
        });
    </script>
</head>
<body>
    <div ng-controller="MainController">
		<jqx-splitter jqx-settings="FilterSplit">
		<div>
			<div ng-include src="'SecondPage.html'"></div>
		</div>
		<div>
		        <div ng-include src="'ThirdPage.html'"></div>
		</div>
		</jqx-splitter>
	</div>
</body>
</html>

SecondPage.html

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
<!-- CSS & JS files -->
</head>
<body ng-controller="SecondController">
	<div>
		<jqx-tabs jqx-width="'100%'" jqx-height="'200px'" jqx-theme="theme">
		<ul>
			<li style="margin-left: 30px;">Pending Quote Confirmation</li>
			<li>Active Order Book</li>
		</ul>
		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="pendingQuotegridsettings" ></jqx-grid>
			</div>
		</div>

		<div>
			<div style="margin: 15px;">
				<jqx-grid jqx-settings="activeOrdergridsettings" ></jqx-grid>
			</div>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>

Best Regards,
Peter Stoev

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

October 1, 2014 at 4:42 am How to use two controllers? #60404

Kavya D

Participant

Hi Peter,

Its Not working, If I execute “SecondPage.html” alone. The grid is populating but if I include the page in “MainPage.html” its not working…

October 1, 2014 at 5:12 am How to use two controllers? #60408

Peter Stoev

Keymaster

Hi Dinez,

The example I sent you works fine. Please use it as a showcase.

Best Regards,
Peter Stoev

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

October 6, 2014 at 10:27 am How to use two controllers? #60705

Kavyad23

Participant

Hi peter,

I tried this same example . But Grid is not creating.

October 6, 2014 at 12:28 pm How to use two controllers? #60710

Peter Stoev

Keymaster

Hi Kavyad23 and Dinez,

As far as I see, you’re the same person writing from different accounts or at least you are in one office. No problem with that, but I’d like to mention that we are aware of it.
The sample which I prepared works fine because I tested it before sending it, so please try again and test it. If you still cannot understand how this should work, then I would suggest you to check https://angularjs.org/ tutorials about using 2 or more controllers.

Best Regards,
Peter Stoev

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.