I manage my data outside of Ag-Grid related code. I use a variable, this.works, to store all user "portfolio" information for my portfolio manager project. Additionally, I utilize this.loadMore() to fetch more data from the server (which is accessed externally).
To enable infinite scroll, I have implemented the "infinite" row model. I decided to employ a datasource as I also require sorting and filtering functionalities.
The issue arises when I update the datasource; the scrolling resets to the top, which is incredibly frustrating.
This setup utilizes Ag-Grid Community in conjunction with Vue.js.
Here are the GridOptions (set in beforeMount()):
this.gridOptions = {
suppressScrollOnNewData: true,
rowSelection: 'single',
rowModelType: 'infinite',
deltaRowDataMode: true,
defaultColDef: {
sortable: false,
resizable: true
},
columnTypes: {
'imageColumn': {
width: 150,
sortable: false,
autoHeight: true,
cellRendererFramework: AgGridImageFormatter
},
'priceColumn': {
cellRendererFramework: AgGridPriceFormatter
}
}
};
Methods:
({
methods: {
onBodyScroll: function(event) {
var lastDisplayedWork, ref, worksCount;
worksCount = this.works.length;
lastDisplayedWork = (ref = this.gridOptions.api) != null ? ref.getLastDisplayedRow() : void 0;
if (worksCount - 2 < lastDisplayedWork) {
event.api.ensureIndexVisible(worksCount - 2);
this.loadMore();
return event.api.setDatasource(this.gridDatasource);
}
},
CreateAgGridDataSource: function(worksData) {
return {
rowCount: this.works.length,
getRows: (function(_this) {
return function(params) {
var lastRow, rowsThisPage;
rowsThisPage = _this.works.slice(params.startRow, params.endRow);
lastRow = -1;
return params.successCallback(rowsThisPage, lastRow);
};
})(this)
};
},
onRowSelected: function(event) {
return this.workClicked(event.data.id);
},
onGridReady: function(event) {
this.gridDatasource = this.CreateAgGridDataSource(this.works);
return event.api.setDatasource(this.gridDatasource);
}
}
});
My apologies for any unconventional JS code; I'm using a CoffeeScript to JS converter. Though, it should function correctly.
HTML:
<div id="gridContainer">
<ag-grid-vue class="ag-theme-balham" id="AgGrid" :gridOptions="gridOptions" :modules="agGridModules" :columnDefs="agGridColDefs" @body-scroll="onBodyScroll" @row-selected="onRowSelected" @grid-ready="onGridReady"></ag-grid-vue>
</div>
Is there a way to maintain the scroll position where the user left off? Using api.refreshCells() did not yield results as expected. It resulted in empty rows after the initial data call (only displaying around the first ~23 items). Therefore, I need to "refresh" the datasource each time new data is retrieved.