From 9e76fb46f2a02cba2a6cf57b9884a802e970e0fd Mon Sep 17 00:00:00 2001 From: Kalaivani-Muthu-kannan Date: Tue, 8 Sep 2026 10:41:45 +0530 Subject: [PATCH] 1052012: Revamp Sorting Blazor Data Grid. --- grid-sdk/blazor/data-grid/sorting.md | 417 +++++++++++++-------------- 1 file changed, 199 insertions(+), 218 deletions(-) diff --git a/grid-sdk/blazor/data-grid/sorting.md b/grid-sdk/blazor/data-grid/sorting.md index 9ffc1218b..c89157db7 100644 --- a/grid-sdk/blazor/data-grid/sorting.md +++ b/grid-sdk/blazor/data-grid/sorting.md @@ -1,40 +1,31 @@ --- layout: post -title: Sorting in Blazor DataGrid | Syncfusion® -description: Explore sorting in Blazor DataGrid including single/multi-column sort, initial sort, custom icons, foreign key sorting, and sorting events. -platform: grid-sdk +title: Blazor Grid Sorting | Syncfusion +description: Learn how to sort data in Blazor Data Grid using single and multi-column sorting, initial sorting, custom icons, and sorting events. +platform: Blazor control: DataGrid documentation: ug --- -# Sorting in Blazor DataGrid +# Sorting in Blazor Data Grid -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/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. +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) includes a built-in sorting feature that helps organize information within columns. Sorting makes data analysis and information discovery simpler and more intuitive. To enable 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. -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. +Sorting order follows a default sequence: ascending → descending → none. -{% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} +- **Ascending Order**: Arranges values from smallest to largest (A to Z or 1 to 100). An upward arrow (↑) appears next to the header. +- **Descending Order**: Arranges values from largest to smallest (Z to A or 100 to 1). A downward arrow (↓) appears next to the header. -## 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) | +**Manage unsorted-state behavior** +[AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) controls whether users can remove sorting and return the Data Grid to its original unsorted state. When set to false, the grid always maintains a sorted state, preventing accidental removal of sorting. This is useful in applications that require a consistent and predictable data order, such as records sorted by Order ID, Date, Priority, or Rank. {% tabs %} {% highlight razor tabtitle="Index.razor" %} - @using Syncfusion.Blazor.Grids + @@ -51,10 +42,8 @@ Interact with column headers to sort data directly. Clicking a column header tog GridData = OrderData.GetAllRecords(); } } - {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { private static readonly List Orders = new List(); @@ -90,22 +79,21 @@ public class OrderData public string ShipCity { get; set; } public string ShipName { get; set; } } - {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVRNGZdrBvRzXMc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} - +## Sort via User Interface -## Initial sorting +Column headers support direct interaction to sort data. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click applies ascending sort order. -By default, the 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). +|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) | -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" %} @@ -113,12 +101,6 @@ In this configuration, initial sorting is applied to the **OrderID** and **ShipC @using Syncfusion.Blazor.Grids - - - - - - @@ -178,26 +160,26 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBHZwDRBVGfdVWH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Multi-column sorting - -The 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**. +## Initial sorting -**How Multi-Column Sorting Works** +By default, the 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) inside the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html) block by defining one or more `GridSortColumn` entries. -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. +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 - + + + + + + + @@ -217,6 +199,7 @@ When multi-sorting is enabled: {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} + public class OrderData { private static readonly List Orders = new List(); @@ -243,6 +226,7 @@ public class OrderData Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } + return Orders; } @@ -255,24 +239,29 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBdtmjnrLwcZoyG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Disabling sorting for specific column +> Initial sorting defined in the `GridSortSettings` block is applied on first render and overrides any sorting applied through interaction. -The 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. +## Multi-column sorting -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**. +The 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**. -In this configuration, sorting is disabled for the **CustomerID** column. +**How multi-column sorting works** + +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. +- Hold Shift and click a column header to remove it from the multi-column sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -286,9 +275,9 @@ In this configuration, sorting is disabled for the **CustomerID** column. GridData = OrderData.GetAllRecords(); } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { private static readonly List Orders = new List(); @@ -315,7 +304,6 @@ public class OrderData Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - return Orders; } @@ -324,25 +312,28 @@ public class OrderData public string ShipCity { get; set; } public string ShipName { get; set; } } + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhnNGNxrhFDJcOT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Disabling sorting for a specific column + +The 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. -## Controlling Unsort behavior in Blazor DataGrid +To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. -The 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. +In this configuration, sorting is disabled for the **CustomerID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + - + @@ -358,6 +349,7 @@ When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} + public class OrderData { private static readonly List Orders = new List(); @@ -396,13 +388,13 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVnjwXHLhvqqSie?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Custom sorting -The 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 <object> implementation, which can be created by defining a comparer class that implements the .NET [IComparer<T>](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. +The Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property of a column. This property accepts an IComparer <object> implementation, which can be created by defining a comparer class that implements the .NET [IComparer<T>](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. -In this configuration, a custom comparer is assigned to the **CustomerID** column: +In this configuration, a custom comparer is assigned to the **CustomerID** column to sort by **OrderID** values: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -479,29 +471,18 @@ public class OrderData {% 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/BtrnZQtdhBlYAzFX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> * 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** receives two complete row objects for the column's `Field` property. The comparer must extract and compare the relevant field values from each row object. +> * The Compare method must return: + - **-1** if the first parameter should appear before the second parameter + - **0** if both parameters are equal + - **1** if the first parameter should appear after the second parameter > * 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. +> * The custom comparer receives the data model objects (e.g., OrderData) and should compare the specific field that matches the column's Field property. -## Touch interaction - -The 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.webp) appears to enable multi-column sorting. -To sort multiple columns, tap the popup -![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.webp), and then tap the desired column headers. - -> 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. - -This screenshot illustrates touch-based sorting in the Grid: - -![Sorting in Blazor DataGrid](./images/blazor-datagrid-touch-sorting.webp) - -## Sort foreign key column +## Foreign key sorting The 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: @@ -510,8 +491,8 @@ The Blazor DataGrid supports sorting foreign key columns based on display text. - [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` property (**display text**). -* **For remote data** → Sorting is performed based on the `ForeignKeyField` 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: @@ -610,102 +591,9 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## How to customize sort icon - -The 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 { - content: '\e87a'; -} - -.e-grid .e-icon-descending::before { - content: '\e70d'; -} -``` - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - - - - - -@code { - 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 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/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhdXmtdVBuAvlqc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Sort via programmatically +## Programmatic sorting The 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. @@ -713,13 +601,13 @@ The Blazor DataGrid supports sorting operations through built-in methods. These 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. -**Sorting a Single Column** +**Sort a single column** -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. +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 the column name and sort direction. When **AllowMultiSorting** is enabled, calling this method adds a new sort condition to existing sorts. When **AllowMultiSorting** is disabled, calling this method replaces any existing sort. | Parameter | Type | Description | |----------------|-------------------|-----------------------------------------------------------------------------| -| 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. | +| fieldName | string | Specifies the column name to be sorted. If the column name is invalid or misspelled, the sort will fail silently without throwing an 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. | @@ -827,10 +715,9 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrHDmDnLqDMewoe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} - -**Sort Multiple Columns** +**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](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. @@ -845,7 +732,7 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G Add Sort Column - + @@ -857,7 +744,6 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G @code { public List GridData { get; set; } = new List(); private SfGrid? grid { get; set; } - private List sortColumns { get; set; } = new List(); protected override void OnInitialized() { @@ -866,8 +752,11 @@ The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G private async Task ApplyMultiColumnSort() { - sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }); - sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending }); + var sortColumns = new List + { + new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }, + new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending } + }; await grid!.SortColumnsAsync(sortColumns); } } @@ -913,11 +802,11 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHDmjnrqZeMlWQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> 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. +> When sorting is applied again using `SortColumnsAsync`, the new sort settings are added to the existing ones unless `clearPreviousSort` is set to `true`. This means previously sorted columns remain sorted unless they are explicitly removed or overridden. -**Sort Multiple Columns and Clear Previous Sort** +### Sort multiple columns and clear previous sort 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. @@ -936,7 +825,7 @@ In this example, the grid is initially configured to sort the **OrderID** column Apply New Sort - + @@ -953,7 +842,6 @@ In this example, the grid is initially configured to sort the **OrderID** 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() { @@ -962,8 +850,11 @@ In this example, the grid is initially configured to sort the **OrderID** column 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 }); + var sortColumns = new List + { + new() { Field = nameof(OrderData.ShipCity), Direction = Syncfusion.Blazor.Grids.SortDirection.Descending }, + new() { Field = nameof(OrderData.ShipName), Direction = Syncfusion.Blazor.Grids.SortDirection.Ascending } + }; await Grid!.SortColumnsAsync(sortColumns, true); } } @@ -1009,18 +900,19 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBHDmXdrUNYMMwx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### 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. -**Clear sorting for specific Column** +The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for a specific column or for all columns at once, depending on the requirement. + +**Clear sorting for a 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 | A list of column field names whose sorting should be removed. | +| 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. @@ -1061,7 +953,7 @@ In the following example, the grid is initially sorted by **CustomerID** and **S @code { private List GridData { get; set; } = new(); private SfGrid? grid { get; set; } - private string dropDownValue { get; set; } = "OrderID"; + private string dropDownValue { get; set; } = "CustomerID"; private List columns { get; set; } = new() { @@ -1133,7 +1025,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrntvCpJYBBxlIM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Clear sorting for all columns** @@ -1224,21 +1116,17 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLHtQDdBqVimWoB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Sorting events The 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`: Triggered before a column is sorted. - -2. `Sorted`: Triggered after a column has been sorted. - ### Sorting 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** +**Event arguments** The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortingEventArgs.html) class, which includes the following properties: @@ -1329,13 +1217,13 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhxNwDdBqVIJSKU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Sorted -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. +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. Use this event to refresh a status message or update external UI state after the active sort order changes. -**Event Arguments** +**Event arguments** The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties: @@ -1425,6 +1313,99 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSsiZewifHMFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLnDmZnhUhlYcsj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Customizing the sort icon + +The 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 { + content: '\e87a'; +} + +.e-grid .e-icon-descending::before { + content: '\e70d'; +} +``` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + + +@code { + 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 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/VZVdtcXxrBOwkjlk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -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 +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=fluent2) to understand data presentation and manipulation. \ No newline at end of file