I am using an angular ui grid .
http://ui-grid.info/docs/#/tutorial/102_sorting
I want to show an alert when I click the header icon V . Currently it is showing hello text when I click the v icon. Can I show an alert when I click the icon?
Here is my code: http://plnkr.co/edit/UAElQb8dl9qr5Cwmjg6q?p=preview
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
});
A live demo is here.
You can access header cell click event by headerCellTemplate and extrenal-scopes:
Docs here: Ui-grid custom templates
The custom row template merges all the cells together when the entity.merge value is true.
You can use
grid.appScopein your row template to access elements in your controller's scope.
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [{
field: 'name'
}, {
field: 'gender'
}, {
field: 'company',
enableSorting: false,
headerCellTemplate: ''
+'<div role="columnheader" class="sortable" aria-sort="none">'
+'<div role="button" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus">'
+'<span class="ui-grid-header-cell-label ng-binding">Company</span>'
+'</div>'
+'<div role="button" class="ui-grid-column-menu-button" aria-label="Column Menu" ng-click="grid.appScope.showAlert();">'
+'<i class="ui-grid-icon-angle-down" aria-hidden="true"> </i>'
+'</div>'
+'</div>'
}],
onRegisterApi: function(gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.showAlert = function() {
alert('ts');
}
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
});
}]);.grid {
width: 500px;
height: 200px;
}<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions1" external-scopes="externalScopes" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>[Notice:]
I'm not sure is this alert what you want. If is or close, this header cell template is a very simple demo, more about default header cell template is here
