Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
How to implement custom sorting strategy
posted

Hi, I can't seem to find any examples of using custom sorting logic for the grid component in React - I've seen some in Angular but it seems like the DefaultSortingStrategy is not an export of the react package. Would love some help here.

  • 700
    Offline posted

    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