Custom sort comparer with multi-column sort

[Dario Schmidt]

Hi

I am trying to implement a custom sort logic in a grid that supports multi-column sort. Each column is using a ng-template to show the content. There is a common function to implement the sort logic.

We are using the ActionBegin to get the column selected to sort.

The problem is when a second column is selected. The first sorting is ok but if we click en the same column to change the direction, the sort doesn´t change.

actionBegin({ requestType, columnName, direction }: SortEventArgs) {
    if (requestType === 'sorting') {
        this.sortColum = columnName;
    }
    return true;
}
....

sortFunction = (reference: string, comparer: string, referenceObj, comparerObj): number => {
    if (this.sortColum === AccessoryFieldName.Occurrence) {
       ....
    }
    if (this.sortColum === AccessoryFieldName.Material) {
       ....
    }
    return 0;
};

Datasource

Column A      Column B

      1                   a

      1                   x

      1                   m

      2                   a

      2                   d

Sort by A

Column A      Column B

      1                   a

      1                   x

      1                   m

      2                   a

      2                   d

Add sort by B

Column A      Column B

      1                   a

      1                   m

      1                   x

      2                   a

      2                   d

Click again in B. The waited result is  

Column A      Column B

      1                   x

      1                   m

      1                   a

      2                   d

      2                   a

but nothing occurs. In the custom function I don´t know how sorts the data taking in account that a prior order has to be respected.

[Santhosh Iruthayaraj]

Hi Dario Schmidt,

Greetings from Syncfusion support.

Based on your query, we understand that you want to apply a single sortComparer function to multiple columns and achieve a specific sort order for the provided data. We have prepared a Grid sample and sorted the columns according to your instructions. By default, the Grid sorts the two columns as per your request. Please find the screenshot and sample below for your reference:

Final Result of your instructions:

Sample: https://stackblitz.com/edit/i5kt2h?file=src%2Fapp.component.ts,src%2Fapp.component.html

Since the provided sorting requirement is fulfilled by default, we recommend utilizing the default sorting of the Grid component. Additionally, when using sortComparer and performing multi-sorting, there's no need to manually configure the sortComparer function for sorting values based on columns. During multi-sorting, the sortComparer will automatically apply the second sort on top of the first sort result. Therefore, you only need to handle the logic for comparison between reference and comparer; you don’t need to use column-based logic inside sortComparer.

We hope this information helps resolve your concerns. Please let us know if you have any further queries.

Regards,

Santhosh I

[Dario Schmidt]

Hi

Thanks for your response

I have modified the provided sample to show that, when the sort comparer function is implemented, it is not true that  "the sortComparer will automatically apply the second sort on top of the first sort result".

I need to implement this function because my columns are dinamically created with a *ngFor and the value used for the sort in each column is obtained from the object associated to each row of the grid.

In the example, you will see that when a secondary order is applied over the column B, the rows lost the correct order according the column A

Modified sample

https://stackblitz.com/edit/i5kt2h-hynsmf?file=src%2Fapp.component.ts

Thanks

[Johnson Soundararajan S]

Hi Dario Schmidt ,

We reviewed your query. We understand that when sort the grid column with sortComparer, the multi sorting is not working properly. We achieve your requirement by implementing custom sorting logic within the sort comparer function.

Could you please provide the details about, "Why did you use the referenceObj and comparerObj parameters in the sort comparer function?

Please refer to the below documentation link, sample and code snippet for more information.

Code sample :

app.component.ts

 

  sortFunction = (reference: string, comparer: string, referenceObj, comparerObj): number => {

    if (reference < comparer) {

      return -1;

    }

    if (reference > comparer) {

      return 1;

    }

    return 0;

  };

 

Documentation Link : Sorting in Angular Grid component | Syncfusion


Sample : i5kt2h (forked) - StackBlitz
 

Regards,

Johnson Soundararajan S

[Dario Schmidt]

Hi

I am using the referenceObj and comparerObj parameters because I need these to define the appropiate sorting. 

For example, if the column shows a date, the value of the reference and comparer parameters will be a string with the date formatted according the user preference. These values can not use to define the order. I need the value of the date to do this and I get this value from the referenceObj and comparerObj  parameters.

Let me know if you can undertand me.

Best regards

Dario 

[Johnson Soundararajan S]

Hi Dario Schmidt,

We reviewed your query. You want to use the referenceObj and comparerObj parameters in the sort comparer function to sort the date type value.

However, we've noticed that even without using referenceObj and comparerObj, the sorting still works correctly for date field values. We recommend employing our logic in the provided sample. 

To perform the sorting based on the referenceObj and comparerObj values, you would need to handle the logic for comparison between reference and comparer.

Please refer to the below sample and screenshot for more information.

Sample : i5kt2h (forked) - StackBlitz

Screenshot :

Please get back to us, if you need further assistance.
 

Regards,

Johnson Soundararajan S