How to find click event on header in angular js?

Question

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;
    });

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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.appScope in 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">&nbsp;</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

How to find click event on header in angular js?

1 Answers1