From f89c97c5bbfa5aad2394a1cbc2df97b885d8019e Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Wed, 22 Oct 2025 12:36:30 +0530 Subject: [PATCH 1/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 1292 ++++++++++++++++-------------------- 1 file changed, 586 insertions(+), 706 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 1645ff1236..62d17e45ba 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in Blazor DataGrid | Syncfusion -description: Learn all about sorting data-bound columns, single and multiple, in Syncfusion Blazor DataGrid component. +description: Explore sorting in Syncfusion Blazor DataGrid including single/multi-column sort, initial sort, custom icons, foreign key sorting, and sorting events. platform: Blazor control: DataGrid documentation: ug @@ -9,97 +9,94 @@ documentation: ug # Sorting in Blazor DataGrid -The Syncfusion® Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. - -To know about how to **Sorting** in Grid, you can check this video. +The Syncfusion® Blazor DataGrid includes built-in support for sorting data-bound columns in **ascending** or **descending** order. Enable sorting by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to `true`. +An overview of **sorting** functionality is available in this video: {% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} -To sort a particular column in the Grid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**. +Clicking a column header toggles the sort direction between `ascending` and `descending`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() - { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + public static List GetAllRecords() + { + if (Orders.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Grid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction. -> * You can apply and clear sorting by using the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) methods. -> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. +> * Columns are sorted in **ascending** order by default. +> * Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) to sort programmatically. +> * Use [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) to remove sorting. +> * To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of GridColumn to `false`. ## Initial sorting -By default, the Grid does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). This feature is helpful when you want to display your data in a specific order when the Grid is first loaded. +By default, the Syncfusion® Blazor DataGrid does not apply sorting during initial rendering. To display records in a predefined order when the Grid loads, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). -The following example demonstrates how to set the **GridSortSettings** of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`. +In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @@ -110,84 +107,75 @@ The following example demonstrates how to set the **GridSortSettings** of the ` - - - - + + + + - @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The initial sorting defined in the `GridSortSettings` of the `Columns` will override any sorting applied through user interaction. +> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction. ## Multi-column sorting -The Syncfusion® Blazor DataGrid allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways. - -To clear multi-column sorting for a particular column, press the "Shift + mouse left click". +The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. Enable this feature by setting both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to `true`. +When multi-column sorting is active: -> * The `AllowSorting` must be **true** while enabling multi-column sort. -> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting. +- Hold Ctrl (or Command on macOS) and click additional column headers to add them to the sort configuration. +- Press Shift and click a column header to remove it from the multi-sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -195,68 +183,59 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); - public class OrderData + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() - { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + public static List GetAllRecords() + { + if (Orders.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } + return Orders; + } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; - } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - } {% endhighlight %} {% endtabs %} @@ -264,79 +243,71 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse ## Prevent sorting for particular column -The Syncfusion® Blazor DataGrid provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process. +The Syncfusion® Blazor DataGrid allows disabling sorting for specific columns. This is useful for fields that should remain unsortable. -It can be achieved by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the particular column to **false**. +To disable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the target [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to `false`. -The following example demonstrates, how to disable sorting for **CustomerID** column. +In this configuration, sorting is disabled for the **CustomerID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } -} + } +} {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} @@ -344,9 +315,10 @@ The following example demonstrates, how to disable sorting for **CustomerID** co ## Customizing sorting functionality with the AllowUnsort property -When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to **false** in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html), the Grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the Grid to its original unsorted layout through column header clicks. +The Syncfusion® Blazor DataGrid allows controlling whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). +When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to `false`, clicking a sorted column header does not revert the Grid to its original unsorted layout. This configuration ensures that columns remain sorted unless explicitly changed through another sort action. -In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**. +In this configuration, the Grid is prevented from entering an unsorted state by setting [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) to false. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -355,67 +327,58 @@ In the following example, this is demonstrated by preventing the Grid from enter - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} @@ -423,16 +386,17 @@ In the following example, this is demonstrated by preventing the Grid from enter ## Sort order -By default, the sorting order will be as **Ascending -> Descending -> None**. +By default, the sorting sequence in the Syncfusion® Blazor DataGrid follows this pattern: **Ascending** → **Descending** → **None**. -When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting. +- First click on a column header applies `ascending` sorting. +- Second click switches to `descending` sorting. +- Third click `clears` the sorting and restores the unsorted state. ## Custom sorting -The Syncfusion® Blazor DataGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5). +The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer implementation, which can be created by defining a comparer class that implements the .NET [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. - -The following example demonstrates how to define custom sort comparer function for the **CustomerID** column. +In this configuration, a custom comparer is assigned to the **CustomerID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -441,118 +405,108 @@ The following example demonstrates how to define custom sort comparer function f - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public class CustomComparer : IComparer + public class CustomComparer : IComparer { - public int Compare(object XRowDataToCompare, object YRowDataToCompare) + public int Compare(object? XRowDataToCompare, object? YRowDataToCompare) { - OrderData XRowData = XRowDataToCompare as OrderData; - OrderData YRowData = YRowDataToCompare as OrderData; - int XRowDataOrderID = (int)XRowData.OrderID; - int YRowDataOrderID = (int)YRowData.OrderID; - if (XRowDataOrderID < YRowDataOrderID) - { - return -1; - } - else if (XRowDataOrderID > YRowDataOrderID) - { - return 1; - } - else + if (XRowDataToCompare is not OrderData XOrder || YRowDataToCompare is not OrderData YOrder) { return 0; } + + return Nullable.Compare(XOrder.OrderID, YOrder.OrderID); } } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, double? freight, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWXBiJFYfNCrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrUWMtqggCjRVvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * The SortComparer function takes two parameters: a and b. The a and b parameters are the values to be compared. The function returns -1, 0, or 1, depending on the comparison result. -> * The SortComparer property will work only for local data. -> * When using the column template to display data in a column, you will need to use the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to work with the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property. +> * The **SortComparer** function receives two parameters: `a` and `b`, which represent the values to be compared. The function must return: + - **-1** if `a` should appear before `b` + - **0** if `a` and `b` are equal + - **1** if `a` should appear after `b` +> * The **SortComparer** property is supported only when using `local data`. +> * When using a `column template`, ensure the [GridColumn.Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property is defined so that SortComparer can access the corresponding field value. ## Touch interaction -When you tap the Syncfusion® Blazor DataGrid header on touchscreen devices, the selected column header is sorted. A popup ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired Grid headers. +The Syncfusion® Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon +![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) appears to enable multi-column sorting. +To sort multiple columns, tap the popup +![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired column headers. -> The [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) should be **true** then only the popup will be shown. +> Both [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) must be true for the popup to appear. -The following screenshot represents a Grid touch sorting in the device. +This screenshot illustrates touch-based sorting in the Grid: -![Sorting in Blazor DataGrid using touch interaction.](./images/blazor-datagrid-touch-sorting.jpg) +![Sorting in Blazor DataGrid](./images/blazor-datagrid-touch-sorting.jpg) ## Sort foreign key column based on text -To perform sorting based on foreign key column, the `GridForeignColumn` column can be enabled by using [ForeignDataSource ](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource), [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties. +The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties: -**Sort foreign key column based on text for local data** +- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) +- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) +- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) -In the case of local data in the Grid, the sorting operation will be performed based on the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property of the column. The `ForeignKeyValue` property should be defined in the column definition with the corresponding foreign key value for each row. The Grid will sort the foreign key column based on the text representation of the `ForeignKeyValue` property. +**Sort foreign key column based on text for local data** -The following example demonstrates how to perform sorting by enabling a foreign key column, where the **CustomerID** column acts as a foreign column displaying the **ContactName** column from foreign data. +For local data, sorting is performed based on the value of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property. Assign this property to the display text field from the foreign data source to sort the column by that text. +In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -560,111 +514,100 @@ The following example demonstrates how to perform sorting by enabling a foreign - - - - + + + + @code { - public List GridData { get; set; } - public List customerData { get; set; } + public List GridData { get; set; } = new List(); + public List CustomerData { get; set; } = new List(); + protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - customerData = EmployeeData.GetAllRecords(); + CustomerData = EmployeeData.GetAllRecords(); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} public class EmployeeData +{ + private static readonly List EmployeeRecords = new List(); + + public EmployeeData(int? customerId, string contactName) { - public static List customerData = new List(); - public EmployeeData() - { + CustomerID = customerId; + ContactName = contactName; + } - } - public EmployeeData(int? customerID, string contactName) - { - CustomerID = customerID; - ContactName = contactName; - } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (EmployeeRecords.Count == 0) { - if (customerData.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - customerData.Add(new EmployeeData(1, "Paul Henriot")); - customerData.Add(new EmployeeData(2, "Karin Josephs")); - customerData.Add(new EmployeeData(3, "Mario Pontes")); - customerData.Add(new EmployeeData(4, "Mary Saveley")); - customerData.Add(new EmployeeData(5, "Pascale Cartrain")); - customerData.Add(new EmployeeData(6, "Mario Pontes")); - customerData.Add(new EmployeeData(7, "Yang Wang")); - customerData.Add(new EmployeeData(8, "Michael Holz")); - customerData.Add(new EmployeeData(9, "Paula Parente")); - code += 5; - } - } - return customerData; + EmployeeRecords.Add(new EmployeeData(1, "Paul Henriot")); + EmployeeRecords.Add(new EmployeeData(2, "Karin Josephs")); + EmployeeRecords.Add(new EmployeeData(3, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(4, "Mary Saveley")); + EmployeeRecords.Add(new EmployeeData(5, "Pascale Cartrain")); + EmployeeRecords.Add(new EmployeeData(6, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(7, "Yang Wang")); + EmployeeRecords.Add(new EmployeeData(8, "Michael Holz")); + EmployeeRecords.Add(new EmployeeData(9, "Paula Parente")); } - public int? CustomerID { get; set; } - public string ContactName { get; set; } + + return EmployeeRecords; } - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,int? CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public int? CustomerID { get; set; } + public string ContactName { get; set; } +} + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, int? customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public int? CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public int? CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrKiWtqgIEXHWyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## How to customize sort icon -To customize the sort icon in the Syncfusion® Blazor DataGrid, you can override the default Grid classes **.e-icon-ascending** and **.e-icon-descending** with custom content using CSS. Simply specify the desired icons or symbols using the **content** property as mentioned below +The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the `content` property to define custom icons: ```css .e-grid .e-icon-ascending::before { @@ -676,7 +619,7 @@ To customize the sort icon in the Syncfusion® - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { @@ -717,64 +660,55 @@ In the below sample, Grid is rendered with a customized sort icon. } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } - {% endhighlight %} -{% endtabs %} + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhKCWZqBWwrwhml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sort columns externally -The Syncfusion® Blazor DataGrid allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click. +The Syncfusion® Blazor DataGrid supports sorting based on external interactions, such as dropdown selection and button clicks. You can add or remove sort columns and clear sorting programmatically. ### Add sort columns -To sort a column externally, you can utilize the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the Grid. This method allows you to programmatically sort a specific column based on your requirements. +To sort a column externally, use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) with parameters for column name, direction, and whether to perform multi-sort. -The following example demonstrates how to add sort columns to a Grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters. +This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction, and calls `SortColumnAsync` on a button click. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -784,20 +718,20 @@ The following example demonstrates how to add sort columns to a Grid. It utilize
- - + +

- +

- ADD SORT COLUMN + Add sort column
@@ -807,115 +741,92 @@ The following example demonstrates how to add sort columns to a Grid. It utilize - - - - + + + + @code { - public List GridData { get; set; } - + public List GridData { get; set; } = new List(); public SfGrid? Grid { get; set; } - public string DropDownValue { get; set; } = "OrderID"; - - public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); - - public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; - - protected override void OnInitialized() - { - GridData = OrderData.GetAllRecords(); - } - - List LocalData = new List + public string[] EnumValues { get; set; } = Enum.GetNames(typeof(SortDirection)); + public SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; + public List Columns { get; set; } = new List { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "Freight", Value= "Freight" }, + new ColumnMetadata { Id = "OrderID", Value = "Order ID" }, + new ColumnMetadata { Id = "CustomerID", Value = "Customer ID" }, + new ColumnMetadata { Id = "Freight", Value = "Freight" }, }; - List LocalData1 = new List - { - new Direction() { ID= "Ascending", Value= "Ascending" }, - new Direction() { ID= "Descending", Value= "Descending" }, - - }; - - public class Columns + protected override void OnInitialized() { - public string ID { get; set; } - public string Value { get; set; } + GridData = OrderData.GetAllRecords(); } - public class Direction + public async Task AddSortColumn() { - public string ID { get; set; } - public string Value { get; set; } + if (Grid != null) + { + await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + } } - public async Task AddsortColumn() + public class ColumnMetadata { - await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + public string Id { get; set; } = string.Empty; + public string Value { get; set; } = string.Empty; } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, double? freight, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBgsWDKBXuYpcUi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Remove sort columns -To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid. This method allows you to remove the sorting applied to a specific column. +To remove a specific sorted column externally, use [ClearSortingAsync(List)](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__). The method clears sorting for the provided column names. -The following example demonstrates how to remove sort columns. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. +This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select a column and clears sorting for that column on button click. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -925,14 +836,14 @@ The following example demonstrates how to remove sort columns. It utilizes the [
- - + +

- REMOVE SORT COLUMN + Remove sort column
@@ -943,110 +854,92 @@ The following example demonstrates how to remove sort columns. It utilizes the [ - - - - + + + + @code { - public List GridData { get; set; } - + public List GridData { get; set; } = new List(); public SfGrid? Grid { get; set; } - public string DropDownValue { get; set; } = "OrderID"; - + public List Columns { get; set; } = new List + { + new ColumnMetadata { Id = "OrderID", Value = "Order ID" }, + new ColumnMetadata { Id = "CustomerID", Value = "Customer ID" }, + new ColumnMetadata { Id = "ShipCity", Value = "Ship City" }, + new ColumnMetadata { Id = "ShipName", Value = "Ship Name" }, + }; protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - List LocalData = new List - { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "ShipCity", Value= "ShipCity" }, - new Columns() { ID= "ShipName", Value= "ShipName" }, - }; - - public class Columns + public async Task RemoveSortColumn() { - public string ID { get; set; } - public string Value { get; set; } + if (Grid != null) + { + var columnNames = new List { DropDownValue }; + await Grid.ClearSortingAsync(columnNames); + } } - public class Direction + public class ColumnMetadata { - public string ID { get; set; } - public string Value { get; set; } + public string Id { get; set; } = string.Empty; + public string Value { get; set; } = string.Empty; } - List listItems = new List(); - public async Task RemoveSortColumn() - { - listItems.Add(DropDownValue); - await Grid.ClearSortingAsync(listItems); - listItems.Clear(); - - } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJXWtlsYHkfUrY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVeiZVVriBiZzgv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Clear sorting -To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the Grid. This method clears the sorting applied to all columns in the Grid. +The Syncfusion® Blazor DataGrid provides the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method to remove sorting from all columns. -The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click. +In this configuration, sorting is cleared when the external button triggers the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1054,10 +947,10 @@ The following example demonstrates how to clear the sorting using `ClearSortingA @using Syncfusion.Blazor.Buttons
- Clear Sorting + Clear sorting
- + @@ -1065,16 +958,15 @@ The following example demonstrates how to clear the sorting using `ClearSortingA - - - - + + + + @code { - public List GridData { get; set; } - + public List GridData { get; set; } = new List(); public SfGrid? Grid { get; set; } protected override void OnInitialized() @@ -1082,169 +974,157 @@ The following example demonstrates how to clear the sorting using `ClearSortingA GridData = OrderData.GetAllRecords(); } - private async Task onExternalSort() + private async Task OnExternalSort() { - await Grid.ClearSortingAsync(); + if (Grid != null) + { + await Grid.ClearSortingAsync(); + } } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUWWjKiFKHdJVl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVeCjrLrslsrRMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sorting events -The Syncfusion® Blazor DataGrid provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed. +The Syncfusion® Blazor DataGrid provides events to handle sorting operations: -1. **Sorting**: `Sorting` event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action. +1. [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting): Triggered before sorting begins. Set **args.Cancel = true** to `cancel` the operation. Key fields include `ColumnName` and `Direction`. +2. [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted): Triggered after sorting completes. Useful for post-action logic such as displaying notifications. Key fields include `ColumnName` and `Direction`. -2. **Sorted**: `Sorted` event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action. +These events are triggered for both user interactions and programmatic operations, such as [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync), allowing centralized handling of sorting logic. -The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message. +In this configuration, sorting is canceled for the **OrderID** column using the [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event, and a notification is displayed using the [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@if (show == true) +@if (ShowNotification) { -
- Sort action completed for @columnName column +
+ Sort action completed for @LastSortedColumn column

} - + - - - - + + + + @code { - public List GridData { get; set; } - - public string columnName { get; set; } - public bool show { get; set; } = false; + public List GridData { get; set; } = new List(); + public string LastSortedColumn { get; set; } = string.Empty; + public bool ShowNotification { get; set; } protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public async Task SortingHandler(SortingEventArgs args) + public Task SortingHandler(SortingEventArgs args) { if (args.ColumnName == "OrderID") { args.Cancel = true; } + + return Task.CompletedTask; } - public async Task SortedHandler(SortedEventArgs args) + public Task SortedHandler(SortedEventArgs args) { - columnName = args.ColumnName; - show = true; + LastSortedColumn = args.ColumnName; + ShowNotification = true; + return Task.CompletedTask; } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrSCXrBrBVsLJxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzNWNzLolkmHqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file From 8574ab10a0d093e5fa55a6854bb4aff2f1fe689b Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Wed, 22 Oct 2025 12:38:04 +0530 Subject: [PATCH 2/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 1 + 1 file changed, 1 insertion(+) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 62d17e45ba..7680a5f695 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -10,6 +10,7 @@ documentation: ug # Sorting in Blazor DataGrid The Syncfusion® Blazor DataGrid includes built-in support for sorting data-bound columns in **ascending** or **descending** order. Enable sorting by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to `true`. + An overview of **sorting** functionality is available in this video: {% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} From 54a1e5214331076a4756c204285c5bc5aaa54a79 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Wed, 22 Oct 2025 13:34:03 +0530 Subject: [PATCH 3/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 7680a5f695..554d440087 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -244,7 +244,7 @@ public class OrderData ## Prevent sorting for particular column -The Syncfusion® Blazor DataGrid allows disabling sorting for specific columns. This is useful for fields that should remain unsortable. +The Syncfusion® Blazor DataGrid allows disabling sorting for specific columns. This is useful for fields that should not be sorted. To disable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the target [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to `false`. From c7d131cb5ea73d909d6a854c73f26a11bba1f13c Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Thu, 6 Nov 2025 02:44:34 +0530 Subject: [PATCH 4/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 637 ++++++++++++++++++++++++++++++------- 1 file changed, 519 insertions(+), 118 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 554d440087..28b99d7b75 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -9,13 +9,25 @@ documentation: ug # Sorting in Blazor DataGrid -The Syncfusion® Blazor DataGrid includes built-in support for sorting data-bound columns in **ascending** or **descending** order. Enable sorting by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to `true`. +The Syncfusion® Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component. -An overview of **sorting** functionality is available in this video: +Sorting can be applied in two ways: +- **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header. +- **Descending Order**: Arranges values from largest to smallest (e.g., Z to A or 100 to 1). A downward arrow (↓) appears next to the header. {% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} -Clicking a column header toggles the sort direction between `ascending` and `descending`. +## Sort via UI + +Interact with column headers to sort data directly. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click sorts ascending. + + +|Action | Result | +|------------------------------|--------------------------------------------------| +| Click header once | Sorts in ascending order (↑ icon appears) | +| Click header again | Sorts in descending order (↓ icon appears) | +| Click header a third time | Clears sorting for that column(no icon) | + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -84,14 +96,14 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Columns are sorted in **ascending** order by default. + ## Initial sorting -By default, the Syncfusion® Blazor DataGrid does not apply sorting during initial rendering. To display records in a predefined order when the Grid loads, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). +By default, the Syncfusion® Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). @@ -172,11 +184,14 @@ public class OrderData ## Multi-column sorting -The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. Enable this feature by setting both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to `true`. -When multi-column sorting is active: +The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**. + +**How Multi-Column Sorting Works** -- Hold Ctrl (or Command on macOS) and click additional column headers to add them to the sort configuration. -- Press Shift and click a column header to remove it from the multi-sort configuration. +When multi-sorting is enabled: +- Click a column header to apply sorting to that column. +- Hold Ctrl (or Command on macOS) and click additional column headers to include them in the sort sequence. +- Press Shift and click a column header to remove it from the multi-column sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -242,11 +257,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Prevent sorting for particular column +## Disabling sorting for specific column -The Syncfusion® Blazor DataGrid allows disabling sorting for specific columns. This is useful for fields that should not be sorted. +The Syncfusion® Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted. -To disable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the target [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to `false`. +To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. In this configuration, sorting is disabled for the **CustomerID** column. @@ -314,12 +329,10 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing sorting functionality with the AllowUnsort property +## Controlling Unsort behavior in Blazor DataGrid -The Syncfusion® Blazor DataGrid allows controlling whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). -When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to `false`, clicking a sorted column header does not revert the Grid to its original unsorted layout. This configuration ensures that columns remain sorted unless explicitly changed through another sort action. - -In this configuration, the Grid is prevented from entering an unsorted state by setting [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) to false. +The Syncfusion® Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). +When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -385,14 +398,6 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort order - -By default, the sorting sequence in the Syncfusion® Blazor DataGrid follows this pattern: **Ascending** → **Descending** → **None**. - -- First click on a column header applies `ascending` sorting. -- Second click switches to `descending` sorting. -- Third click `clears` the sorting and restores the unsorted state. - ## Custom sorting The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer implementation, which can be created by defining a comparer class that implements the .NET [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. @@ -500,13 +505,14 @@ This screenshot illustrates touch-based sorting in the Grid: The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties: -- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) -- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) -- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) +- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) - Specifies the data source that contains foreign key values and display text. +- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping. +- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering. **Sort foreign key column based on text for local data** For local data, sorting is performed based on the value of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property. Assign this property to the display text field from the foreign data source to sort the column by that text. + In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: {% tabs %} @@ -606,6 +612,110 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +**Sort foreign key column based on text for remote data** + +For remote data, sorting is supported when the foreign key column is bound to a remote service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The sorting behavior depends on the capabilities of the remote service: + +- If the remote service (e.g., OData) supports sorting on the display field (e.g., FirstName), the grid will sort based on that field when the column header is clicked. +- Ensure that the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) is correctly mapped to the display field. +- Sorting works best with single-column sorting and may require server-side support for complex sorting scenarios. + +In this configuration, the **FirstName** field is used as the display text for the **EmployeeID** foreign key column: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor + + + + + + + + + + + + + + + +@code { + public List? Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class EmployeeData +{ + public static List Employees = new List(); + + public int EmployeeID { get; set; } + public string FirstName { get; set; } +} + +public class OrderDetails +{ + + public static List order = new List(); + + public OrderDetails(int orderID, string shipCity, int employeeId, double freight) + { + OrderID = orderID; + ShipCity = shipCity; + EmployeeID = employeeId; + Freight = freight; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "Reims", 5, 32.38)); + order.Add(new OrderDetails(10249, "Münster", 6, 11.61)); + order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83)); + order.Add(new OrderDetails(10251, "Lyon", 3, 41.34)); + order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3)); + order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17)); + order.Add(new OrderDetails(10254, "Bern", 5, 22.98)); + order.Add(new OrderDetails(10255, "Genève", 9, 48.33)); + order.Add(new OrderDetails(10256, "Resende", 3, 13.97)); + order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91)); + order.Add(new OrderDetails(10258, "Graz", 1, 40.51)); + order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25)); + order.Add(new OrderDetails(10260, "Köln", 4, 55.09)); + order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05)); + order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29)); + } + return order; + } + + public int OrderID { get; set; } + public string ShipCity { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIMitywxjrWrQR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## How to customize sort icon The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the `content` property to define custom icons: @@ -620,8 +730,6 @@ The Syncfusion® Blazor DataGrid allows cust } ``` -This configuration renders the Grid with customized sort icons. - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @@ -701,15 +809,23 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort columns externally +## Sort via programmatically -The Syncfusion® Blazor DataGrid supports sorting based on external interactions, such as dropdown selection and button clicks. You can add or remove sort columns and clear sorting programmatically. +The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally, such as through dropdown selections or button clicks. ### Add sort columns -To sort a column externally, use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) with parameters for column name, direction, and whether to perform multi-sort. +The DataGrid provides multiple overloads to apply sorting programmatically. These methods allow sorting of a single column, multiple columns, or multiple columns with an option to clear existing sort settings. + +**Sort a Single Column** -This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction, and calls `SortColumnAsync` on a button click. +The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method is used to sort a specific column based on the provided direction. It also supports multi-column sorting when enabled. + +| Parameter | Type | Description | +|----------------|-------------------|-----------------------------------------------------------------------------| +| fieldName | string | Specifies the column name to be sorted. | +| direction | SortDirection | Defines the sort direction. Possible values: Ascending, Descending. | +| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -718,21 +834,22 @@ This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dr @using Syncfusion.Blazor.DropDowns
- - - + + +

- +

+
- Add sort column + ADD SORT COLUMN
@@ -742,55 +859,55 @@ This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dr - - - - + + + + @code { - public List GridData { get; set; } = new List(); - public SfGrid? Grid { get; set; } - public string DropDownValue { get; set; } = "OrderID"; - public string[] EnumValues { get; set; } = Enum.GetNames(typeof(SortDirection)); - public SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; - public List Columns { get; set; } = new List - { - new ColumnMetadata { Id = "OrderID", Value = "Order ID" }, - new ColumnMetadata { Id = "CustomerID", Value = "Customer ID" }, - new ColumnMetadata { Id = "Freight", Value = "Freight" }, - }; + private List GridData { get; set; } + private SfGrid? Grid { get; set; } + private string DropDownValue { get; set; } = "OrderID"; + private string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); + private SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public async Task AddSortColumn() + private List ColumnList = new List { - if (Grid != null) - { - await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); - } + new ColumnItem { ID = "OrderID", Value = "OrderID" }, + new ColumnItem { ID = "CustomerID", Value = "CustomerID" }, + new ColumnItem { ID = "Freight", Value = "Freight" } + }; + + private async Task AddSortColumn() + { + await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); } - public class ColumnMetadata + private class ColumnItem { - public string Id { get; set; } = string.Empty; - public string Value { get; set; } = string.Empty; + public string ID { get; set; } + public string Value { get; set; } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} public class OrderData { - private static readonly List Orders = new List(); + private static readonly List Orders = new List();. + v - public OrderData(int? orderId, string customerId, double? freight, string shipName) + public OrderData(int? orderID, string customerID, double? freight, string shipName) { - OrderID = orderId; - CustomerID = customerId; + OrderID = orderID; + CustomerID = customerID; Freight = freight; ShipName = shipName; } @@ -809,7 +926,6 @@ public class OrderData Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); } - return Orders; } @@ -823,28 +939,204 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Sort Multiple Columns** + +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of SortColumn objects, each specifying the column name and sort direction. + +| Parameter | Type | Description | +|------------------|-------------------------|--------------------------------------------------------------| +| sortedColumns | List | List of columns with their respective sort directions. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Add Sort Column + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + private SfGrid? Grid { get; set; } + public List sortColumns { get; set; } = new List(); + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private async Task ApplyMultiColumnSort() + { + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending }); + await Grid!.SortColumnsAsync(sortColumns); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Sort Multiple Columns and Clear Previous Sort** + +The [SortColumnsAsync] method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns. + +| Parameter | Type | Description | +|---------------------|-------------------------|-----------------------------------------------------------------------------| +| columns | List | Defines the columns to be sorted with their respective directions. | +| clearPreviousSort | bool | Clears existing sort when true before applying the new sort. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Apply New Sort + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + private SfGrid? Grid { get; set; } + public List sortColumns { get; set; } = new List(); + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private async Task ApplyNewSort() + { + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = Syncfusion.Blazor.Grids.SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = Syncfusion.Blazor.Grids.SortDirection.Ascending }); + await Grid!.SortColumnsAsync(sortColumns, true); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ### Remove sort columns -To remove a specific sorted column externally, use [ClearSortingAsync(List)](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__). The method clears sorting for the provided column names. +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column names to clear their sort settings. -This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select a column and clears sorting for that column on button click. +| Parameter | Type | Description | +|---------------|-------------------|--------------------------------------------------------------| +| columnNames | List | List of column field names to remove sorting. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns
- - + +

- Remove sort column + Remove Sort Column
@@ -863,15 +1155,16 @@ This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dr @code { - public List GridData { get; set; } = new List(); - public SfGrid? Grid { get; set; } - public string DropDownValue { get; set; } = "OrderID"; - public List Columns { get; set; } = new List + private List GridData { get; set; } = new(); + private SfGrid? Grid { get; set; } + private string DropDownValue { get; set; } = "OrderID"; + + private List Columns { get; set; } = new() { - new ColumnMetadata { Id = "OrderID", Value = "Order ID" }, - new ColumnMetadata { Id = "CustomerID", Value = "Customer ID" }, - new ColumnMetadata { Id = "ShipCity", Value = "Ship City" }, - new ColumnMetadata { Id = "ShipName", Value = "Ship Name" }, + new ColumnMetaData { Id = "OrderID", Value = "Order ID" }, + new ColumnMetaData { Id = "CustomerID", Value = "Customer ID" }, + new ColumnMetaData { Id = "ShipCity", Value = "Ship City" }, + new ColumnMetaData { Id = "ShipName", Value = "Ship Name" }, }; protected override void OnInitialized() @@ -879,23 +1172,25 @@ This sample uses a [DropDownList](https://blazor.syncfusion.com/documentation/dr GridData = OrderData.GetAllRecords(); } - public async Task RemoveSortColumn() + private async Task RemoveSortColumn() { if (Grid != null) { - var columnNames = new List { DropDownValue }; - await Grid.ClearSortingAsync(columnNames); + var ColumnNames = new List { DropDownValue }; + await Grid.ClearSortingAsync(ColumnNames); } } - public class ColumnMetadata + private class ColumnMetaData { public string Id { get; set; } = string.Empty; public string Value { get; set; } = string.Empty; } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} + public class OrderData { private static readonly List Orders = new List(); @@ -934,13 +1229,11 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVeiZVVriBiZzgv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Clear sorting -The Syncfusion® Blazor DataGrid provides the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method to remove sorting from all columns. - -In this configuration, sorting is cleared when the external button triggers the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method. +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -948,10 +1241,10 @@ In this configuration, sorting is cleared when the external button triggers the @using Syncfusion.Blazor.Buttons
- Clear sorting + Clear Sorting
- + @@ -967,15 +1260,15 @@ In this configuration, sorting is cleared when the external button triggers the @code { - public List GridData { get; set; } = new List(); - public SfGrid? Grid { get; set; } + private List GridData { get; set; } = new(); + private SfGrid? Grid { get; set; } protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } - private async Task OnExternalSort() + private async Task ClearAllSorting() { if (Grid != null) { @@ -983,8 +1276,10 @@ In this configuration, sorting is cleared when the external button triggers the } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} + public class OrderData { private static readonly List Orders = new List(); @@ -1023,35 +1318,42 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVeCjrLrslsrRMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sorting events -The Syncfusion® Blazor DataGrid provides events to handle sorting operations: +The Syncfusion® Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling. + +1. [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting): Triggered before a column is sorted. -1. [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting): Triggered before sorting begins. Set **args.Cancel = true** to `cancel` the operation. Key fields include `ColumnName` and `Direction`. -2. [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted): Triggered after sorting completes. Useful for post-action logic such as displaying notifications. Key fields include `ColumnName` and `Direction`. +2. [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted): Triggered after a column has been sorted. -These events are triggered for both user interactions and programmatic operations, such as [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync), allowing centralized handling of sorting logic. +### Sorting -In this configuration, sorting is canceled for the **OrderID** column using the [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event, and a notification is displayed using the [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event. +The [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements. + +**Purpose** + +This event is useful for scenarios where sorting behavior needs to be controlled dynamically — such as preventing sorting on specific columns, validating conditions before sorting, or customizing the sort direction. + +**Event Arguments** + +The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortingEventArgs.html) class, which includes the following properties: + +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column being sorted. | +| Direction | Indicates the sorting direction (Ascending or Descending). | +| Cancel | Determines whether the sorting operation should be aborted. Setting this property to true prevents the sorting from being applied. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@if (ShowNotification) -{ -
- Sort action completed for @LastSortedColumn column -
-
-} - - + - + @@ -1059,32 +1361,131 @@ In this configuration, sorting is canceled for the **OrderID** column using the @code { - public List GridData { get; set; } = new List(); - public string LastSortedColumn { get; set; } = string.Empty; - public bool ShowNotification { get; set; } + private List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } - public Task SortingHandler(SortingEventArgs args) + private Task OnSorting(SortingEventArgs args) { + // Prevent sorting on OrderID column if (args.ColumnName == "OrderID") { args.Cancel = true; } + // Change sort direction dynamically + if (args.ColumnName == "CustomerID" && args.Direction == SortDirection.Ascending) + { + args.Direction = SortDirection.Descending; + } + return Task.CompletedTask; } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public Task SortedHandler(SortedEventArgs args) + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Sorted + +The [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications. + +**Purpose** + +This event is useful for scenarios where post-sorting actions are required — such as displaying a message, refreshing related data, or tracking user interactions. + +**Event Arguments** + +The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties: + +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column that was sorted. | +| Direction | Indicates the sorting direction (Ascending or Descending). | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + +@if (ShowNotification) +{ +
+ Sorting completed for @LastSortedColumn column +
+
+} + + + + + + + + + + + +@code { + private List GridData { get; set; } = new List(); + private string LastSortedColumn { get; set; } = string.Empty; + private bool ShowNotification { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private Task OnSorted(SortedEventArgs args) { LastSortedColumn = args.ColumnName; ShowNotification = true; return Task.CompletedTask; } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} @@ -1126,6 +1527,6 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrSCXrBrBVsLJxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSsiZewifHMFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file From b2f9e7592180d7ba2d02680a8b4a636e8c4e3216 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Thu, 6 Nov 2025 02:50:16 +0530 Subject: [PATCH 5/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 28b99d7b75..e676a97dda 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -616,11 +616,11 @@ public class OrderData For remote data, sorting is supported when the foreign key column is bound to a remote service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The sorting behavior depends on the capabilities of the remote service: -- If the remote service (e.g., OData) supports sorting on the display field (e.g., FirstName), the grid will sort based on that field when the column header is clicked. -- Ensure that the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) is correctly mapped to the display field. +- If the remote service (e.g., OData) supports sorting on the display text field (such as FirstName), the grid will sort based on that text when the column header is clicked. +- Ensure that the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property is correctly mapped to the display text field. - Sorting works best with single-column sorting and may require server-side support for complex sorting scenarios. -In this configuration, the **FirstName** field is used as the display text for the **EmployeeID** foreign key column: +In this configuration, the **FirstName** field is used as the display text for the **EmployeeID** foreign key column, so sorting will occur based on **FirstName**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -644,8 +644,8 @@ In this configuration, the **FirstName** field is used as the display text for t - - + + From db069cb312f5c3f10bfc8bd1705bca1d7821802c Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Thu, 6 Nov 2025 11:03:33 +0530 Subject: [PATCH 6/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 112 ++----------------------------------- 1 file changed, 4 insertions(+), 108 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index e676a97dda..804b7a8330 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -501,7 +501,7 @@ This screenshot illustrates touch-based sorting in the Grid: ![Sorting in Blazor DataGrid](./images/blazor-datagrid-touch-sorting.jpg) -## Sort foreign key column based on text +## Sort foreign key column The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties: @@ -509,9 +509,9 @@ The Syncfusion® Blazor DataGrid supports so - [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping. - [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering. -**Sort foreign key column based on text for local data** - -For local data, sorting is performed based on the value of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property. Assign this property to the display text field from the foreign data source to sort the column by that text. +N> +* **For local data** → Sorting is performed based on the value of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property (`display text`). +* **For remote data** → Sorting is performed based on the [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) (`foreign key`) unless the remote service supports sorting on the display text field. In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: @@ -612,110 +612,6 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -**Sort foreign key column based on text for remote data** - -For remote data, sorting is supported when the foreign key column is bound to a remote service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The sorting behavior depends on the capabilities of the remote service: - -- If the remote service (e.g., OData) supports sorting on the display text field (such as FirstName), the grid will sort based on that text when the column header is clicked. -- Ensure that the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property is correctly mapped to the display text field. -- Sorting works best with single-column sorting and may require server-side support for complex sorting scenarios. - -In this configuration, the **FirstName** field is used as the display text for the **EmployeeID** foreign key column, so sorting will occur based on **FirstName**: - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Data -@using Syncfusion.Blazor - - - - - - - - - - - - - - - -@code { - public List? Orders { get; set; } - - protected override void OnInitialized() - { - Orders = OrderDetails.GetAllRecords(); - } -} - -{% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - -public class EmployeeData -{ - public static List Employees = new List(); - - public int EmployeeID { get; set; } - public string FirstName { get; set; } -} - -public class OrderDetails -{ - - public static List order = new List(); - - public OrderDetails(int orderID, string shipCity, int employeeId, double freight) - { - OrderID = orderID; - ShipCity = shipCity; - EmployeeID = employeeId; - Freight = freight; - } - - public static List GetAllRecords() - { - if (order.Count == 0) - { - order.Add(new OrderDetails(10248, "Reims", 5, 32.38)); - order.Add(new OrderDetails(10249, "Münster", 6, 11.61)); - order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83)); - order.Add(new OrderDetails(10251, "Lyon", 3, 41.34)); - order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3)); - order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17)); - order.Add(new OrderDetails(10254, "Bern", 5, 22.98)); - order.Add(new OrderDetails(10255, "Genève", 9, 48.33)); - order.Add(new OrderDetails(10256, "Resende", 3, 13.97)); - order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91)); - order.Add(new OrderDetails(10258, "Graz", 1, 40.51)); - order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25)); - order.Add(new OrderDetails(10260, "Köln", 4, 55.09)); - order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05)); - order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29)); - } - return order; - } - - public int OrderID { get; set; } - public string ShipCity { get; set; } - public int EmployeeID { get; set; } - public double Freight { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIMitywxjrWrQR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - ## How to customize sort icon The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the `content` property to define custom icons: From b3b9f3db0cb772cec3d6139cc2ede7c51ee84823 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Thu, 6 Nov 2025 13:40:34 +0530 Subject: [PATCH 7/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 804b7a8330..2dc4298f12 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -797,8 +797,7 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr {% highlight c# tabtitle="OrderData.cs" %} public class OrderData { - private static readonly List Orders = new List();. - v + private static readonly List Orders = new List(); public OrderData(int? orderID, string customerID, double? freight, string shipName) { From 55a3a14fbd9c28290f4662a4097ad4b668f4d93d Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Thu, 6 Nov 2025 17:15:34 +0530 Subject: [PATCH 8/8] 988459: Updated the UG content and samples for Sorting in DataGrid --- blazor/datagrid/sorting.md | 163 +++++++++++++++++++------------------ 1 file changed, 83 insertions(+), 80 deletions(-) diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 2dc4298f12..a76f127b80 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -510,8 +510,8 @@ The Syncfusion® Blazor DataGrid supports so - [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering. N> -* **For local data** → Sorting is performed based on the value of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property (`display text`). -* **For remote data** → Sorting is performed based on the [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) (`foreign key`) unless the remote service supports sorting on the display text field. +* **For local data** → Sorting is performed based on the value of the `ForeignKeyValue` property (**display text**). +* **For remote data** → Sorting is performed based on the `ForeignKeyField` unless the remote service supports sorting on the display text field. In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: @@ -614,7 +614,7 @@ public class OrderData ## How to customize sort icon -The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the `content` property to define custom icons: +The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons: ```css .e-grid .e-icon-ascending::before { @@ -707,21 +707,21 @@ public class OrderData ## Sort via programmatically -The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally, such as through dropdown selections or button clicks. +The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation. ### Add sort columns -The DataGrid provides multiple overloads to apply sorting programmatically. These methods allow sorting of a single column, multiple columns, or multiple columns with an option to clear existing sort settings. +The DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings. -**Sort a Single Column** +**Sorting a Single Column** -The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method is used to sort a specific column based on the provided direction. It also supports multi-column sorting when enabled. +Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the grid, allowing it to add the new sort condition alongside existing ones. | Parameter | Type | Description | |----------------|-------------------|-----------------------------------------------------------------------------| -| fieldName | string | Specifies the column name to be sorted. | -| direction | SortDirection | Defines the sort direction. Possible values: Ascending, Descending. | -| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. | +| fieldName | string | Specifies the column name to be sorted. If the column name is invalid or misspelled, the sort will fail silently without throwing error. | +| direction | SortDirection | Defines the sort direction. Possible values: **Ascending, Descending**. | +| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -731,7 +731,7 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr
- +
@@ -739,7 +739,7 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr
- +

@@ -748,12 +748,7 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr ADD SORT COLUMN - - - - - - + @@ -763,15 +758,15 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr @code { - private List GridData { get; set; } - private SfGrid? Grid { get; set; } - private string DropDownValue { get; set; } = "OrderID"; - private string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); - private SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; + private List gridData { get; set; } + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; + private string[] enumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); + private SortDirection dropDownDirection { get; set; } = SortDirection.Ascending; protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); + gridData = OrderData.GetAllRecords(); } private List ColumnList = new List @@ -783,7 +778,7 @@ The [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr private async Task AddSortColumn() { - await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + await grid.SortColumnAsync(dropDownValue, dropDownDirection); } private class ColumnItem @@ -837,11 +832,11 @@ public class OrderData **Sort Multiple Columns** -The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of SortColumn objects, each specifying the column name and sort direction. +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of [SortColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortColumn.html#Syncfusion_Blazor_Grids_SortColumn_Field) objects, each specifying the column name and sort direction. | Parameter | Type | Description | |------------------|-------------------------|--------------------------------------------------------------| -| sortedColumns | List | List of columns with their respective sort directions. | +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -850,7 +845,7 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G Add Sort Column - + @@ -861,8 +856,8 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G @code { public List GridData { get; set; } = new List(); - private SfGrid? Grid { get; set; } - public List sortColumns { get; set; } = new List(); + private SfGrid? grid { get; set; } + private List sortColumns { get; set; } = new List(); protected override void OnInitialized() { @@ -873,7 +868,7 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G { sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }); sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending }); - await Grid!.SortColumnsAsync(sortColumns); + await grid!.SortColumnsAsync(sortColumns); } } @@ -920,14 +915,18 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> When sorting is applied again using `SortColumnsAsync`, the new sort settings are added to the existing ones. This means previously sorted columns will remain sorted unless explicitly removed or overridden. + **Sort Multiple Columns and Clear Previous Sort** -The [SortColumnsAsync] method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns. +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns. | Parameter | Type | Description | |---------------------|-------------------------|-----------------------------------------------------------------------------| -| columns | List | Defines the columns to be sorted with their respective directions. | -| clearPreviousSort | bool | Clears existing sort when true before applying the new sort. | +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | +| clearPreviousSort | bool | To apply a new sort and remove any existing sort settings, enable the option to clear previous sorting. When this option is set to true, all current sort conditions will be removed before applying the new ones. This ensures that only the specified columns are sorted, rather than combining with any existing sort configuration. | + +In this example, the grid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -938,6 +937,11 @@ The [SortColumnsAsync] method also provides an overload that allows clearing exi Apply New Sort + + + + + @@ -1007,13 +1011,18 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Remove sort columns +### Clear sorting +The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement. -The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column names to clear their sort settings. +**Clear sorting for specific Column** + +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column field names and clears their sort settings. | Parameter | Type | Description | |---------------|-------------------|--------------------------------------------------------------| -| columnNames | List | List of column field names to remove sorting. | +| columnNames | List | A list of column field names whose sorting should be removed. | + +In the following example, the grid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1024,7 +1033,7 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
- +
@@ -1034,7 +1043,7 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Remove Sort Column - + @@ -1051,10 +1060,10 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { private List GridData { get; set; } = new(); - private SfGrid? Grid { get; set; } - private string DropDownValue { get; set; } = "OrderID"; + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; - private List Columns { get; set; } = new() + private List columns { get; set; } = new() { new ColumnMetaData { Id = "OrderID", Value = "Order ID" }, new ColumnMetaData { Id = "CustomerID", Value = "Customer ID" }, @@ -1069,10 +1078,10 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. private async Task RemoveSortColumn() { - if (Grid != null) + if (grid != null) { - var ColumnNames = new List { DropDownValue }; - await Grid.ClearSortingAsync(ColumnNames); + var ColumnNames = new List { dropDownValue }; + await grid.ClearSortingAsync(ColumnNames); } } @@ -1126,10 +1135,12 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Clear sorting +**Clear sorting for all columns** The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state. +In this example, the grid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @@ -1139,7 +1150,7 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Clear Sorting - + @@ -1155,19 +1166,19 @@ The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { - private List GridData { get; set; } = new(); - private SfGrid? Grid { get; set; } + private List gridData { get; set; } = new(); + private SfGrid? grid { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); + gridData = OrderData.GetAllRecords(); } private async Task ClearAllSorting() { - if (Grid != null) + if (grid != null) { - await Grid.ClearSortingAsync(); + await grid.ClearSortingAsync(); } } } @@ -1219,17 +1230,13 @@ public class OrderData The Syncfusion® Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling. -1. [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting): Triggered before a column is sorted. +1. `Sorting`: Triggered before a column is sorted. -2. [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted): Triggered after a column has been sorted. +2. `Sorted`: Triggered after a column has been sorted. ### Sorting -The [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements. - -**Purpose** - -This event is useful for scenarios where sorting behavior needs to be controlled dynamically — such as preventing sorting on specific columns, validating conditions before sorting, or customizing the sort direction. +The `Sorting` event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements. **Event Arguments** @@ -1238,7 +1245,7 @@ The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Sync | Event Argument | Description | |---------------|-------------| | ColumnName | Represents the name of the column being sorted. | -| Direction | Indicates the sorting direction (Ascending or Descending). | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | | Cancel | Determines whether the sorting operation should be aborted. Setting this property to true prevents the sorting from being applied. | {% tabs %} @@ -1246,7 +1253,7 @@ The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Sync @using Syncfusion.Blazor.Grids - + @@ -1256,14 +1263,14 @@ The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Sync @code { - private List GridData { get; set; } = new List(); + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private Task OnSorting(SortingEventArgs args) + private Task Sorting(SortingEventArgs args) { // Prevent sorting on OrderID column if (args.ColumnName == "OrderID") @@ -1326,11 +1333,7 @@ public class OrderData ### Sorted -The [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications. - -**Purpose** - -This event is useful for scenarios where post-sorting actions are required — such as displaying a message, refreshing related data, or tracking user interactions. +The `Sorted` event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications. **Event Arguments** @@ -1339,22 +1342,22 @@ The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncf | Event Argument | Description | |---------------|-------------| | ColumnName | Represents the name of the column that was sorted. | -| Direction | Indicates the sorting direction (Ascending or Descending). | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@if (ShowNotification) +@if (showNotification) {
- Sorting completed for @LastSortedColumn column + Sorting completed for @lastSortedColumn column

} - - + + @@ -1364,19 +1367,19 @@ The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncf @code { - private List GridData { get; set; } = new List(); - private string LastSortedColumn { get; set; } = string.Empty; - private bool ShowNotification { get; set; } + private List gridData { get; set; } = new List(); + private string lastSortedColumn { get; set; } = string.Empty; + private bool showNotification { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); + gridData = OrderData.GetAllRecords(); } - private Task OnSorted(SortedEventArgs args) + private Task Sorted(SortedEventArgs args) { - LastSortedColumn = args.ColumnName; - ShowNotification = true; + lastSortedColumn = args.ColumnName; + showNotification = true; return Task.CompletedTask; } }