[ANGULAR] -Select multiple columns for server side sorting

[abisht]

Using Angular and Bryntum Grid in my application, and I need to implement server side sorting by giving the support of selecting both single and multiple columns and actions could be Asc or Desc.

Idea is to get the column name as Key and Action type (value as Asc / Desc) in a Map Object and that Map can also contain more than one column attributes on which we want to sort the data list.

Angular version - 8.12.14
Bryntum version - 3.0.3

Please Guide me regarding it's implementation.

[alex.l]

Hi abisht,

Take a look at https://bryntum.com/docs/grid/api/Core/data/AjaxStore#function-encodeSorterParams
https://bryntum.com/docs/grid/api/Core/data/AjaxStore#config-sortParamName
Store does support multiSort out of the box.
I would suggest you to upgrade your app. In new releases we've added a lot of functionality and stability for our products.

[abisht]

Can you provide any example with angular which I can refer to get this use-case implementation done ? Basically I want to know how to use that function and param name for server side sorting.

[alex.l]

There is no matter what framework is used, you only need to configure our store
Example:

store : {
    type          : 'ajax',
    readUrl       : '/data.json',
    updateUrl     : '/data.json',
    sortParamName : 'sort',
    autoLoad      : true,

    encodeSorterParams(sorters) {
        const params = sorters.map(s => { return {
                Key    : s.field,
                Action : s.ascending ? 'ASC' : 'DESC'
            }
        });

        return params;
    }
},

So, when you'll add sorters and call store.sort(), it will make a request with sort params in format you need.

[abisht]

I have few questions

1. How to enable multi column sorting? i.e., add multiple sorter (so that later I can fetch it's keys and action) to the sorters object on the basis of selected columns by the user.
2. Will the function encodeSorterParams(sorters) pass any sorters to the server upon load only ? What happens when the store gets loaded and after that user explicitly click on other columns that he wants to sort upon?

[alex.l]

1. multiSorting is enabled by default. https://bryntum.com/docs/grid/api/Grid/feature/Sort#config-multiSort Please have a look at our example: https://bryntum.com/examples/grid/sorting/
   Try to use combo to add sorters or click on column headers with Cmd pressed. It will add sorters. It is described here, in very beginning https://bryntum.com/docs/grid/api/Grid/feature/Sort
   You also can add sorters programmatically using
   https://bryntum.com/docs/grid/api/Core/data/mixin/StoreSort#function-addSorter
   https://bryntum.com/docs/grid/api/Core/data/mixin/StoreSort#function-sort

2. Try it? Sort params will always be included to all requests. If user clicked on column header, it will call server api with updated params.

[abisht]

Thanks Alex for the support.
But the scenario is :
I have POST API method which fetches the result from the server on the basis of if filter state gets changed or not, so I want to fetch key and action type from these sorters and then put that array of objects it into the request body of the POST API.
Currently, there is sortable property inside the gird's config.ts file within which we are doing custom client side sorting; I want to know how can we connect the method that is written inside an angular component to check whether the state has been changed or not, to this sortable property inside the config.ts file within the Angular framework, as once the state has been changed it will call that POST API with filter and sorting attributes and fetches the result from the server.

[alex.l]

Try to listen https://bryntum.com/docs/grid/api/Core/data/mixin/StoreSort#event-sort ?

[abisht]

Can you please show me how to call this listener; that you have mention?

[abisht]

Alex, please help me with an example with this listener and do I need to remove the sortable property from my config file that I am using?

export const usersSchedulerConfig = {
     columns: [
    { 
      text: '',
      field: 'User-avatar',
      htmlEncode: false,
      sortable: (obj3, obj4) => {

      //some custom logic

  },
   {

  text: 'User',
  field: 'name',
  htmlEncode: false,
  sortable: (obj3, obj4) => {

      //some custom logic

   }
   }
],
sort : {
    listeners : {
       // Triggered when sorting changes
       sort({ sorters }) {
        console.log('Sorting by ' +
            sorters.map(sorter =>
                sorter.field + ' ' + (sorter.ascending ? 'ascending' : 'descending')
            ).join(', '));
      }
    }
  }

This is how my config file looks like.

Please guide whether I am doing it correctly or not, as I am not getting any logs while selecting multiple sorter.