import { ColDef , GridOptions , IServerSideDatasource , IServerSideGetRowsParams , IServerSideGetRowsRequest , RowNode } from '@ag-grid-community/core' ; declare var _ ; const columnDefs = [ { field : 'id' , hide : true } , { field : 'athlete' } , { field : 'country' , rowGroup : true , hide : true } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , ] ; const gridOptions = { defaultColDef : { width : 250 , resizable : true , } , columnDefs : columnDefs , rowSelection : 'multiple' , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , cacheBlockSize : 75 , animateRows : true , isRowSelectable : isRowSelectable , } ; function isRowSelectable ( rowNode ) { return ! rowNode . group ; } function refreshStore ( ) { gridOptions . api ! . refreshServerSideStore ( { purge : true } ) ; } function updateSelectedRows ( ) { var idsToUpdate = gridOptions . api ! . getSelectedNodes ( ) . map ( function ( node ) { return node . data . id ; } ) ; var updatedRows = [ ] ; gridOptions . api ! . forEachNode ( function ( rowNode ) { if ( idsToUpdate . indexOf ( rowNode . data . id ) >= 0 ) { var updated = JSON . parse ( JSON . stringify ( rowNode . data ) ) ; updated . gold += 1 ; updated . silver += 2 ; updated . bronze += 3 ; rowNode . setData ( updated ) ; updatedRows . push ( updated ) ; } } ) ; updateServerRows ( updatedRows ) ; } var idSequence = 0 ; var allData = [ ] ; 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 ) { allData = data ; allData . forEach ( function ( item ) { item . id = idSequence ++ ; } ) ; var dataSource = { getRows : function ( params ) { setTimeout ( function ( ) { var response = getMockServerResponse ( params . request ) ; params . success ( { rowData : response . rowsThisBlock , rowCount : response . lastRow , } ) ; } , 500 ) ; } , } ; gridOptions . api ! . setServerSideDatasource ( dataSource ) ; } ) ; } ) ; function getMockServerResponse ( request ) { var groupKeys = request . groupKeys ; var rowGroupColIds = request . rowGroupCols . map ( function ( x ) { return x . id ; } ) ; var parentId = groupKeys . length > 0 ? groupKeys . join ( '' ) : '' ; var rows = group ( allData , rowGroupColIds , groupKeys , parentId ) ; var rowsThisBlock = rows . slice ( request . startRow , request . endRow ) ; rowsThisBlock . sort ( ) ; var lastRow = rows . length <= ( request . endRow || 0 ) ? rows . length : - 1 ; return { rowsThisBlock : rowsThisBlock , lastRow : lastRow } ; } function group ( data , rowGroupColIds , groupKeys , parentId ) { var groupColId = rowGroupColIds . shift ( ) ; if ( ! groupColId ) return data ; var groupedData = _ ( data ) . groupBy ( function ( x ) { return x [ groupColId ! ] ; } ) . value ( ) ; if ( groupKeys . length === 0 ) { return Object . keys ( groupedData ) . map ( function ( key ) { var res = { } ; res [ 'id' ] = getGroupId ( parentId , key ) ; res [ groupColId ! ] = key ; return res ; } ) ; } return group ( groupedData [ groupKeys . shift ( ) ! ] , rowGroupColIds , groupKeys , parentId ) ; } function updateServerRows ( rowsToUpdate ) { var updatedDataIds = rowsToUpdate . map ( function ( data ) { return data . id ; } ) ; for ( var i = 0 ; i < allData . length ; i ++ ) { var updatedDataIndex = updatedDataIds . indexOf ( allData [ i ] . id ) ; if ( updatedDataIndex >= 0 ) { allData [ i ] = rowsToUpdate [ updatedDataIndex ] ; } } } function getGroupId ( parentId , key ) { return parentId ? parentId + '-' + key : key ; }