Menu
I am using ag-grid:
tutorial.js:
(function() {
var columnDefs = [
{headerName: "Athlete", field: "athlete", width: 150, filter: 'set'},
{headerName: "Age", field: "age", width: 90, cellRendered: timestampCellRenderer}
];
function timestampCellRenderer(params) {
return params.value + ' <span style="font-size: 10px; color: grey;">' + new Date().getTime() + '</span>';
}
function onRefreshAll() {
gridOptions.api.refreshView();
}
var gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableSorting: true,
enableFilter: true,
enableColResize: true
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid1');
new agGrid.Grid(gridDiv, gridOptions);
// do http request to get our sample data - not using any framework to keep the example self contained.
// you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', '../dist/olympicWinners.json');
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var httpResult = JSON.parse(httpRequest.responseText);
gridOptions.api.setRowData(httpResult);
gridOptions.api.sizeColumnsToFit();
console.log(httpResult);
}
};
});
window.onRefreshAll = onRefreshAll;
})()
index.html:
<html>
<head>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="../dist/ag-grid-enterprise.js?ignore=notused31"></script>
<script src="tutorial1.js"></script>
<script src="tutorial.js"></script>
</head>
<body>
<div id="myGrid1" class="ag-fresh" style="height: 400px;"></div>
<div>
<span style="padding-bottom: 4px; display: inline-block;">
<button onclick="onRefreshAll()">Ireland & UK</button>
</span>
<br/>
</div>
<div id="myGrid" class="ag-fresh" style="height: 400px;"></div>
</body>
</html>
So, whenever the "Refresh" button is clicked, all the sorting that is done on a column is refreshed and reset. Is it possible that the sorting doesn't reset whenever the refresh button is clicked but only the data is updated and the filter remains?
366
you need to add these filterParams in your column defs:
{
headerName: 'athlete',
field: 'athlete',
editable: true,
width: 100,
filterParams: {apply: true, newRowsAction: 'keep'}
},
I asked the AG-Grid team the same question, check out the delta-row-data mode.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
