Angular ui-grid double click row to open pop-up for editing a row
I've used Aquiles solution and reduced scopes just to appSCope, see here.
I've rewrite code to showInfo becomes to $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());
});
}
At gridOptions just used 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>"
};
Too, I added columnDefs to show that rowTemplate don't interfere with grid rendering.
Well, my question was answered at Github:
https://github.com/angular-ui/ng-grid/issues/2228#issuecomment-71912850
My mistake was not to use external-scopes, and try to solve the problem with ng-dblclick only.
The code should be like this:
At 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>"
}
At the 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:
Considering that externalScopes is no longer supported, and now appScopeProvider rules.
In the 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 example at Plnkr using a modal popup (done with angular-ui-bootstrap):
http://plnkr.co/edit/cq7s9lKn90xTVgNxIC6b?p=preview
Note that if you use a newer version of ui-bootstrap, you will need to rename $modal in the above plunkr to $uibModal.