Page 1 of 1

AjaxStore / Paging / Read / Params / Query-String vs. Body

Posted: Tue Jun 08, 2021 12:19 pm
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.


Re: AjaxStore / Paging / Read / Params / Query-String vs. Body

Posted: Tue Jun 08, 2021 2:16 pm
by mats

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


Re: AjaxStore / Paging / Read / Params / Query-String vs. Body

Posted: Tue Jun 08, 2021 2:18 pm
by Mercury

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


Re: AjaxStore / Paging / Read / Params / Query-String vs. Body

Posted: Tue Jun 08, 2021 3:58 pm
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.apply(MyOverride);

Override class docs


Re: AjaxStore / Paging / Read / Params / Query-String vs. Body

Posted: Tue Jun 08, 2021 4:02 pm
by Mercury

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