import { GetServerSideStoreParamsParams , GridOptions , IServerSideDatasource , IServerSideGetRowsParams , IsServerSideGroupOpenByDefaultParams , ServerSideStoreParams } from '@ag-grid-community/core' ; declare var FakeServer ; const gridOptions = { columnDefs : [ { field : 'country' , enableRowGroup : true , rowGroup : true , hide : true } , { field : 'sport' , enableRowGroup : true , rowGroup : true , hide : true } , { field : 'year' , minWidth : 100 } , { field : 'gold' , aggFunc : 'sum' } , { field : 'silver' , aggFunc : 'sum' } , { field : 'bronze' , aggFunc : 'sum' } , ] , defaultColDef : { flex : 1 , minWidth : 120 , resizable : true , sortable : true , } , autoGroupColumnDef : { flex : 1 , minWidth : 280 , } , getServerSideStoreParams : function ( params ) { var res = { storeType : params . level == 0 ? 'partial' : 'full' , } ; return res ; } , rowModelType : 'serverSide' , rowSelection : 'multiple' , isServerSideGroupOpenByDefault : isServerSideGroupOpenByDefault , suppressAggFuncInHeader : true , animateRows : true , } ; function isServerSideGroupOpenByDefault ( params ) { var route = params . rowNode . getRoute ( ) ; if ( ! route ) { return false ; } var routeAsString = route . join ( ',' ) ; var routesToOpenByDefault = [ 'Zimbabwe' , 'Zimbabwe,Swimming' , 'United States,Swimming' , ] ; return routesToOpenByDefault . indexOf ( routeAsString ) >= 0 ; } function onBtRouteOfSelected ( ) { var selectedNodes = gridOptions . api ! . getSelectedNodes ( ) ; selectedNodes . forEach ( function ( rowNode , index ) { var route = rowNode . getRoute ( ) ; var routeString = route ? route . join ( ',' ) : undefined ; console . log ( '#' + index + ', route = [' + routeString + ']' ) ; } ) ; } 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 ( ) ; } } , 400 ) ; } , } ; } 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 ) { var fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ;