ContextMenu and Grid

[aigleborgneParticipant]

Hello,

I have a grid and a contextual menu on each row/cell. I am trying to gather which row/cell is selected from DOM element, and then, going up to linked data (obtained from data-adapter). I have done a similar work with Tree, but it was easier due to the way Tree works.

$scope.grid.on('contextmenu', 'div[role="row"]', function(event) {
	// disable the default browser's context menu
	event.preventDefault();
	event.stopPropagation();
	var target = angular.element(event.target).parents('div[role="row"]:first')[0];
	//var target = angular.element(event.target).parents('div[role="gridcell"]')[0];
	if (target == null) {
		throw new Error("Menu should have 'div' elements");
	}
	var posX = angular.element(window).scrollLeft() + parseInt(event.clientX) + 5;
	var posY = angular.element(window).scrollTop() + parseInt(event.clientY) + 5;
	$scope.contextualMenu.jqxMenu('open', posX, posY);
});

In this sample code, I am getting row element (or cell if I want to). From here, I haven’t found a clean way to get row or cell index, and then, using grid API to get linked model.
The only thing I have found is element id which seems to contain row index that could be extracted using a regular expression, but I don’t like this method since it relies on parsing a string.

Is there a clean way?

Just to show how I did it in tree:

$scope.tree.on('contextmenu', 'li', function(event) {
	// disable the default browser's context menu
	event.preventDefault();
	var target = angular.element(event.target).parents('li:first')[0];
	if (target == null) {
		throw new Error("Menu should have 'li' elements");
	}
	$scope.tree.jqxTree('selectItem', target);
	var posX = angular.element(window).scrollLeft() + parseInt(event.clientX) + 5;
	var posY = angular.element(window).scrollTop() + parseInt(event.clientY) + 5;
	$scope.contextualMenu.jqxMenu('open', posX, posY);
});

[Peter StoevKeymaster]

Hi aigleborgne,

We have an online sample with ContextMenu and Grid. Please, take a look at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/contextmenu.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aigleborgneParticipant]

Thanks Peter, great example!
I was doing wrong at listening at contextmenu event, I should have looked at rowclick or cellclick event
Thank you again !

[Author]

Posts