jQWidgets Forums

I am asking in angularjs, I can find simple menu only in angularjs. there is not Minimized menu. I want to apply $(".jqxMenu").jqxMenu('minimize'); in angularjs. How to use this type of methods in angularjs. I refered in “Invoking Methods” section, but they gave only for Grid.

Check this code. I tried Minimize Menu in angularjs.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title id="Description">jqxMenu directive for AngularJS</title>
<link rel="stylesheet" href="../CSS/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../CSS/Style.css" type="text/css" />
<script src="../CommonFiles/import.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {

		$scope.minimizeMenu = {
			width : '100%',
			height : '32px',
			autoSizeMainItems : true
		}
		$scope.minimizeMenu.apply('minimize');
	});
</script>
</head>
<body>
	<div ng-controller="demoController">
		<jqx-menu jqx-settings="minimizeMenu">
		<ul>
			<li><a href="#Home">Advanced</a></li>
			<li><a href="#Solutions">Ladder</a></li>
		</ul>
		</jqx-menu>
	</div>
</body>
</html>

September 30, 2014 at 6:43 am Sample for Minimized menu in Angularjs #60307

Peter Stoev

Keymaster

Hi Kavyad23,

I know what you are asking and I wrote you that all the samples which we have are available on that page. If you are unable to find a speicifc sample there then it is not available. Invoking methods is the same for all widgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 30, 2014 at 6:48 am Sample for Minimized menu in Angularjs #60308

Kavyad23

Participant

Hi peter,

Thank you

September 30, 2014 at 6:52 am Sample for Minimized menu in Angularjs #60310

Peter Stoev

Keymaster

Hi Kavyad23,

Menu does not have “ready” function. You should use the jqxAngular plug-in’s Created event to ensure that you call a method of an object which is created.

Example:

<!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.$on('jqxMenuCreated', function () {
                $scope.menuSettings.apply('minimize');
            });
            $scope.menuSettings =
                {
                    width : '100%',
                    height : '32px',
                    autoSizeMainItems : true
                }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-menu jqx-settings="menuSettings">
              <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

September 30, 2014 at 7:01 am Sample for Minimized menu in Angularjs #60313

Kavyad23

Participant

Hi Peter,

Thanks a lot. Here you mentioned, $scope.$on('jqxMenuCreated', function () { }) Where I can see this “jqxMenuCreated” kind of keywords, can you give some url s for this?

September 30, 2014 at 7:09 am Sample for Minimized menu in Angularjs #60314

Peter Stoev

Keymaster

Hi Kavyad23,

Seems you still did not read carefully the documentation about the plugin Please, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm