How to have a secondary sort be applied when a user clicks to sort on a column in offline mode

Question

I often have use cases in apps with grid-style displays where having an automatic secondary sort is desirable when a user selects to sort by a column - e.g. clicking on a status column sorts by status first but then secondary sorts by a date field.

I can't figure out a relatively easy way to do this with the Syncfusion grid control though for offline mode of the data (i.e. client-side sorting).

sortComparer seems to only have access to the field values to directly compare (i.e. it can't pull in values from other fields from the same rows). Alternatively I couldn't see a way to specify that a column should use a different field value when sorting to that used for display/filter (i.e. to allow me to generate in the backend fields which contain concatenations of multiple fields just for sort).

Any advice on options for achieving an automatic secondary sort fairly easily would be appreciated.

Vikram Sundararajan · Accepted Answer

Hi Matt,Based on your requirement to prevent the double refresh
after setting auto sorting, you can achieve this by canceling the event
arguments (args) in the actionBegin event.  Please refer the below
code snippet and sample for more information,

[index.js]
   
     const actionBegin=(args)=>{
          if(args.requestType==='sorting' && args.columnName==='CustomerName'){
              args.cancel=true;
             grid.sortColumn('OrderID', args.direction,true)
          }
      }
      const actionComplete=(args)=>{
          console.log(args)
      }

Sample: https://stackblitz.com/edit/react-l5tsqj-mmmif3?file=index.html,index.jsRegards,Vikram S

Vikram Sundararajan · Answer

Hi Matt,Based on your query how can apply secondary sorting for
column. Currently Ej2 grid have a multi column sorting option. Using this you
can sort more than one column in grid. You can enable the multistring property
in grid. To sort more than one column, press and hold the CTRL key and click
the column header. The sorting order will be displayed in the header while you
perform multi-column sorting. For more detailed information and examples, I
recommend checking out our documentation. Muti-Column-Sorting- https://ej2.syncfusion.com/react/documentation/grid/sorting#multi-column-sortingRegards,Vikram S

Matt Hoskins · Answer

Hi Vikram,Thanks for your reply - I was already aware of the UI to allow a user to select multiple columns for sorting, but that's not suitable for my use-case as I want an automatic secondary sort.To reiterate - I want an automatic secondary sort being applied in response to a user clicking to sort on a single column. The example I gave was where the user clicks to sort on a status column and the grid can automatically apply a secondary sort by record creation date (so records with the same status are further sorted by creation date). Another example would be if they click on a "Last Name" column and the grid automatically applies a secondary sort on the "First Name" field (so where two listed people have the same last name they are further sorted by their first name).I've had a look through the source code for the grid and I just can't figure out an easy way to hook in such behaviour - the back-end clearly does support sorting by multiple fields (which the multi-column sorting makes use of), there just doesn't be a way to specify/override what field(s) are used for sorting when a single column is picked for sorting. Any pointers would be appreciated.Regards,Matt

Vikram Sundararajan · Answer

Hi Matt,Based on your requirement want to apply automatic sorting
for a secondary column. We have achieved your requirement in actionBegin event.
In the actionBegin event, when a sorting request is triggered for the CustomerName
column, we can set the automatic sort for the OrderID column. To achieve
this, you can use the sortColumn method. Please refer the below code
snippet, API reference and sample for more information,

[index.js]
   
   const actionBegin=(args)=>{
          if(args.requestType==='sorting' && args.columnName==='CustomerName'){
             grid.sortColumn('OrderID', args.direction,true)
          }
      }

API-sortColumn- https://ej2.syncfusion.com/staging/react/documentation/api/grid/sort/#sortcolumnSample: https://stackblitz.com/edit/react-l5tsqj-3strus?file=index.html,index.jsRegards,Vikram S

Matt Hoskins · Answer

Hi Vikram,Thanks for that - that's exactly what I was after!The only minor issue I can see with that approach is efficiency - it refreshes the grid twice (and thus performs the sort twice) since the click by the user results in an initial called to sortColumn which triggers a grid refresh and it's from within that refresh that actionBegin is then called which makes its own call to sortColumn which then triggers a another grid refresh itself (so that's nested within the original refresh and both execute). I guess there's probably no way around that though with the current implementation of the grid.Regards,Matt

Matt Hoskins · Answer

Thanks, Vikram - that's very helpful!

Suganya Gopinath · Answer

We are glad that the provided solution helped to solve the issue.