Our blazing fast Grid component built with pure JavaScript


Post by Mercury »

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'
}
});

Post by pmiklashevich »

https://www.bryntum.com/docs/grid/#Core/data/AjaxStore#config-params is a config to define initial extra params. Then you can set the params using property https://www.bryntum.com/docs/grid/#Core/data/AjaxStore#property-params

store.params = { foo : 1 };
store.load();
// {foo: "1", page: "1", pageSize: "25"}

or pass to the load function https://www.bryntum.com/docs/grid/#Core/data/AjaxStore#function-load

store.load({ foo : 1 });
// {foo: "1", page: "1", pageSize: "25"}

Or subscribe to https://www.bryntum.com/docs/grid/#Core/data/AjaxStore#event-beforeRequest and mutate params

// Do it once outside the "apply" function
store.on({
    beforeRequest({ params }) {
        params.foo = 1;
    }
});
// then
store.load();
// {foo: "1", page: "1", pageSize: "25"}

Pavlo Miklashevych
Sr. Frontend Developer


Post by Mercury »

Hi Pavel,
thank you very much for your input. That works like a charm for me. Plus I finally got the distinction between config and properties in your docs.


Post Reply