Callback/Async

<!DOCTYPE html>
<html>
<head>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-enterprise@15.0.0/dist/ag-grid-enterprise.js"></script>
</head>
<body>
 <span>Filters are not applied if Set Filter values are not populated at time of .setFilterModel() call.
<br/>
<br/>
<button onclick="applyFilter()">Apply Filter using setFilterModel()</button></span>
<br/>
<br/>
<div id="myGrid" class="ag-theme-fresh" style="height: 100%;"></div>
    <script src="main.js"></script>
</body>
</html>

var columnDefs = [
    {
        headerName: 'Set filter col', field: 'value', width: 150, filter: 'agSetColumnFilter', filterParams: {
            values: (params)=>{
                setTimeout(()=>{
                    params.success(['value 1', 'value 2'])
                }, 5000)
            }
        }
    }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: [
        {value:'value 1'},
        {value:'value 1'},
        {value:'value 1'},
        {value:'value 1'},
        {value:'value 2'},
        {value:'value 2'},
        {value:'value 2'},
        {value:'value 2'},
        {value:'value 2'}
    ],
    enableFilter: true,
    floatingFilter: true
};

function applyFilter(){
  gridOptions.api.setFilterModel({value:['value 1']});
}

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

});