[ANGULAR] -Select multiple columns for server side sorting

[alex.l]

https://bryntum.com/docs/grid/api/Grid/column/Column#config-sortable method is for local sorting. If you want to use remote sorting, you don't need it.

https://bryntum.com/docs/grid/api/Core/data/mixin/StoreSort#event-sort is an event of a store.

grid.store.on('sort', ({ sorters }) => console.log(sorters));

// or in your example

store : {
    listeners : {
        sort({ sorters }) {
            console.log(sorters);
        }
    }
}

[abisht]

Thanks Alex,

I tried with the second one shown in the code. Removed the sortable parameter and added the store one, whereas I didn't get any logs in the console of the browser, not even the control went into this listener property inside the store object while debugging.

Could you please suggest where it could went wrong ?

[alex.l]

Ok, I see now. Let me explain it a bit.

If you used AjaxStore with remote sorting, there is no need to do data fetch by yourself, the store will request data after every sort change with params in format you provided using https://bryntum.com/docs/grid/api/Core/data/AjaxStore#function-encodeSorterParams
In this case there is no sort event will be triggered since no sort was done on the client side, actually it's just reload with new set of params. In this case that need to listen is https://bryntum.com/docs/grid/api/Core/data/AjaxStore#event-load . But the data is already fetched, so what is the case to do it again by listening to this event.

If you want to fetch data yourself, it is not clear to me why do you need to format params using https://bryntum.com/docs/grid/api/Core/data/AjaxStore#function-encodeSorterParams and AjaxStore at all.

Anyway, if it's applicable to your use case, try https://bryntum.com/docs/grid/api/Core/data/AjaxStore#event-load then.

[abisht]

Hi Alex,
Thanks a lot.
But I tried using load event, it's not working.

You can suggest me better about how to proceed with my objective to achieve.

1. I have a POST request to send from the UI.
2. Post request is having some filter attributes and want to send sorters along with that, so that the POST method can return the resultset from the backend by imposing the where condition with filter attributes and within the order by clause I can put my sorter attributes (whether it is ASC/DESC) at the backend.

So, All the need is to send the sorters along with my filter attributes to that POST method as once the user clicks either on single or multiple columns from the Bryntum grid.

[Maxim Gorkovsky]

Hello.
Please check out this demo: https://bryntum.com/examples/grid/php-paged/ It uses remote sorting and remote filtering. When you sort columns (add multiple sorters) or add a filter new request is triggered to the configured readUrl with sorting/filtering params passed inside the querystring:

.../php-paged/php/read.php?filter=%5B%7B%22field%22%3A%22score%22%2C%22operator%22%3A%22%3E%22%2C%22value%22%3A170%2C%22caseSensitive%22%3Atrue%7D%5D&sort=%5B%7B%22ascending%22%3Atrue%2C%22field%22%3A%22surName%22%2C%22columnOwned%22%3Atrue%7D%2C%7B%22ascending%22%3Afalse%2C%22field%22%3A%22score%22%2C%22columnOwned%22%3Atrue%7D%5D&page=1&pageSize=25

They're URL encoded so here is more human friendly form:

filter: [{"field":"score","operator":">","value":170,"caseSensitive":true}]
sort: [{"ascending":true,"field":"surName","columnOwned":true},{"ascending":false,"field":"score","columnOwned":true}]
page: 1
pageSize: 25

You can refer to this doc article for more info: https://bryntum.com/docs/gantt/api/Core/data/AjaxStore#remote-sorting

Since it is a readUrl it will use GET method, not POST. If you implement your data load handler to process these args you should be covered.

I have a POST request to send from the UI.

Why do you need to send a POST request from the app? Applying filtering/sorting is essentially data reloading operation. Dataset can be replaced manually of course, but in that case you would need to reimplement all that logic of encoding filters/sorters that already exist there.

Can you update handler that provides grid with the data to accept sort/filter params?