import { GridOptions , IServerSideDatasource } from '@ag-grid-community/core' ; declare var FakeServer ; const gridOptions = { columnDefs : [ { field : 'country' , rowGroup : true , hide : true } , { field : 'year' , rowGroup : true , hide : true } , { field : 'version' } , { field : 'gold' , aggFunc : 'sum' } , { field : 'silver' , aggFunc : 'sum' } , { field : 'bronze' , aggFunc : 'sum' } , ] , defaultColDef : { flex : 1 , minWidth : 150 , resizable : true , sortable : true , } , autoGroupColumnDef : { flex : 1 , minWidth : 280 , field : 'athlete' , } , getRowNodeId : function ( data ) { var parts = [ ] ; if ( data . country != null ) { parts . push ( data . country ) ; } if ( data . year != null ) { parts . push ( data . year ) ; } if ( data . id != null ) { parts . push ( data . id ) ; } return parts . join ( '-' ) ; } , rowModelType : 'serverSide' , serverSideStoreType : 'full' , enableCellChangeFlash : true , suppressAggFuncInHeader : true , animateRows : true , debug : true , } ; var versionCounter = 1 ; function refreshCache ( route ? ) { versionCounter ++ ; var purge = ( document . querySelector ( '#purge' ) as HTMLInputElement ) . checked === true ; gridOptions . api ! . refreshServerSideStore ( { route : route , purge : purge } ) ; } function getBlockState ( ) { var blockState = gridOptions . api ! . getCacheBlockState ( ) ; console . log ( blockState ) ; } function getServerSideDatasource ( server ) { return { getRows : function ( params ) { console . log ( '[Datasource] - rows requested by grid: ' , params . request ) ; var response = server . getData ( params . request ) ; response . rows = response . rows . map ( function ( item ) { var res = { } ; Object . assign ( res , item ) ; res . version = versionCounter + ' - ' + versionCounter + ' - ' + versionCounter ; params . request . groupKeys . forEach ( function ( groupKey , index ) { var col = params . request . rowGroupCols [ index ] ; var field = col . id ; res [ field ] = groupKey ; } ) ; return res ; } ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 1000 ) ; } , } ; } 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 ) { data . forEach ( function ( dataItem , index ) { dataItem . id = index ; } ) ; var fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ;