Bootstrap Dropdown in ag-Grid

<html>

  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/19.1.4/ag-grid-community.min.js"></script>
    
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <b>Click On Dropdown button in the Actions column</b>
    <div style="width: 85%; margin: 5px auto;">
      <div id="myGrid1" class="ag-theme-balham"></div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.ag-cell { 
  overflow:visible; 
}

.ag-row {
    z-index: 0;
}

.ag-row.ag-row-focus {
    z-index: 1;
}
.ag-root.ag-layout-auto-height,
.ag-body-viewport.ag-layout-auto-height,
.ag-body-viewport-wrapper.ag-layout-auto-height {
    overflow: visible;
}

.btn {
  line-height: 0.5
}

self.actionCellRenderer = function () { };
self.actionCellRenderer.prototype = {
    init: function (params) {
        this.actionsButton = document.createElement('div');
        this.actionsButton.innerHTML = `
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Actions <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href='#'>Edit</a></li>
        <li><a href='#'">Delete</a></li>
        <li role="separator" class="divider"></li>
        <li><a href='#'>Print</a></li>
    </ul>
</div>
        `;
    },
    getGui: function () {
        return this.actionsButton;
    },
    refresh: function () {
        return true;
    },
    destroy: function () {
        $(this.actionsButton).remove();
    }
}

var columnDefs = [
    {headerName: "Product", field: "product", maxWidth: 120},
    {headerName: "Year", field: "year", maxWidth: 80},
    {headerName: "Origin", field: "country", maxWidth: 120},
    {headerName: "Actions", width: 90, cellRenderer: actionCellRenderer, suppressSorting: true}
];

var dataSource = [
  {product: 'Apple Box', height: '22', country: 'China', year: 2012},
  {product: 'Orange Box', height: '25', country: 'Sweden', year: 2012},
  {product: 'Pear Box', height: '27', country: 'Russia', year: 2014},
  {product: 'Plum Box', height: '24', country: 'New Zealand', year: 2016}]

var gridOptions = {
    columnDefs: columnDefs,
    rowData: dataSource,
    enableColResize: true,
    enableFilter: true,
    enableSorting: true,
    domLayout: 'autoHeight',
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();
    }
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv1 = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv1, gridOptions);
});