Angular string with double click ui-grid to open popup for editing row

Question

VERSION:

I am using Angular ui-grid version 3.0.0-RC.18 ( http://ui-grid.info/ ).

PROBLEM

I want to implement a double-click event in a ui-grid table. In particular, I want to open a modal popup when I double-click on a line.

I tried using the ng-dblclick directive inside the rowTemplate definition, as suggested at https://github.com/angular-ui/ng-grid/issues/2228 , but the 'dblclick' event was never fired.

However, I found a solution, but using the directive I created. Can I do it better without creating directives?

Any comments would be appreciated.

THE CODE:

My code in the controller is as follows:

$scope.onDblClick = function(row) { var url = '//google.com'; $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no"); } // Define the New Conflicts Simulation GRID behavior $scope.myGridOptions = { showFooter: false, enableSorting: true, multiSelect: false, enableFiltering: true, enableRowSelection: true, enableSelectAll: false, enableRowHeaderSelection: false, enableGridMenu: true, noUnselect: true, onRegisterApi: function (gridApi){ $scope.gridApi = gridApi; }, rowTemplate: "<div ng-dblclick=\"onDblClick(row)\" 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 }\" ui-grid-cell dbl-click-row></div>" } 

(Where dbl-click-row indicates that I am using the dblClickRow directive)

My code in the view is as follows:

 <div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div> 

My code in the Directive is as follows:

 var angularStartDirectives = angular.module('angularStart.directives', []); angularStartDirectives.directive('dblClickRow', ['$compile', '$parse', function($compile, $parse) { return { priority : -190, // run after default uiGridCell directive restrict : 'A', scope : false, compile: function($element, attr) { // Get the function at ng-dblclick for ui-grid var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true); return function ngEventHandler(scope, element) { element.on('dblclick', function(event) { var callback = function() { if ($scope.gridApi.grid.selection.lastSelectedRow) { fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity }); } }; $scope.$apply(callback); } )}; } }; } ]); 

Answer 1

Well, Github answered my question:

https://github.com/angular-ui/ng-grid/issues/2228#issuecomment-71912850

My mistake was to not use external areas and try to solve the problem only with ng-dblclick.

The code should look like this:

On the controller:

 $scope.gridHandlers = { onDblClick : function(row) { var url = '//google.com'; $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no"); } } $scope.myGridOptions = { showFooter: false, enableSorting: true, multiSelect: false, enableFiltering: true, enableRowSelection: true, enableSelectAll: false, enableRowHeaderSelection: false, enableGridMenu: true, noUnselect: true, onRegisterApi: function (gridApi){ $scope.gridApi = gridApi; }, rowTemplate: "<div ng-dblclick=\"getExternalScopes().onDblClick(row)\" 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 }\" ui-grid-cell ></div>" } 

In view:

 <div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" external-scopes="gridHandlers"></div> 

Update for ui-grid v3.0.0-rc.21:

Given that externalScopes is no longer supported, now the rules are appScopeProvider.

In view:

 <div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" ></div> 

In the controller:

 $scope.myGridOptions = { showFooter: false, enableSorting: true, multiSelect: false, enableFiltering: true, enableRowSelection: true, enableSelectAll: false, enableRowHeaderSelection: false, enableGridMenu: true, noUnselect: true, onRegisterApi: function (gridApi){ $scope.gridApi = gridApi; }, appScopeProvider: { onDblClick : function(row) { var url = '//google.com'; $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no"); } }, rowTemplate: "<div ng-dblclick=\"grid.appScope.onDblClick(row)\" 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 }\" ui-grid-cell ></div>" } 

Here is my Plnkr example using a modal popup (made using angular -ui-bootstrap):

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

Please note that if you are using a newer version of ui-bootstrap, you will need to rename $ modal in the above plunkr to $ uibModal.

Answer 2

I used the Aquiles solution and reduced the scope to appSCope, see here .

I rewrote the code so that showInfo becomes in $ scope:

 $scope.showInfo = function(row) { var modalInstance = $modal.open({ controller: 'InfoController', templateUrl: 'ngTemplate/infoPopup.html', resolve: { selectedRow: function () { return row.entity; } } }); modalInstance.result.then(function (selectedItem) { $log.log('modal selected Row: ' + selectedItem); }, function () { $log.info('Modal dismissed at: ' + new Date()); }); } 

GridOptions just uses appScope:

 $scope.gridOptions = { showFooter: true, enableSorting: true, multiSelect: false, enableFiltering: true, enableRowSelection: true, enableSelectAll: false, enableRowHeaderSelection: false, selectionRowHeaderWidth: 35, noUnselect: true, enableGridMenu: true, columnDefs: [{displayName:'Name',field:'name'},{displayName:'Gender',field:'gender'},{displayName:'Company',field:'company'}], rowTemplate: "<div ng-dblclick=\"grid.appScope.showInfo(row)\" 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 }\" ui-grid-cell></div>" }; 

Also, I added columnDefs to show that rowTemplate does not interfere with grid rendering.

Answer 3

The custom rowTemplate solution works fine. I found a more elegant solution that adds an event to the 'ui-grid / ui-grid-row' template:

 rowTemplate : $templateCache.get('ui-grid/ui-grid-row').replace("<div ", "<div ng-dblclick=\"grid.appScope.onDblClick(row, $event)\" "), 

The double-click event handler will look something like this:

 $scope.onRowDblClick = function (row) { if (row && row.entity) { //insert your custom code } }; 

You need to add the dependency to $ templateCache in your controller.