jQWidgets Forums

Tagged: angularjs menu

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 2 months ago.

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

Author

jqxmenu with Angular and ui.router – issue with clickhandler Posts

March 3, 2016 at 2:58 am jqxmenu with Angular and ui.router – issue with clickhandler #82048

Keshavan

Participant

Hi,

jQWidgets Ver 4.0.

Jqxmenu clickHandler function is not working with ‘sref’. ui.router feature works but doesn’t change state upon menu click.

here is my code.

Thnaks,
Keshavan

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">

<head>
    <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title>
    <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]);
        demoApp.config(function ($stateProvider, $urlRouterProvider) {

            // For any unmatched url, send to /route1
            $urlRouterProvider.otherwise("Quotations")

            $stateProvider
                .state('Quotations', {
                    templateUrl: "/body.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
                .state('Messages', {
                    templateUrl: "/body2.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
        })
        demoApp.controller('MainCtrl', function ($state) {
            $state.transitionTo('Quotations');
        })

        demoApp.controller('demoController', function ($state, $scope) {

            var test = this;
	    test.templateUrl = '/body2.html';
            $scope.checked = true;
            var menu = {};

	    $scope.clickHandler = function (event) {
                var args = event.args;
                $scope.log = "Clicked: " + $(args).text();
            };
            $scope.log = "";

            $scope.menuSettings = {
                width: '100%',
                height: '32px',
                created: function (args) {
                    menu = args.instance;
                    menu.minimize();
                }
            };

            $scope.changeState = function () {
                if ($scope.checked) {
                    menu.minimize();
                } else {
                    menu.restore();
                }
            }
        });
    </script>

</head>

March 3, 2016 at 4:18 am jqxmenu with Angular and ui.router – issue with clickhandler #82049

Keshavan

Participant

Hi,

Please find the updated code.

jQWidgets Ver 4.0.
Jqxmenu clickHandler function is not working with ‘sref’. ui.router feature works but doesn’t change state upon menu click.
here is my code.

Thanks,
Keshavan

<!DOCTYPE html>
<html ng-app=”demoApp” lang=”en”>

<head>
    <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title>
    <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]);
        demoApp.config(function ($stateProvider, $urlRouterProvider) {

            // For any unmatched url, send to /route1
            $urlRouterProvider.otherwise("Quotations")

            $stateProvider
                .state('Quotations', {
                    templateUrl: "/body.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
                .state('Messages', {
                    templateUrl: "/body2.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
        })
        demoApp.controller('MainCtrl', function ($state) {
            $state.transitionTo('Quotations');
        })

        demoApp.controller('demoController', function ($state, $scope) {

            var test = this;
            test.Url = "/";
            test.templateUrl = "/body.html";
            $scope.checked = true;
            var menu = {};

            $scope.menuSettings = {
                width: '100%',
                height: '32px',
                created: function (args) {
                    menu = args.instance;
                    menu.minimize();
                }
            };
            
            $scope.changeState = function () {
                if ($scope.checked) {
                    menu.minimize();
                } else {
                    menu.restore();
                }
            }
        });
    </script>

</head>

<body ng-controller="MainCtrl">
    <jqx-menu jqx-settings="menuSettings" >
        <ul>
            <li><a sref="Quotations">Quotations</a></li>
            <li><a sref="Messages">Messages</a></li>
            <li><a sref="Logout">Logout</a></li>
        </ul>
    </jqx-menu>
    <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box>
    <br/>
    <div ui-view></div>
</body>
</html>

March 3, 2016 at 6:30 am jqxmenu with Angular and ui.router – issue with clickhandler #82053

Peter Stoev

Keymaster

Hi Keshavan,

I don’t see a reason the clickhandler to be called. No binding to events.

Best Regards,
Peter Stoev

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

March 3, 2016 at 7:31 am jqxmenu with Angular and ui.router – issue with clickhandler #82055

Keshavan

Participant

Hi Peter,

Doesn’t work even after binding to events.

Here is my updated code, Please help.
Thanks,
Keshavan

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title>
    <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
</head>
<body ng-controller="MainCtrl">
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["ui.router", "jqwidgets"]);
        demoApp.config(function ($stateProvider, $urlRouterProvider) {
            // For any unmatched url, send to /route1
            $urlRouterProvider.otherwise("Quotations")
            $stateProvider
                .state('Quotations', {
                    templateUrl: "/body.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
                .state('Messages', {
                    templateUrl: "/body2.html",
                    controller: 'demoController',
                    controllerAs: 'test'
                })
        })
        demoApp.controller('MainCtrl', function ($state) {
            $state.transitionTo('Quotations');
        })
        demoApp.controller('demoController', function ($state, $scope) {
            var test = this;
            test.Url = "/";
            test.templateUrl = "/body.html";
            $scope.checked = true;
            var menu = {};
            $scope.menuSettings = {
                width: '100%',
                height: '32px',
                created: function (args) {
                    menu = args.instance;
                    menu.minimize();
                }
            };
            $scope.changeState = function () {
                if ($scope.checked) {
                    menu.minimize();
                } else {
                    menu.restore();
                }
            }
            $scope.clickHandler = function (event) {
                var args = event.args;
                $scope.log = "Clicked: " + $(args).text();
            };
            $scope.log = "";

        });
    </script>
    <jqx-menu  jqx-on-itemclick="clickHandler($event)"  jqx-settings="menuSettings">
        <ul>
            <li><a sref="Quotations">Quotations</a></li>
            <li><a sref="Messages">Messages</a></li>
            <li><a sref="Logout">Logout</a></li>
        </ul>
    </jqx-menu>
    <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box>
    <br/>
    <div style='margin-left: 20px; float: left;'>
        {{log}}
    </div>
    <div ui-view></div>

</body>
</html>

March 3, 2016 at 9:15 am jqxmenu with Angular and ui.router – issue with clickhandler #82062

Peter Stoev

Keymaster

Hi Keshavan,

Example with 2 widgets – jqxMenu and jqxDropDownList. Both widgets are bound to events. The example is tested with jQWidgets 4.0.0 and works as expected.

contacts.html

<div>
    <jqx-drop-down-list jqx-on-change="change(event)" jqx-settings="dropDwn.dropDownListSettings"></jqx-drop-down-list>
    <jqx-menu jqx-on-itemclick="itemclick(event)" jqx-settings="dropDwn.menuSettings">
        <ul>
            <li>
                Item 1
                <ul>
                    <li>Sub Item 1</li>
                    <li>Sub Item 2</li>
                    <li>Sub Item 3</li>
                </ul>
            </li>
            <li>
                Item 2
            </li>
            <li>
                Item 3
            </li>
        </ul>
    </jqx-menu>
</div>

dropdownlist-angular-ui-router.htm

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title id="Description">jqxDropDownList directive for Angular UI Router</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
  <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
       <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
   </head>
 <body ng-controller="MainCtrl" class="container">
    
    <div ui-view></div>
    
    <!-- App Script -->
    <script>
        var myapp = angular.module('myapp', ["ui.router", "jqwidgets"])
        myapp.config(function ($stateProvider, $urlRouterProvider) {

            // For any unmatched url, send to /route1
            $urlRouterProvider.otherwise("/route1")

            $stateProvider
            .state('contacts', {
                templateUrl: 'contacts.html',
                controller: 'ContactCtrl',
                controllerAs: 'dropDwn'
            })

        });
        myapp.controller('MainCtrl', function ($state) {
            $state.transitionTo('contacts');
        })

        myapp.controller('ContactCtrl', function ($state, $scope) {
            var dropDwn = this;

            dropDwn.people = [{
                id: 1,
                name: "Pedro",
                age: 13
            }, {
                id: 2,
                name: "Clara",
                age: 22
            }, {
                id: 3,
                name: "John",
                age: 33
            }, {
                id: 4,
                name: "Pier",
                age: 27
            }];
            // init DropDownList's settings object.
            dropDwn.dropDownListSettings =
            {
                width: 200,
                height: 30,
                autoDropDownHeight: true,
                displayMember: "name",
                valueMember: "id",
                source: dropDwn.people
            }

            $scope.change = function (event)
            {
                var args = event.args;
            };

            dropDwn.menuSettings =
                {
                    width: 300,
                    height:30
                }
            $scope.itemclick = function (event)
            {
                alert("Item clicked");
            }
        })
  </script>
  </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.