Our blazing fast Grid component built with pure JavaScript

Post by Mercury »

Dear Bryntum team,

I am having trouble with a grid implementation with an AjaxStore using a readUrl. All my parameters for the GET-request are appended to the URL query string. I understand that this is the default behavior. On my backend I am having trouble handling complex objects (e.g. the json-stringified array of sort objects). So I was wondering if it is possible to make the AjaxStore send the parameters as payload in the body of a POST request instead?

I understand that I can change the request type with httpMethods. But my parameters are still appended to the URL as query string when using POST for readUrl.

I also noticed the beforeRequest event where I have access to the params as well as the body of the request. Is this the right place to take out the query string params and add a request body?

If this is not possible at all I would like to know if it is possible to implement a custom data loader to support paging as well. In your docs you are stating:

If AjaxStore does not suite your needs you can of course load data any custom way you want and then plug it into an inline store.

I already verified that using a custom data loader this works for client-side grids where all the data is fetched in one piece. But as far as I can tell this does not seem to support remote paging / filtering. Please correct me if I am wrong here.

Thank you very much for your assistance.

Post by mats »

We have a ticket open to fix this: https://github.com/bryntum/support/issues/2855

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause

Post by Mercury »

Thanks for your swift reply Mats. I hope this feature gets into the product at some point in the future.

Post by arcady »

As a workaround you can override AjaxHelper fetch method. Something like this:

// an override for AjaxHelper class 
class MyOverride {

    static get target() {
        return {
            class : AjaxHelper

    static fetch(url, options) {
        // if request URL is the one we want to tweak
        if (url.match(/my-load-url/)) {
            // if query string parameters are passed
            if (options.queryParams) {

                const params = Object.entries(options.queryParams);

                if (params.length) {
                    // move the query string to body
                    options.body = params.map(([param, value]) => `${param}=${encodeURIComponent(value)}`).join('&');

                // get rid of parameters in query string
                delete options.queryParams;
            options.method = 'POST';

        return this._overridden.fetch.call(this, url, options);



Override class docs

Post by Mercury »

Thank you very much Arcady. I will give it a shot.

Post Reply