[ANGULAR] How to use AjaxStore with column filters

[annaj]

Are there any examples (demos) showing a column using filters which use AjaxStore?

I have attempted to get this working, but no joy.

Example code:

   {
        filterField: {
          type: 'combo',
          store: new AjaxStore({
            readUrl: `/api/v2/options/${optionTypeId}`,
            autoLoad: true,
            responseDataProperty: 'results',
            pageParamName: 'page',
            pageSize: 99999,
            pageSizeParamName: 'limit',
          }),
        },
      }

Example request URL:

http://localhost:4200/api/v2/options/2/?page=1&limit=99999

Example request response:

{
    "total": 2,
    "nextPage": null,
    "results": [
        {
            "id": 1,
            "name": "John Smith"
        },
        {
            "id": 2,
            "name": "Jane Doe"
        }
}

Some observations:

• If I use 'combo' the labels are blank. I can see the scrollbar is short/long according to the number of options loaded.

  

  Screenshot 2025-05-15 at 17.18.51.png (9.6 KiB) Viewed 143 times

• If I then click on an option, it does seem to attempt to apply the filter, but only the ID is mentioned in the tooltip.

• If I use 'checklistfiltercombo' I can see the filter option labels are undefined.

  

  Screenshot 2025-05-15 at 17.06.41.png (17.95 KiB) Viewed 143 times

• If I use 'autoLoad: false', no requests are made.

  

  Screenshot 2025-05-15 at 17.12.31.png (6.57 KiB) Viewed 143 times

• If I use a smaller page size, it loads page 1 and never loads page 2.

• If I type in the search box, the whole app freezes up.

[marcio]

Hi,

Thanks for reaching out.

We have a demo with a simple remote store herehttps://bryntum.com/products/gantt/docs/api/Core/widget/Combo#autocomplete-type-ahead which you can just copy/paste in the filterField configuration.

Also, here are a few suggestions to help you troubleshoot:

1. Combo Configuration: Ensure that the valueField and displayField are correctly set in your combo configuration. This will ensure that the labels are displayed correctly. For example:

      {
        filterField: {
          type: 'combo',
          store: new AjaxStore({
            readUrl: `/api/v2/options/${optionTypeId}`,
            autoLoad: true,
            responseDataProperty: 'results',
            pageParamName: 'page',
            pageSize: 99999,
            pageSizeParamName: 'limit',
          }),
          valueField: 'id',
          displayField: 'name'
        },
      }

2. ChecklistFilterCombo: Similar to the combo, ensure that the valueField and displayField are set correctly.

3. AutoLoad: If autoLoad: false is set, you need to manually trigger the load operation using store.load().

4. Pagination: Ensure your backend supports pagination correctly. The nextPage should be handled to load subsequent pages.

5. Search Box Freezing: This might be due to a large dataset being loaded. Consider implementing lazy loading or reducing the page size.

If these suggestions don't resolve your issues, please provide more details or code snippets for further assistance.

[annaj]

Thank you for the quick reply.

1. Yes, valueField and displayField being set was the issue.

2. Yes, valueField and displayField being set was the issue here too. Thanks!

3. May you please suggest where this should be triggered? I cannot see any event handlers e.g. onBeforeFilter or anything along those lines in the documentation.

4. RE: pagination, I looked in the documentation here https://www.bryntum.com/products/grid/docs/api/Core/data/AjaxStore#pagination.
   I've set pageSize, pageParamName and pageSizeParamName.
   The response includes nextPage .
   But I still can't see how this should be set up - is there any further documentation or example showing this? The example you shared I have forked to take it a bit further: https://codepen.io/adammarshall84/pen/RNNdMZb

5. The search box freezing was also resolved by setting displayField.

[alex.l]

Hi,

1. Why do you need to set autoLoad : false?

   May you please suggest where this should be triggered?

Depends on use case, please let us know what's the point?

1. We have a demo here https://bryntum.com/products/grid/examples/paged/
   You can download sources as for any other component.

[annaj]

So if I have 20 'combo' columns, the user may not want to filter them all, they may only want to filter one.

If I set autoLoad: true, all 20 will make http requests to load the column filter options.

Currently, if I set autoLoad: false, when I open the column, there are no options.

So is there an event I can hook into, to know that the user has opened the filter widget for a column, so I can then initiate a load?

[annaj]

RE: the paging demo, that has buttons at the bottom to go to the first page, last page, previous page and next page. I am not looking to do that.

The response does not use nextPage.

You said

Ensure your backend supports pagination correctly. The nextPage should be handled to load subsequent pages.

Do you have an example showing that working for my situation?

[alex.l]

Hi,

Please explain the scenario how do you want to use pagination? I can't get your idea. You just need to review docs + demo + xhr requests/responses to see complete picture what did we send and what backend returned back. Could you please elaborate a bit?

[alex.l]

Try this for load store https://bryntum.com/products/schedulerpro/docs/api/Core/widget/Combo#event-trigger
Check if store has 0 records, then load store, to avoid load on every trigger click.

[alex.l]

I've opened a FR to add this functionality out of the box https://github.com/bryntum/support/issues/11377
Thank you for your request!

[annaj]

RE: pagination, I shared a pen earlier https://codepen.io/adammarshall84/pen/RNNdMZb