jQWidgets Forums

jQuery UI Widgets Forums General Discussions Plugins AngularJS JQXTAB with Angularjs

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • JQXTAB with Angularjs #62664

    shan_vs
    Participant

    Hi,

    We have multiple controller and we need to load seperate controller in each tab.

    E.G

    AppController
    Main Tab window
    Sub Tab ID 1 Sub Tab ID 2

    We need to load controller in each tab ID.

    Please clarify how to do that.

    Thanks

    Regards

    V Shan

    JQXTAB with Angularjs #62668

    Peter Stoev
    Keymaster

    Hi V Shan,

    Example:

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <title id="Description">jqxTabs Directive with Controllers for Each Tab</title>
        <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/jqxtabs.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.tabsSettings = { width: 800, height: 200 }
            });
            demoApp.controller("Tab1Controller", function ($scope) {
                $scope.name = "Peter Smith";
            });
            demoApp.controller("Tab2Controller", function ($scope) {
                $scope.name = "Michael Adams";
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController">
            <jqx-tabs jqx-settings="tabsSettings">
                <ul style="margin-left:30px;">
                    <li>Tab 1</li>
                    <li>Tab 2</li>
                </ul>
                <div ng-controller="Tab1Controller">{{name}}</div>
                <div ng-controller="Tab2Controller">{{name}}</div>
             </jqx-tabs>
        </div>
    </body>
    </html>
    

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    JQXTAB with Angularjs #62676

    shan_vs
    Participant

    Hi Peter,

    Thanks for a reply. I am not able to access Jqx-Settings inside Tab Control. I applied jqx-settings for Jqx-Grid but the grid is not creating.

    <!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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script>
    	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
    
    	demoApp.controller("demoController", function($scope) {
    		$scope.tabsSettings = {
    			width : 800,
    			height : 800
    		}
    	});
    	demoApp.controller("Tab1Controller", function($scope) {
    		$scope.obj1 = {
    			Grid1 : {
    				width : '200',
    				height : '100',
    				showheader : true,
    				columns : [ {
    					text : 'Name',
    					datafield : 'name',
    					width : '100'
    				} ]
    			},
    			name : "Peter Smith",
    			calling1 : function() {
    				alert("Calling 1");
    			}
    		};
    
    	});
    	demoApp.controller("Tab2Controller", function($scope) {
    		$scope.obj2 = {
    			Grid2 : {
    				width : '200',
    				height : '100',
    				showheader : true,
    				columns : [ {
    					text : 'Name',
    					datafield : 'name',
    					width : '100'
    				} ]
    			},
    			name : "Peter",
    			calling2 : function() {
    				alert("Calling 2");
    			}
    		};
    	});
    </script>
    </head>
    <body>
    	<div ng-controller="demoController">
    		<jqx-tabs jqx-settings="tabsSettings">
    		<ul style="margin-left: 30px;">
    			<li>Tab 1</li>
    			<li>Tab 2</li>
    		</ul>
    		<div ng-controller="Tab1Controller">
    			{{obj1.name}}
    			<jqx-grid jqx-settings="obj1.Grid1"></jqx-grid>
    			<jqx-button ng-click="obj1.calling1()">Tab 1</jqx-button>
    		</div>
    		<div ng-controller="Tab2Controller">
    			{{obj2.name}}
    			<jqx-grid jqx-settings="obj2.Grid2"></jqx-grid>
    			<jqx-button ng-click="obj2.calling2()">Tab 2</jqx-button>
    		</div>
    		</jqx-tabs>
    	</div>
    </body>
    </html>
    JQXTAB with Angularjs #62677

    Peter Stoev
    Keymaster

    Hi shan_vs,

    I would suggest you before trying to use a widget to read how to use the widget from the Getting Started help topics and exmaples available on our website. The problem in this code is that the Required JavaScript references for jqxGrid are Missing.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    JQXTAB with Angularjs #62680

    shan_vs
    Participant

    Hi Peter,

    I am using import.js file, which Included all the files.

    Angular.js, jquery-1.11.1.min.js, jqxcore.js, jqxdata.js, jqxbuttons.js, jqxgrid.js, jqxgrid.filter.js, jqxgrid.selection.js, jqxgrid.sort.js, jqxgrid.edit.js, jqxangular.js, etc…

    Please clarify why jqx-settings not applying for components.

    JQXTAB with Angularjs #62682

    Peter Stoev
    Keymaster

    Hi shan_vs,

    If the references are added correctly, there is no problem.

    Best Regards,
    Peter Stoev

    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.