Ng-grid / ui-grid celltemplate triggers row selection when clicked.
When I use the celltemplate for the ahref link, after the link is clicked, the row is highlighted because I have RowSelection enabled ... but I don't want the row to highlight when the link is clicked ... only if the row is clicked anywhere but the link.
Also in my example below, how do I remove the small arrow so that Menuitems do not appear in that column?
code:
$scope.gridOptions = {
showFooter: true,
enableFiltering: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: true,
multiSelect: true,
enableColumnResizing: true,
columnDefs: [
{ field:'date', displayName: 'Date', width: 200, aggregationType: uiGridConstants.aggregationTypes.count },
{ field:'notes', displayName: 'Notes', width: 65, enableFiltering: false, enableSorting: false, enableHiding: false, cellTemplate:'<a href="#" ng-click="getExternalScopes().showMe(row.entity[col.field])">View</a>' }
],
data: data
}
Pic:
source to share
Here is a possible ui-grid answer (which is no longer an ng grid!).
Cell template for a button that does not select a row:
cellTemplate: '<button class="btn primary" ng-click="$event.stopPropagation();getExternalScopes().showMe(row)">Click Me</button>'
Notice $event.stopPropagation()
in the ng-click directive. This will make it harder for the click to reach the basic rowTemplate functionality. (Note also that I haven't found any other way to pass the click event to the controller than with externalScopes. I'm sure there is a better way, but ui-grid is still beta and I'm pretty new to it too)
Second part of your question: use this headCellTemplate
var headCelltpl = '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'{{ col.displayName CUSTOM_FILTERS }}' +
'</div>' +
'</div>';
and add it to the appropriate columns in your columns.
headerCellTemplate: headCelltpl
Here is Plunker with everything included.
Please don't tell me you meant ng-grid :-)
source to share