I am using Angular two-way-bound models as params in my AjaxStore. These param-values do not get refreshed at any point after the grid is loaded. Of course I do not expect the params to be refreshed on paging operations but on a store.load() I would expect the parameter-values to be updated from my models.
I verified this behavior on your demo Paged grid with mocked Ajax by using a param with js date constructor. Even clicking the Apply button which triggers a store.load() does not affect the date in the parameter foo.
Is this behavior intended?
Is it possible at all to use reactive param-values (and use the probably updated values in AjaxStore requests)?
import { Grid, DataGenerator, AjaxStore, CollectionFilter, BrowserHelper, AjaxHelper, GridRowModel } from '../../build/grid.module.js?450605';
import shared from '../_shared/shared.module.js?450605';
let
rowCount = BrowserHelper.searchParam('rowCount') || 250,
pageSize = BrowserHelper.searchParam('pageSize') || 25,
currentPage = 1,
data = [];
// This intercepts AjaxHelper.fetch calls and calls AjaxHelper's fetch success handling
// method using a mocked up Fetch Response object with the returned object assigned
// over its default properties. Here we just return responseText with the generated data.
AjaxHelper.mockUrl('/pagedMockUrl', (url, params) => {
const
page = parseInt(params.page, 10),
pageSize = parseInt(params.pageSize, 10),
startIdx = (page - 1) * pageSize;
if (data.length !== rowCount) {
data = DataGenerator.generateData(
rowCount,
null,
1
);
}
let returnedData = data.slice();
// Filter the data if filter parameter is passed
if (params.filter) {
returnedData = returnedData.filter(
CollectionFilter.generateFiltersFunction(
JSON.parse(params.filter).map(f => {
f.property = f.field;
return new CollectionFilter(f);
})
)
);
}
console.log(params);
// Sort the data if sort parameter is passed
if (params.sort) {
returnedData.sort(store.createSorterFn(JSON.parse(params.sort)));
}
return {
responseText : JSON.stringify({
success : true,
total : returnedData.length,
data : returnedData.slice(startIdx, startIdx + pageSize)
})
};
});
const
maxCount = 1000,
minCount = 10,
store = new AjaxStore({
modelClass : GridRowModel,
readUrl : '/pagedMockUrl',
pageParamName : 'page',
sortParamName : 'sort',
filterParamName : 'filter',
pageSize : pageSize,
autoLoad : true,
params : { foo: new Date()}
});
const grid = new Grid({
appendTo : 'container',
store,
features : {
filter : true
},
minHeight : '20em',
columns : [
{ text : '#', type : 'number', width : 80, field : 'id' },
{ text : 'First name', field : 'firstName', flex : 1 },
{ text : 'Surname', field : 'surName', flex : 1 },
{ text : 'Score', field : 'score', flex : 1, type : 'number' },
{ text : 'Rank', field : 'rank', flex : 1, type : 'number' },
{ text : 'Percent', field : 'percent', width : 150, type : 'percent' }
],
tbar : [
{
type : 'button',
text : 'Apply',
ref : 'buttonApply',
icon : 'b-fa-check',
tooltip : 'Apply page size and number of records to data loader',
onClick() {
store.load();
}
}
],
bbar : {
type : 'pagingtoolbar'
}
});