var app = angular.module('plunker', ['ui.bootstrap']);
agGrid.initialiseAgGridWithAngular1(angular);
app.controller('MainCtrl', function($scope,$uibModal) {
$scope.display = false;
$scope.openModal = function () {
$scope.display = !$scope.display;
};
});
app.controller('ModalCtrl', function ($scope, $uibModal) {
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
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,
enableSorting: true,
};
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, $scope.gridOptions);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Plunker drag & drop also sorts </title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="ag-grid@11.0.0" data-semver="11.0.0" src="https://www.ag-grid.com/dist/ag-grid-enterprise/ag-grid-enterprise.js?ignore=notused44"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Ag-grid & bootstrap modal example</h1>
<p>Open the modal</p>
<button class="btn btn-primary" type="button" ng-click="openModal()">Test</button>
<div ng-if='display'>
<div ng-controller="ModalCtrl as mctrl" >
<div ag-grid="gridOptions" id="myGrid" class="ag-theme-fresh" style="height: 500px">
</div>
</div>
</div>
</body>
</html>
<div ng-controller="ModalCtrl as mctrl" class="modal-body">
<p>Drag a column! Be sure to have the click on the column header at mouseleave</p>
<div ag-grid="gridOptions" id="myGrid" class="ag-theme-fresh" style="height: 500px"></div>
</div>