agGrid.initialiseAgGridWithAngular1(angular);
var module = angular.module("example", ["agGrid"]);
module.controller("exampleCtrl", function($scope) {
function CustomHeader() {
}
CustomHeader.prototype.init = function (agParams) {
this.agParams = agParams;
this.eGui = document.createElement('div');
this.eGui.innerHTML = '<div ng-click="$ctrl.alertMsg()">{{getLabel()}}</div>';
};
CustomHeader.prototype.getGui = function () {
return this.eGui;
};
CustomHeader.prototype.destroy = function () {
};
var ctrl = this;
$scope.alertMsg = function(){
alert("hi");
};
$scope.getLabel = function(){
return "CustomLabel";
}
var columnDefs = [{
headerName: "Make",
field: "make"
}, {
headerName: "Model",
field: "model"
}, {
headerName: "Price",
field: "price",
cellRenderer: function(){return '<div ng-click="alertMsg()">{{getLabel()}}</div>';}
}];
var rowData = [{
make: "Toyota",
model: "Celica",
price: 35000
}, {
make: "Ford",
model: "Mondeo",
price: 32000
}, {
make: "Porsche",
model: "Boxter",
price: 72000
}];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
angularCompileHeaders: true,
angularCompileRows: true,
components: {
agColumnHeader: CustomHeader
},
};
});
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://unpkg.com/ag-grid@15.0.0/dist/ag-grid.js"></script>
</head>
<body>
<div ng-app="example" ng-controller="exampleCtrl as $ctrl">
<div ag-grid="gridOptions" class="ag-theme-fresh" style="height: 500px;"></div>
<button ng-click="alertMsg()">{{getLabel()}}</button>
</div>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */