[kjc1111Participant]

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

[kjc1111Participant]

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

[kjc1111Participant]

Hi again,

I have found some time to try to convert the above code to angular using the examples in the event binding section of the angular integration guide. However, it seems like only my onDragStart and onDragEnd events are being triggered. Here is an orange square I set up as a test in my HTML code:

<div style="width:100px; height:100px; background-color:orange;" jqx-drag-drop jqx-settings="settings"></div>

Here are the settings in my angular controller:

	$scope.settings =
	{
		created: function() {
			console.log('created')
		},
		dropTarget: angular.element(document.querySelector('#my-canvas')),
		dropAction: 'none',
		onDrag: function(data, pos) {
			console.log('onDrag');
		},
		onDropTargetEnter: function() {
			console.log('onDropTargdetEnter');
		},
		onDropTargetLeave: function(data) {
			console.log('onDropTargetLeave');
		},
		onDragStart: function() {
			console.log('onDragStart');
		},
		onDragEnd: function() {
			console.log('onDragEnd');
		}
	};

When I run the code only created, onDragStart and onDragEnd get logged. Any ideas why the dragging and drop target events don’t get triggered?

Thanks,
Kevin

[kjc1111Participant]

Great, thanks … Kevin

[Author]

Posts