Sort Grid Column Descending

Environment

Product

Grid for Blazor

Description

How to sort a Grid column descending first, and then ascending?

How to reverse the Grid sorting logic for a column?

Solution

This scenario requires knowledge about the Grid State. Get familiar with the following sections first:

• Information in the Grid State
• Grid OnStateChanged Event
• Grid State Methods

The Grid always tries to maintain the following order of sorting states for each column:

No sorting > Ascending > Descending > No sorting > ...

Let's assume that the Grid has a Stock column which is not sorted, but it should be sorted descending first, if the user clicks on the header. The required algorithm to intercept sorting and change the sort direction is:

1. Set a helper variable that will keep the previous sort state of the Stock column. If the column is unsorted by default, then the helper variable can be equal to null.
2. Subscribe to the Grid OnStateChanged Event.
3. Check if the user has changed the sort state by checking if args.PropertyName is "SortDescriptors".
4. If yes, then iterate args.GridState.SortDescriptors and check if the Stock column is now sorted, what is the sort direction, and what was the previous sort direction.
5. Depending on the current situation, either override the SortDirection property of the SortDescriptor, or add a new SortDescriptor to the args.GridState.SortDescriptors. The logic will vary, depending on the Grid SortMode (Single or Multiple).
6. Use the Grid SetStateAsync method to apply the modified Grid state to the component instance.

Sort a Grid column descending first

@using Telerik.DataSource

Grid SortMode:

<TelerikRadioGroup Data="@RadioGroupData"
                   Value="@GridSortMode"
                   ValueChanged="@( (SortMode newMode) => OnRadioGroupValueChanged(newMode) )"/>

<br /><br />

The Stock column will sort <strong>descending</strong> first.
The Name and Price columns will sort <strong>ascending</strong> first.

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Sortable="true"
             SortMode="@GridSortMode"
             Pageable="true"
             OnStateChanged="@( (GridStateEventArgs<Product> args) => OnGridStateChanged(args) )">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Stock)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product> GridRef { get; set; } = null!;

    private List<Product> GridData { get; set; } = new List<Product>();

    private SortMode GridSortMode { get; set; } = SortMode.Single;

    private ListSortDirection? LastStockSort { get; set; } = null;

    private List<SortMode> RadioGroupData { get; set; } = new List<SortMode>() {
        SortMode.Single, SortMode.Multiple
    };

    private async Task OnGridStateChanged(GridStateEventArgs<Product> args)
    {
        if (args.PropertyName == "SortDescriptors")
        {
            if (LastStockSort == ListSortDirection.Descending && (
                (GridSortMode == SortMode.Multiple && !args.GridState.SortDescriptors.Any(x => x.Member == nameof(Product.Stock))) ||
                (GridSortMode == SortMode.Single && !args.GridState.SortDescriptors.Any())
                )
            )
            {
                // override Stock sorting from None to Ascending
                args.GridState.SortDescriptors.Add(new SortDescriptor()
                {
                    Member = nameof(Product.Stock),
                    SortDirection = ListSortDirection.Ascending
                });
            }
            else
            {
                SortDescriptor stockDescriptorToRemove = null;

                foreach (var sd in args.GridState.SortDescriptors)
                {
                    if (sd.Member == nameof(Product.Stock))
                    {
                        if (sd.SortDirection == ListSortDirection.Ascending &&
                            LastStockSort == null)
                        {
                            // override Stock sorting from Ascending to Descending
                            sd.SortDirection = ListSortDirection.Descending;
                            LastStockSort = ListSortDirection.Descending;
                        }
                        else if (sd.SortDirection == ListSortDirection.Descending &&
                            LastStockSort == ListSortDirection.Ascending)
                        {
                            // override Stock sorting from Ascending to none
                            stockDescriptorToRemove = sd;
                            break;
                        }
                    }
                }

                args.GridState.SortDescriptors.Remove(stockDescriptorToRemove);
            }

            var currentStockDescriptor = args.GridState.SortDescriptors.FirstOrDefault(x => x.Member == nameof(Product.Stock));

            if (currentStockDescriptor == null)
            {
                LastStockSort = null;
            }
            else
            {
                LastStockSort = currentStockDescriptor.SortDirection;
            }

            await GridRef.SetStateAsync(args.GridState);
        }
    }

    private async Task OnRadioGroupValueChanged(SortMode newMode)
    {
        GridSortMode = newMode;
        LastStockSort = null;
        await GridRef.SetStateAsync(null);
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 33; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Price = (decimal)rnd.Next(1, 4) * 100m,
                Stock = 50 - rnd.Next(1, 4),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                InProduction = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool InProduction { get; set; }
    }
}

See Also

• Grid State documentation
• GridState API reference