CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Sjoerd222888
Sjoerd222888

Reputation: 3476

ui-grid selection on right click

I want to be able to select the row when there was a right click on the row.

So far I have the following solution (I have the idea from here):

I create a right click directive like this:

app.directive('rightClick', function($parse) {
   return function(scope, element, attrs) {
       var fn = $parse(attrs.rightClick);
       element.bind('contextmenu', function(event) {
       scope.$apply(function() {
           event.preventDefault();
               fn(scope, {$event:event});
           });
       });
    };
});

And then I can add a function in my controller that will be called:

 $scope.rightClick = function (event) {
     var scope = angular.element(event.toElement).scope();
     if (scope.row.entity !== undefined) {
         //... select element by calling gridApi
     }
 };

Adding the directive with the attribute right-click="rightClick($event)" is of course required.

The problem with this solution is that it relies on element.scope() which is a debug feature of angular and will not be available if debug informations are disable in production.

So now I am looking for an alternative solution that works without element.scope(). So the question is: "How can I select the element on right-click without relying on angular debug features".

Upvotes: 1

Views: 2427

Answers (3)

Tomasz Szymanski
Tomasz Szymanski

Reputation: 1

You can also define row template with ng-mouseover reference to some scope method (see below $scope.selectRowOnMouseOver) which will set row (under mouse cursor) to some scope variable. Then you can use this variable to set selection in your rightClick method:

Define row template:

     //define row template with ng-mouseover reference to scope method
    $scope.resultsGrid.rowTemplate =
        "<div ng-dblclick=\"grid.appScope.doubleClickOnRow(row, $event)\" ng-repeat=\"(colRenderIndex, col) in" +
        " colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell':" +
        " col.isRowHeader }\" ng-mouseover=\"grid.appScope.selectRowOnMouseOver(row)\" ui-grid-cell></div>";

Define method which will set row under cursor in scope variable (or set selection on this row right away):

    $scope.selectRowOnMouseOver = function (row) {
        $scope.rowUnderMouse =  row;
        //you can also select row right here or in other methods using above variable
        $scope.gridApi.selection.clearSelectedRows();
        row.setSelected(true);
    };

Use scope variable in your rightClick method:

    $scope.rightClick = function (event) {
        var row = $scope.rowUnderMouse;
        //clear other selections
        $scope.gridApi.selection.clearSelectedRows();
        //set row as selected
        row.setSelected(true);
        //...
    }

Upvotes: 0

Tom Makin
Tom Makin

Reputation: 3303

The row id is stored on the cell element id which can be used to identify which cell was clicked:

$scope.rightClick = function (event) {
  var element = angular.element(event.toElement);

  //get cellId which for the thrid row should something like this
  //1464688691229-2-uiGrid-0006-cell
  var id = element[0].parentElement.id;

  var regex = /(\d+)/g
  var result = id.match(regex);
  var rowIndex = parseInt(result[1]); //extract second numeric match

  $scope.gridApi.selection.selectRowByVisibleIndex(rowIndex);      
};

I'd say you probably need to experiment to see if that id is the visible index or the index of the source data. I'm not sure but I've put a working example here.

http://plnkr.co/edit/b2RKW0hdtFk1ZOLn1XsS?p=preview

Upvotes: 2

Tom Makin
Tom Makin

Reputation: 3303

If you are happy with overriding the debug behaviour you could go with:

angular.reloadWithDebugInfo()

Not pretty, but it would work.

Source: https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Upvotes: 0

Related Questions