jQWidgets Forums

Tagged: jqxAngular jqxMenu

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

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

Author

Angular context menu example Posts

February 1, 2015 at 1:48 am Angular context menu example #66254

kjc1111

Participant

Could anyone provide or point me to an example of setting up a context menu using the angular jqx-menu directive?

Thanks,
Kevin

February 1, 2015 at 11:10 pm Angular context menu example #66262

kjc1111

Participant

Also, it seems like adding an ng-click directive to my jqx-menu menu item does not call the controller function. What is the correct way to handle menu item selections in jqxAngular?

Thanks,
Kevin

February 2, 2015 at 6:31 am Angular context menu example #66264

Peter Stoev

Keymaster

Hi Kevin,

You can use the evnets documented in the API documentation page. Events which are not documented shouldn’t be used. At present, we don’t have such example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 3, 2015 at 9:14 pm Angular context menu example #66458

kjc1111

Participant

Hi Peter,

I have tried a number of different techniques outlined on the jqWidgets Angular integration documentation page for my main menu, but I can’t seem to get the menu item click. For example, different variations of the following in my HTML code:

<div id='main-menu' jqx-menu jqx-instance='mainMenu' jqx-on-itemclick='itemclick' jqx-settings='mainMenuSettings'>

And different variations of the following in my controller:


	$scope.mainMenu = {};
	$scope.mainMenuSettings =
	{
		width: '100%',
		height: 30,
		mode: 'horizontal',
		autoOpen: false,
		itemclick: function(index) {
			console.log('mainMenuItemClick');
		}
	};

	$scope.itemClick = function(event) {
		console.log('mainMenuItemClick');
	};

	$scope.$on('itemClick', function(event) {
		console.log('mainMenuItemClick');
	});

	$scope.mainMenu.on('itemclick', function(object) {
		console.log('mainMenuItemClick');
	});

Nothing seems to work. Am I missing something?

Regards,
Kevin

February 4, 2015 at 9:08 am Angular context menu example #66482

Peter Stoev

Keymaster

Hi kjc1111,

Working sample with “itemclick” below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxMenu directive for AngularJS</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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.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.itemclick = function(event)
            {
                alert('raised');
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-menu jqx-on-itemclick="itemclick()" jqx-width="'600px'" jqx-height="'30px'">
              <ul>
                    <li><a href="#Home">Home</a></li>
                    <li><a href="#Solutions">Solutions</a>
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Financial">Financial services</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">Rich Internet applications</a></li>
                                    <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                    <li><a href="#Training">Training and eLearning</a></li>
                                    <li><a href="#WebConferencing">Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href="#">All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li><a href="#Products">Products</a>
                        <ul>
                            <li><a href="#PCProducts">PC products</a></li>
                            <li><a href="#MobileProducts">Mobile products</a></li>
                            <li><a href="#AllProducts">All products</a></li>
                        </ul>
                    </li>
                    <li><a href="#Support">Support</a>
                        <ul style='width: 200px;'>
                            <li><a href="#SupportHome">Support home</a></li>
                            <li><a href="#CustomerService">Customer Service</a></li>
                            <li><a href="#KB">Knowledge base</a></li>
                            <li><a href="#Books">Books</a></li>
                            <li><a href="#Training">Training and certification</a></li>
                            <li><a href="#SupportPrograms">Support programs</a></li>
                            <li><a href="#Forums">Forums</a></li>
                            <li><a href="#Documentation">Documentation</a></li>
                            <li><a href="#Updates">Updates</a></li>
                        </ul>
                    </li>
                    <li><a href="#Communities">Communities</a>
                        <ul style='width: 200px;'>
                            <li><a href="#Designers">Designers</a></li>
                            <li><a href="#Developers">Developers</a></li>
                            <li><a href="#Educators">Educators and students</a></li>
                            <li><a href="#Partners">Partners</a></li>
                            <li type='separator'></li>
                            <li>By resource
                                <ul>
                                    <li><a href="#Labs">Labs</a></li>
                                    <li><a href="#TV">TV</a></li>
                                    <li><a href="#Forums">Forums</a></li>
                                    <li><a href="#Exchange">Exchange</a></li>
                                    <li><a href="#Blogs">Blogs</a></li>
                                    <li><a href="#Experience Design">Experience Design</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#Company">Company</a>
                        <ul style='width: 180px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                            <li><a href="#Investor">Investor Relations</a></li>
                            <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                            <li><a href="#Careers">Careers</a></li>
                            <li><a href="#Showcase">Showcase</a></li>
                            <li><a href="#Events">Events</a></li>
                            <li><a href="#ContactUs">Contact Us</a></li>
                            <li><a href="#Become an affiliate">Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
        </jqx-menu>
    </div>
</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.