Custom Sorting

Custom Sorting

Posted by: jmisquez on 4 October 2022, 10:44 am EST

• 

  jmisquez

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 October 2022, 10:44 am EST - Updated 5 October 2022, 4:50 am EST

  I want to trigger an event when user clicks on column header when he is try to sort the column, that way im going to be able to send a request to the server with the sort parameters.

  So far i want to create a Server Side sorting by clicking the column header and avoid the sorting of the current items displayed (prevent default functionality)

  Also i want to be able to have 3 states: asc, desc, none

  if you click on the header sort asc:
  
  

  if you click again sort desc:
  
  

  if you click again none:
  
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 6 October 2022, 6:27 pm EST

  Hi,

  You can use our ODataCollectionView for implementing server-side sorting, here is an API reference for the same:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_odata.odatacollectionview.html

  If you want to trigger an event when the user clicks on a column header, you can add a ‘click’ event listener to the ‘grid.columnHeaders.hostElement’ element, and perform your tasks accordingly. Also, the implementation of three sorting states i.e. ascending, descending and none can also be implemented by adding the event listener function to the headers cells.

  You can refer to this sample for full implementation:
  
  https://jscodemine.grapecity.com/share/o1VmlenGNE64VMMPu4Mpbw/

  Regards

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 6 October 2022, 6:58 pm EST

  Hello Sonu,

  there’s a way to implemement server side sorting with json data?, because the server doesn’t return OData.

  the current arquitecture returns a json object but you can send sorting parameters to receive asc, desc or none to the endpoint.

  Thanks for answer

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 9 October 2022, 4:30 pm EST

  The issue with this solution is that the column still sorting in the grid, what i want is to make trigger an event and avoid the sorting because im going to trigger a HTTP Request to get data from the server already sorted, btw there’s no OData Response from the server i get a json object.

  Is there a way to do that?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2022, 11:25 pm EST

  Hi,

  I have used OData in below shared sample, you can update it from the data you are getting from the server and use the below implementation.
  
  To achieve the desired outcome, you can set the ‘allowSorting’ property to true, and handle the ‘sortingColumn’ event on the grid, set the ‘cancel’ property of the eventArgs object to true to avoid default sorting, and perform your required tasks.
  
  OR as an alternative you can set ‘allowSorting’ property to false to avoid the default sorting, then you can add an eventListener to the ‘flexgrid.columnHeaders.hostElement’, perform your sorting tasks accordingly.

  Please find attached a sample for the same https://stackblitz.com/edit/js-gdvz8e?file=index.js

  Regards

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 11 October 2022, 11:02 am EST - Updated 11 October 2022, 11:33 am EST

  Hi, in the last example i was able to do the server side sorting but the issue now is that i cannot set the “arrow up” or “arrow down” according the sorting asc or desc, i try to do something like this:

        const icon = document.createElement("i");
        icon.classList.add('fas', `${sortIconDirection[this.sortDirection]}`)
        cell.append(icon)

  creation a new element in the html and then append it to the header cell but it goes away when it renders the new data that comes from the server, is there a way to manipulate the headers to keep the change?

  example of the desired result:
  
  

  BTW im using Angular 14

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2022, 7:53 pm EST

  Hi,

  You can use the grid’s ‘itemFormatter’ property to implement this.
  
  You can refer to the following updated sample for the same https://stackblitz.com/edit/js-wj4uap?file=index.js

  Regards

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 12 October 2022, 7:01 am EST

  Thanks so much for the help, the issue was resolved.