Hello Cathy,

Thank you for posting in our community!

I have investigated this matter and determined that your findings are correct and currently setting a custom sorting strategy is not applied the same and expected way as the Ignite UI for Angular grid.

To ensure that it will receive attention, I have logged this behavior in our internal tracking system with a Development ID of 31361.

You can view the status of the development issue connected to this case by clicking on the “Support” tab under “My Cases” list with “In Development” label.

After our development team has reviewed and examined this matter further, I will update you with any new information.

In the meantime, a possible approach I could suggest, in order to apply custom sorting, is using the sortingExpressionsChange event. This event emits the IgrSortingExpressionEventArgs arguments that provide information for the applied sorting expressions. These expressions are of type IgrSortingExpression which in turn provide information for the filedName, dir, ignoreCase, and strategy.

This allows setting the custom strategy inside the event handler to either all columns or a particular one.

For example, let us take a column that contains complex data (Characteristics) and should be sorted based on one of the inner properties (ProductName):

[
    {
        ProductID: 1,
        Characteristics: {
            ProductName: "Ignite UI for React",
            Team: "Team 1",
        },
    },
    {
        ProductID: 2,
        Characteristics: {
            ProductName: "App Builder",
            Team: "Team 1",
        },
    }
]

Using the fieldName property, we could find the sorting expression that is for the Characteristics column and change its strategy property in order for the column to be sorted based on our custom strategy.

<IgrGrid
    data={DATA}
    sortingExpressionsChange={handleSortingExpressionsChange}
>
    <IgrColumn field="ProductID" header="Product ID"></IgrColumn>
    <IgrColumn
        field="Characteristics"
        header="Characteristics"
        sortable={true}
        formatter={formatter}
    ></IgrColumn>
</IgrGrid>

function handleSortingExpressionsChange(s: IgrGrid, e: IgrSortingExpressionEventArgs) {
    if (e.detail.length) {
        const characteristicsExpression = e.detail.find(
            (expression) => expression.fieldName === "Characteristics"
        );

        if (characteristicsExpression) {
            characteristicsExpression.strategy = customSorting;
        }
    }
}

const customSorting: IgrSortingStrategy = {
    sort(
        data: any[],
        fieldName: string,
        dir: SortingDirection,
        ignoreCase: boolean
    ): any[] {
        // Custom sorting logic here
    },
};

Attached could be found a small sample demonstrating my suggestion.

Please test it on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Software Developer

IgrGrid - custom sorting strategy.zip