Menu
So I'm trying to get my Angular UI Grid to register a double click event on an entire row to open up a modal. I can start with a toastr toast and go from there though. This is the closest I've come based on various demos and examples online, but I just can't seem to get it to work.
Controller:
$scope.gridHandlers = {
onDblClick: function(rowItem){
toastr.success(rowItem, 'Row Item:')
}
}
$scope.gridOptions = {
onRegisterApi : function(gridApi){
$scope.gridApi = gridApi
},
data: $scope.customerList,
enableRowHeaderSelection: false,
enableRowSelection: true,
enableSelectAll: false,
multiSelect: false,
noUnselect: true,
rowTemplate: '<div ng-dblclick="getExternalScopes().onDblClick(row)" external-scopes="gridHandlers" 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>',
columnDefs : [
{name: 'name', type: 'string'},
...etc
{name: 'status_name', displayName: 'Status', width: '11%', type: 'string'}
]
View:
<div class="large-12 cols" ui-grid="gridOptions" ui-grid-selection external-scopes="gridHandlers">
I've tried using the grid.appScope methods they talk about and everything else, but I just can't get it to work. Where am I here, totally off?
460
Here we will learn what is ng-dblclick event in angularjs, use of ng-dblclick event in angularjs, how to raise event on double click of button in angularjs with example. In angularjs ng-dblclick event directive is used to define double click event for html elements.
In angularjs ng-dblclick event directive is used to define double click event for html elements. In case if you want to fire a function or other event on double click of HTML element then we need to use this event.
AngularJS UI Grid 1 Column Sorting either asc or desc or none 2 Column Filtering 3 Bind complex functionalities to cell values 4 Ability to change header and cell content with custom templates 5 Grouping 6 Expandable Rows More ...
Following is the result of angularjs ui grid filtering example. In angularjs UI Grid we can implement paging/pagination easily with few lines of code. As mentioned in above code we need add “ui.grid.pagination” reference to angular module and need to define pagination size.
grid.appScope did work for me. Please see the plnkr (Double click on any row to see the row data)
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
