Issue #10: Default view should begin with all columns automatically autosized

<!DOCTYPE html>
<html>
<head>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-enterprise@14.2.0/dist/ag-grid-enterprise.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div>
    <span class="button-group">
        <button onclick="clearFilters()">Clear Filters</button>
    </span>
</div>

<div id="myGrid" class="ag-theme-fresh" style="height: 400px;"></div>
    <script src="main.js"></script>
</body>
</html>

var columnDefs = [{
  headerName: 'Athlete',
  field: 'athlete',
  width: 150,
  filter: 'text'
}, {
  headerName: 'Age',
  field: 'age',
  width: 90,
  filter: 'number'
}, {
  headerName: 'Country',
  field: 'country',
  width: 50
}, {
  headerName: 'Year',
  field: 'year',
  width: 90
}, {
  headerName: 'Date',
  field: 'date',
  width: 145,
  filter: 'date',
  filterParams: {
    comparator: function(filterLocalDateAtMidnight, cellValue) {
      var dateAsString = cellValue;
      var dateParts = dateAsString.split('/');
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
        return 0;
      }

      if (cellDate < filterLocalDateAtMidnight) {
        return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
        return 1;
      }
    }
  }
}, {
  headerName: 'Sport',
  field: 'sport',
  width: 110
}, {
  headerName: 'Gold',
  field: 'gold',
  width: 100,
  filter: 'number'
}, {
  headerName: 'Silver',
  field: 'silver',
  width: 100,
  filter: 'number'
}, {
  headerName: 'Bronze',
  field: 'bronze',
  width: 100,
  filter: 'number'
}, {
  headerName: 'Total',
  field: 'total',
  width: 100,
  filter: 'number'
}];

var gridOptions = {
  columnDefs: columnDefs,
  rowData: null,
  enableFilter: true,
  enableSorting: true,

  throttleScroll: true,
  // these hide enterprise features, so they are not confusing
  // you if using ag-Grid standard
  suppressMenu: true,
  floatingFilter: true
};

/**
 * ISSUE RESOLUTION 
 */
function clearFilters() {
  gridOptions.api.setFilterModel(null);
  gridOptions.api.onFilterChanged();
}

// 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/olympicWinners.json');
  httpRequest.send();
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      var httpResult = JSON.parse(httpRequest.responseText);
      gridOptions.api.setRowData(httpResult);
      var allColumnIds = [];
      gridOptions.columnApi.getAllColumns().forEach(function(column) {
        allColumnIds.push(column.colId);
      });
      gridOptions.columnApi.autoSizeColumns(allColumnIds);
    }
  };
});

.button-group {
    padding-bottom: 4px;
    display: inline-block;
}