Blazor Tree Grid Sorting

The Ignite UI for Blazor Data Sorting feature in Blazor Tree Grid is enabled on a per-column level, meaning that the IgbTreeGrid can have a mix of sortable and non-sortable columns. Performing Blazor sort actions enables you to change the display order of the records based on specified criteria.

Blazor Tree Grid Sorting Overview Example

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public string OrderDate { get; set; }
    public double Units { get; set; }
    public double UnitPrice { get; set; }
    public double Price { get; set; }
    public bool Delivered { get; set; }
}

public class OrdersTreeData
    : List<OrdersTreeDataItem>
{
    public OrdersTreeData()
    {
        this.Add(new OrdersTreeDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Order 1",
            Category = @"",
            OrderDate = @"2010-02-17",
            Units = 1844,
            UnitPrice = 3.73,
            Price = 6884.38,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chocolate Chip Cookies",
            Category = @"Cookies",
            OrderDate = @"2010-02-17",
            Units = 834,
            UnitPrice = 3.59,
            Price = 2994.06,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Red Apples",
            Category = @"Fruit",
            OrderDate = @"2010-02-17",
            Units = 371,
            UnitPrice = 3.66,
            Price = 1357.86,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Butter",
            Category = @"Diary",
            OrderDate = @"2010-02-17",
            Units = 260,
            UnitPrice = 3.45,
            Price = 897,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Potato Chips",
            Category = @"Snack",
            OrderDate = @"2010-02-17",
            Units = 118,
            UnitPrice = 1.96,
            Price = 231.28,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Orange Juice",
            Category = @"Beverages",
            OrderDate = @"2010-02-17",
            Units = 261,
            UnitPrice = 5.38,
            Price = 1404.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Order 2",
            Category = @"",
            OrderDate = @"2022-05-27",
            Units = 1831,
            UnitPrice = 8.23,
            Price = 15062.77,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Frozen Shrimps",
            Category = @"Seafood",
            OrderDate = @"2022-05-27",
            Units = 120,
            UnitPrice = 20.45,
            Price = 2454,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Ice Tea",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 840,
            UnitPrice = 7,
            Price = 5880,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 203,
            ParentID = 2,
            Name = @"Fresh Cheese",
            Category = @"Diary",
            OrderDate = @"2022-05-27",
            Units = 267,
            UnitPrice = 16.55,
            Price = 4418.85,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 204,
            ParentID = 2,
            Name = @"Carrots",
            Category = @"Vegetables",
            OrderDate = @"2022-05-27",
            Units = 360,
            UnitPrice = 2.77,
            Price = 997.2,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 205,
            ParentID = 2,
            Name = @"Apple Juice",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 244,
            UnitPrice = 5.38,
            Price = 1312.72,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Order 3",
            Category = @"",
            OrderDate = @"2022-08-04",
            Units = 1972,
            UnitPrice = 3.47,
            Price = 6849.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Skimmed Milk 1L",
            Category = @"Diary",
            OrderDate = @"2022-08-04",
            Units = 1028,
            UnitPrice = 3.56,
            Price = 3659.68,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Bananas 5 Pack",
            Category = @"Fruit",
            OrderDate = @"2022-08-04",
            Units = 370,
            UnitPrice = 6.36,
            Price = 2353.2,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Cauliflower",
            Category = @"Vegetables",
            OrderDate = @"2022-08-04",
            Units = 283,
            UnitPrice = 0.95,
            Price = 268.85,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"White Chocolate Cookies",
            Category = @"Cookies",
            OrderDate = @"2022-08-04",
            Units = 291,
            UnitPrice = 1.95,
            Price = 567.45,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 4,
            ParentID = -1,
            Name = @"Order 4",
            Category = @"",
            OrderDate = @"2023-01-04",
            Units = 1065,
            UnitPrice = 5.56,
            Price = 5923.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 401,
            ParentID = 4,
            Name = @"Mini Milk Chocolate Cookie Bites",
            Category = @"Cookies",
            OrderDate = @"2023-01-04",
            Units = 68,
            UnitPrice = 2.25,
            Price = 153,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 402,
            ParentID = 4,
            Name = @"Wild Salmon Fillets",
            Category = @"Seafood",
            OrderDate = @"2023-01-04",
            Units = 320,
            UnitPrice = 16.15,
            Price = 5168,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 403,
            ParentID = 4,
            Name = @"Diet Lemonade",
            Category = @"Beverages",
            OrderDate = @"2023-01-04",
            Units = 437,
            UnitPrice = 0.5,
            Price = 218.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 404,
            ParentID = 4,
            Name = @"Potatoes",
            Category = @"Vegetables",
            OrderDate = @"2023-01-04",
            Units = 240,
            UnitPrice = 1.6,
            Price = 384,
            Delivered = true
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="WebGrid"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="SortingOptions"
            Name="SortingOptionsEditor"
            @ref="sortingOptionsEditor">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            ValueType="PropertyEditorValueType.Button"
            PrimitiveValue="@("Clear Sorting")"
            ButtonClicked="WebGridClearSort"
            Name="propertyEditorPropertyDescription1"
            @ref="propertyEditorPropertyDescription1">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="OrdersTreeData"
        Name="grid"
        @ref="grid"
        SortingExpressions="SortingExpression1"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="ID"
            Header="Order ID"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Name"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Category"
            Header="Category"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="OrderDate"
            Header="Order Date"
            DataType="GridColumnDataType.Date"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Price"
            DataType="GridColumnDataType.Currency"
            Sortable="true"
            PipeArgs="ColumnPipeArgs1"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Units"
            Header="Units"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Delivered"
            Header="Units"
            DataType="GridColumnDataType.Boolean"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var propertyEditor = this.propertyEditor;
        var sortingOptionsEditor = this.sortingOptionsEditor;
        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1;
        var grid = this.grid;
        var column1 = this.column1;

        this.BindElements = () => {
            propertyEditor.Target = this.grid;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription sortingOptionsEditor;
    private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription1;
    private IgbTreeGrid grid;
    private IgbSortingExpression[] _sortingExpression1 = null;
    public IgbSortingExpression[] SortingExpression1
    {
        get
        {
            if (this._sortingExpression1 == null)
            {
                var sortingExpression1 = new IgbSortingExpression[1];
                var sortingExpression2 = new IgbSortingExpression();
                sortingExpression2.FieldName = "Category";
                sortingExpression2.Dir = SortingDirection.Asc;
                sortingExpression2.IgnoreCase = true;
                sortingExpression1[0] = sortingExpression2;
                this._sortingExpression1 = sortingExpression1;
            }
            return this._sortingExpression1;
        }
    }
    private IgbColumn column1;
    private IgbColumnPipeArgs _columnPipeArgs1 = null;
    public IgbColumnPipeArgs ColumnPipeArgs1
    {
        get
        {
            if (this._columnPipeArgs1 == null)
            {
                var columnPipeArgs1 = new IgbColumnPipeArgs();
                columnPipeArgs1.CurrencyCode = "USD";
                columnPipeArgs1.DigitsInfo = "1.2-2";
                this._columnPipeArgs1 = columnPipeArgs1;
            }
            return this._columnPipeArgs1;
        }
    }

    public void WebGridClearSort(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
    {
        this.grid.ClearSort("");
    }

    private OrdersTreeData _ordersTreeData = null;
    public OrdersTreeData OrdersTreeData
    {
        get
        {
            if (_ordersTreeData == null)
            {
                _ordersTreeData = new OrdersTreeData();
            }
            return _ordersTreeData;
        }
    }

}razorCOPY CODE

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssCOPY CODE

This is done via the Sortable input. With the IgbTreeGrid sorting, you can also set the SortingIgnoreCase property to perform case sensitive sorting:

<IgbColumn Field="Title" Sortable="true"></IgbColumn>
razor

Sorting Indicators

Having a certain amount of sorted columns could be really confusing if there is no indication of the sorted order.

The IgbTreeGrid provides a solution for this problem by indicating the index of each sorted column.

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public string OrderDate { get; set; }
    public double Units { get; set; }
    public double UnitPrice { get; set; }
    public double Price { get; set; }
    public bool Delivered { get; set; }
}

public class OrdersTreeData
    : List<OrdersTreeDataItem>
{
    public OrdersTreeData()
    {
        this.Add(new OrdersTreeDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Order 1",
            Category = @"",
            OrderDate = @"2010-02-17",
            Units = 1844,
            UnitPrice = 3.73,
            Price = 6884.38,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chocolate Chip Cookies",
            Category = @"Cookies",
            OrderDate = @"2010-02-17",
            Units = 834,
            UnitPrice = 3.59,
            Price = 2994.06,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Red Apples",
            Category = @"Fruit",
            OrderDate = @"2010-02-17",
            Units = 371,
            UnitPrice = 3.66,
            Price = 1357.86,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Butter",
            Category = @"Diary",
            OrderDate = @"2010-02-17",
            Units = 260,
            UnitPrice = 3.45,
            Price = 897,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Potato Chips",
            Category = @"Snack",
            OrderDate = @"2010-02-17",
            Units = 118,
            UnitPrice = 1.96,
            Price = 231.28,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Orange Juice",
            Category = @"Beverages",
            OrderDate = @"2010-02-17",
            Units = 261,
            UnitPrice = 5.38,
            Price = 1404.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Order 2",
            Category = @"",
            OrderDate = @"2022-05-27",
            Units = 1831,
            UnitPrice = 8.23,
            Price = 15062.77,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Frozen Shrimps",
            Category = @"Seafood",
            OrderDate = @"2022-05-27",
            Units = 120,
            UnitPrice = 20.45,
            Price = 2454,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Ice Tea",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 840,
            UnitPrice = 7,
            Price = 5880,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 203,
            ParentID = 2,
            Name = @"Fresh Cheese",
            Category = @"Diary",
            OrderDate = @"2022-05-27",
            Units = 267,
            UnitPrice = 16.55,
            Price = 4418.85,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 204,
            ParentID = 2,
            Name = @"Carrots",
            Category = @"Vegetables",
            OrderDate = @"2022-05-27",
            Units = 360,
            UnitPrice = 2.77,
            Price = 997.2,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 205,
            ParentID = 2,
            Name = @"Apple Juice",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 244,
            UnitPrice = 5.38,
            Price = 1312.72,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Order 3",
            Category = @"",
            OrderDate = @"2022-08-04",
            Units = 1972,
            UnitPrice = 3.47,
            Price = 6849.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Skimmed Milk 1L",
            Category = @"Diary",
            OrderDate = @"2022-08-04",
            Units = 1028,
            UnitPrice = 3.56,
            Price = 3659.68,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Bananas 5 Pack",
            Category = @"Fruit",
            OrderDate = @"2022-08-04",
            Units = 370,
            UnitPrice = 6.36,
            Price = 2353.2,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Cauliflower",
            Category = @"Vegetables",
            OrderDate = @"2022-08-04",
            Units = 283,
            UnitPrice = 0.95,
            Price = 268.85,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"White Chocolate Cookies",
            Category = @"Cookies",
            OrderDate = @"2022-08-04",
            Units = 291,
            UnitPrice = 1.95,
            Price = 567.45,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 4,
            ParentID = -1,
            Name = @"Order 4",
            Category = @"",
            OrderDate = @"2023-01-04",
            Units = 1065,
            UnitPrice = 5.56,
            Price = 5923.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 401,
            ParentID = 4,
            Name = @"Mini Milk Chocolate Cookie Bites",
            Category = @"Cookies",
            OrderDate = @"2023-01-04",
            Units = 68,
            UnitPrice = 2.25,
            Price = 153,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 402,
            ParentID = 4,
            Name = @"Wild Salmon Fillets",
            Category = @"Seafood",
            OrderDate = @"2023-01-04",
            Units = 320,
            UnitPrice = 16.15,
            Price = 5168,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 403,
            ParentID = 4,
            Name = @"Diet Lemonade",
            Category = @"Beverages",
            OrderDate = @"2023-01-04",
            Units = 437,
            UnitPrice = 0.5,
            Price = 218.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 404,
            ParentID = 4,
            Name = @"Potatoes",
            Category = @"Vegetables",
            OrderDate = @"2023-01-04",
            Units = 240,
            UnitPrice = 1.6,
            Price = 384,
            Delivered = true
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="OrdersTreeData"
        Name="grid"
        @ref="grid"
        SortingExpressions="SortingExpression1"
        Id="grid"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="ID"
            Header="Order ID"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Name"
            DataType="GridColumnDataType.String"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Category"
            Header="Category"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="OrderDate"
            Header="Order Date"
            DataType="GridColumnDataType.Date"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Price"
            DataType="GridColumnDataType.Currency"
            Sortable="true"
            PipeArgs="ColumnPipeArgs1"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Units"
            Header="Units"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Delivered"
            Header="Units"
            DataType="GridColumnDataType.Boolean"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;
        var column1 = this.column1;

    }

    private IgbTreeGrid grid;
    private IgbSortingExpression[] _sortingExpression1 = null;
    public IgbSortingExpression[] SortingExpression1
    {
        get
        {
            if (this._sortingExpression1 == null)
            {
                var sortingExpression1 = new IgbSortingExpression[7];
                var sortingExpression2 = new IgbSortingExpression();
                sortingExpression2.Dir = SortingDirection.Asc;
                sortingExpression2.FieldName = "ID";
                sortingExpression2.IgnoreCase = true;
                sortingExpression1[0] = sortingExpression2;
                var sortingExpression3 = new IgbSortingExpression();
                sortingExpression3.Dir = SortingDirection.Desc;
                sortingExpression3.FieldName = "Name";
                sortingExpression3.IgnoreCase = true;
                sortingExpression1[1] = sortingExpression3;
                var sortingExpression4 = new IgbSortingExpression();
                sortingExpression4.Dir = SortingDirection.Asc;
                sortingExpression4.FieldName = "Category";
                sortingExpression4.IgnoreCase = true;
                sortingExpression1[2] = sortingExpression4;
                var sortingExpression5 = new IgbSortingExpression();
                sortingExpression5.Dir = SortingDirection.Asc;
                sortingExpression5.FieldName = "OrderDate";
                sortingExpression5.IgnoreCase = true;
                sortingExpression1[3] = sortingExpression5;
                var sortingExpression6 = new IgbSortingExpression();
                sortingExpression6.Dir = SortingDirection.Asc;
                sortingExpression6.FieldName = "Price";
                sortingExpression6.IgnoreCase = true;
                sortingExpression1[4] = sortingExpression6;
                var sortingExpression7 = new IgbSortingExpression();
                sortingExpression7.Dir = SortingDirection.Asc;
                sortingExpression7.FieldName = "Units";
                sortingExpression7.IgnoreCase = true;
                sortingExpression1[5] = sortingExpression7;
                var sortingExpression8 = new IgbSortingExpression();
                sortingExpression8.Dir = SortingDirection.Asc;
                sortingExpression8.FieldName = "Delivered";
                sortingExpression8.IgnoreCase = true;
                sortingExpression1[6] = sortingExpression8;
                this._sortingExpression1 = sortingExpression1;
            }
            return this._sortingExpression1;
        }
    }
    private IgbColumn column1;
    private IgbColumnPipeArgs _columnPipeArgs1 = null;
    public IgbColumnPipeArgs ColumnPipeArgs1
    {
        get
        {
            if (this._columnPipeArgs1 == null)
            {
                var columnPipeArgs1 = new IgbColumnPipeArgs();
                columnPipeArgs1.CurrencyCode = "USD";
                columnPipeArgs1.DigitsInfo = "1.2-2";
                this._columnPipeArgs1 = columnPipeArgs1;
            }
            return this._columnPipeArgs1;
        }
    }

    private OrdersTreeData _ordersTreeData = null;
    public OrdersTreeData OrdersTreeData
    {
        get
        {
            if (_ordersTreeData == null)
            {
                _ordersTreeData = new OrdersTreeData();
            }
            return _ordersTreeData;
        }
    }

}razorCOPY CODE

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssCOPY CODE

Sorting through the API

You can sort any column or a combination of columns through the IgbTreeGrid API using the IgbTreeGrid Sort method:

@code {
    this.grtreeGridid.SortAsync(new IgbSortingExpression[]
        {
            new IgbSortingExpression
            {
                FieldName = "Category",
                Dir = SortingDirection.Asc
            },
            new IgbSortingExpression
            {
                FieldName = "Price",
                Dir = SortingDirection.Desc
            }
        });
}
razor

Sorting is performed using our DefaultSortingStrategy algorithm. Any IgbColumn or ISortingExpression can use a custom implementation of the ISortingStrategy as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example.

As with the filtering behavior, you can clear the sorting state by using the ClearSort method:

@code {
    @*Removes the sorting state from the Category column*@
    this.treeGrid.ClearSortAsync("Category");

    @*Removes the sorting state from every column in the Grid*@
    this.treeGrid.ClearSortAsync("");
}
razor

The SortStrategy of the IgbTreeGrid is of different type compared to the SortStrategy of the IgbColumn, since they work in different scopes and expose different parameters.

The sorting operation DOES NOT change the underlying data source of the IgbTreeGrid.

Initial Sorting State

It is possible to set the initial sorting state of the IgbTreeGrid by passing an array of sorting expressions to the SortingExpressions property of the IgbTreeGrid.

@code {
    protected override void OnAfterRender(bool first)
    {
        if (first)
        {
            this.treeGrid.SortingExpressions = new IgbSortingExpression[]{
                new IgbSortingExpression()
                {
                    FieldName = "Category",
                    Dir = SortingDirection.Asc
                }};
        }
    }
}
razor

If values of type string are used by a column of DataType Date, the IgbTreeGrid won't parse them to Date objects and using IgbTreeGrid Sorting won't work as expected. If you want to use string objects, additional logic should be implemented on an application level, in order to parse the values to Date objects.

Sorting Indicators Templates

The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none):

• SortHeaderIconTemplate – re-templates the sorting icon when no sorting is applied.

<IgbTreeGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbTreeGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
    };
}
razor

• SortAscendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in ascending order.

<IgbTreeGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbTreeGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
    };
}
razor

• SortDescendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in descending order.

<IgbTreeGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbTreeGrid>

@code {
    public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
    {
        return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
    };
}
razor

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

<IgbTreeGrid class="grid">
</IgbTreeGrid>
razor

Then set the related CSS properties to this class:

.grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}
css

Demo

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public string OrderDate { get; set; }
    public double Units { get; set; }
    public double UnitPrice { get; set; }
    public double Price { get; set; }
    public bool Delivered { get; set; }
}

public class OrdersTreeData
    : List<OrdersTreeDataItem>
{
    public OrdersTreeData()
    {
        this.Add(new OrdersTreeDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Order 1",
            Category = @"",
            OrderDate = @"2010-02-17",
            Units = 1844,
            UnitPrice = 3.73,
            Price = 6884.38,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chocolate Chip Cookies",
            Category = @"Cookies",
            OrderDate = @"2010-02-17",
            Units = 834,
            UnitPrice = 3.59,
            Price = 2994.06,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Red Apples",
            Category = @"Fruit",
            OrderDate = @"2010-02-17",
            Units = 371,
            UnitPrice = 3.66,
            Price = 1357.86,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Butter",
            Category = @"Diary",
            OrderDate = @"2010-02-17",
            Units = 260,
            UnitPrice = 3.45,
            Price = 897,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Potato Chips",
            Category = @"Snack",
            OrderDate = @"2010-02-17",
            Units = 118,
            UnitPrice = 1.96,
            Price = 231.28,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Orange Juice",
            Category = @"Beverages",
            OrderDate = @"2010-02-17",
            Units = 261,
            UnitPrice = 5.38,
            Price = 1404.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Order 2",
            Category = @"",
            OrderDate = @"2022-05-27",
            Units = 1831,
            UnitPrice = 8.23,
            Price = 15062.77,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Frozen Shrimps",
            Category = @"Seafood",
            OrderDate = @"2022-05-27",
            Units = 120,
            UnitPrice = 20.45,
            Price = 2454,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Ice Tea",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 840,
            UnitPrice = 7,
            Price = 5880,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 203,
            ParentID = 2,
            Name = @"Fresh Cheese",
            Category = @"Diary",
            OrderDate = @"2022-05-27",
            Units = 267,
            UnitPrice = 16.55,
            Price = 4418.85,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 204,
            ParentID = 2,
            Name = @"Carrots",
            Category = @"Vegetables",
            OrderDate = @"2022-05-27",
            Units = 360,
            UnitPrice = 2.77,
            Price = 997.2,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 205,
            ParentID = 2,
            Name = @"Apple Juice",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 244,
            UnitPrice = 5.38,
            Price = 1312.72,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Order 3",
            Category = @"",
            OrderDate = @"2022-08-04",
            Units = 1972,
            UnitPrice = 3.47,
            Price = 6849.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Skimmed Milk 1L",
            Category = @"Diary",
            OrderDate = @"2022-08-04",
            Units = 1028,
            UnitPrice = 3.56,
            Price = 3659.68,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Bananas 5 Pack",
            Category = @"Fruit",
            OrderDate = @"2022-08-04",
            Units = 370,
            UnitPrice = 6.36,
            Price = 2353.2,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Cauliflower",
            Category = @"Vegetables",
            OrderDate = @"2022-08-04",
            Units = 283,
            UnitPrice = 0.95,
            Price = 268.85,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"White Chocolate Cookies",
            Category = @"Cookies",
            OrderDate = @"2022-08-04",
            Units = 291,
            UnitPrice = 1.95,
            Price = 567.45,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 4,
            ParentID = -1,
            Name = @"Order 4",
            Category = @"",
            OrderDate = @"2023-01-04",
            Units = 1065,
            UnitPrice = 5.56,
            Price = 5923.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 401,
            ParentID = 4,
            Name = @"Mini Milk Chocolate Cookie Bites",
            Category = @"Cookies",
            OrderDate = @"2023-01-04",
            Units = 68,
            UnitPrice = 2.25,
            Price = 153,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 402,
            ParentID = 4,
            Name = @"Wild Salmon Fillets",
            Category = @"Seafood",
            OrderDate = @"2023-01-04",
            Units = 320,
            UnitPrice = 16.15,
            Price = 5168,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 403,
            ParentID = 4,
            Name = @"Diet Lemonade",
            Category = @"Beverages",
            OrderDate = @"2023-01-04",
            Units = 437,
            UnitPrice = 0.5,
            Price = 218.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 404,
            ParentID = 4,
            Name = @"Potatoes",
            Category = @"Vegetables",
            OrderDate = @"2023-01-04",
            Units = 240,
            UnitPrice = 1.6,
            Price = 384,
            Delivered = true
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Id="grid"
        Name="grid"
        @ref="grid"
        Data="OrdersTreeData"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="ID"
            Header="Order ID"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Name"
            DataType="GridColumnDataType.String"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Category"
            Header="Category"
            DataType="GridColumnDataType.String"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="OrderDate"
            Header="Order Date"
            DataType="GridColumnDataType.Date"
            Groupable="true"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Price"
            DataType="GridColumnDataType.Currency"
            Groupable="true"
            Sortable="true"
            PipeArgs="ColumnPipeArgs1"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Units"
            Header="Units"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Delivered"
            Header="Units"
            DataType="GridColumnDataType.Boolean"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;
        var column1 = this.column1;

    }

    private IgbTreeGrid grid;
    private IgbColumn column1;
    private IgbColumnPipeArgs _columnPipeArgs1 = null;
    public IgbColumnPipeArgs ColumnPipeArgs1
    {
        get
        {
            if (this._columnPipeArgs1 == null)
            {
                var columnPipeArgs1 = new IgbColumnPipeArgs();
                columnPipeArgs1.CurrencyCode = "USD";
                columnPipeArgs1.DigitsInfo = "1.2-2";
                this._columnPipeArgs1 = columnPipeArgs1;
            }
            return this._columnPipeArgs1;
        }
    }

    private OrdersTreeData _ordersTreeData = null;
    public OrdersTreeData OrdersTreeData
    {
        get
        {
            if (_ordersTreeData == null)
            {
                _ordersTreeData = new OrdersTreeData();
            }
            return _ordersTreeData;
        }
    }

}razorCOPY CODE

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}

cssCOPY CODE

API References

• IgbSortingExpression

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub