<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 20px; height: 100%; } </style>
<!-- <script src="https://unpkg.com/ag-grid-enterprise@22.0.0/dist/ag-grid-enterprise.min.js"></script> -->
<script src="https://unpkg.com/ag-grid-enterprise@21.0.0/dist/ag-grid-enterprise.min.js"></script>
</head>
<body >
<h3>If you go onto the index.html page of this plunker and change the version to 22, it will no longer allow you to drag columns from the sidebar into the grid header
</h3>
<ul>
<li>works: https://unpkg.com/ag-grid-enterprise@21.0.0/dist/ag-grid-enterprise.min.js"</li>
<li>fails: https://unpkg.com/ag-grid-enterprise@22.0.0/dist/ag-grid-enterprise.min.js"</li>
</ul>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js"></script>
</body>
</html>
var columnDefs = [
{headerName: "Sport", field: "sport", width: 110},
{headerName: "Athlete", field: "athlete", width: 200},
{headerName: "Gold", field: "gold", width: 100},
{headerName: "Silver", field: "silver", width: 100},
{headerName: "Bronze", field: "bronze", width: 100},
{headerName: "Total", field: "total", width: 100},
{headerName: "Age", field: "age", width: 90},
{headerName: "Date", field: "date", width: 110}
];
var sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
}
],
defaultToolPanel: 'columns',
}
var gridOptions = {
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: null,
enableSorting:true,
enableFilter:true,
sideBar:sideBar
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
// do http request to get our sample data - not using any framework to keep the example self contained.
// you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json');
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
var httpResult = JSON.parse(httpRequest.responseText);
gridOptions.api.setRowData(httpResult);
}
};
});