import { ColDef , GridOptions , IServerSideDatasource , ISetFilter , SetFilterValuesFuncParams } from '@ag-grid-community/core' ; declare var FakeServer ; const columnDefs = [ { field : 'country' , filter : 'agSetColumnFilter' , filterParams : { values : getCountryValuesAsync , } , menuTabs : [ 'filterMenuTab' ] , } , { field : 'sport' , filter : 'agSetColumnFilter' , filterParams : { values : getSportValuesAsync , } , menuTabs : [ 'filterMenuTab' ] , } , { field : 'athlete' , menuTabs : undefined } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 150 , sortable : true , resizable : true , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , cacheBlockSize : 100 , maxBlocksInCache : 10 , animateRows : true , onFilterChanged : onFilterChanged , } ; var fakeServer ; var selectedCountries = null ; function onFilterChanged ( ) { var countryFilterModel = gridOptions . api ! . getFilterModel ( ) [ 'country' ] ; var selected = countryFilterModel && countryFilterModel . values ; if ( ! areEqual ( selectedCountries , selected ) ) { selectedCountries = selected ; console . log ( 'Refreshing sports filter' ) ; var sportFilter = gridOptions . api ! . getFilterInstance ( 'sport' ) as ISetFilter ; sportFilter ! . refreshFilterValues ( ) ; } } function areEqual ( a , b ) { if ( a == null && b == null ) { return true ; } if ( a != null || b != null ) { return false ; } return ( a ! . length === b ! . length && a ! . every ( function ( v , i ) { return b ! [ i ] === v ; } ) ) ; } function getCountryValuesAsync ( params ) { var countries = fakeServer . getCountries ( ) ; setTimeout ( function ( ) { params . success ( countries ) ; } , 500 ) ; } function getSportValuesAsync ( params ) { var sports = fakeServer . getSports ( selectedCountries ) ; setTimeout ( function ( ) { params . success ( sports ) ; } , 500 ) ; } function getServerSideDatasource ( server ) { return { getRows : function ( params ) { console . log ( '[Datasource] - rows requested by grid: ' , params . request ) ; var response = server . getData ( params . request ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 500 ) ; } , } ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/olympic-winners.json' ) . then ( response => response . json ( ) ) . then ( function ( data ) { fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ;