diff --git a/blazor/datagrid/events.md b/blazor/datagrid/events.md index 700e0f87ef..57e064935d 100644 --- a/blazor/datagrid/events.md +++ b/blazor/datagrid/events.md @@ -2786,7 +2786,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G ```cshtml @using Syncfusion.Blazor.Grids - diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 4cf08b61cb..3287c9b5c7 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -9,244 +9,454 @@ documentation: ug # Sorting in Blazor DataGrid Component -Sorting enables you to sort data in the **Ascending** or **Descending** order. To sort a column, click the column header. +The DataGrid component provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Datagrid, 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 enable sorting in the DataGrid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) to true. Sorting options can be configured through the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component. - -```csharp +To sort a particular column in the DataGrid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - - - - - - + + + + + + + -@code{ - public List Orders { get; set; } +@code { + public List GridData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); + + public OrderData() { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - public class Order { + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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 DateTime? OrderDate { get; set; } - public double? Freight { 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" %} -N> * DataGrid columns are sorted in the **Ascending** order. If you click the already sorted column, the sort direction toggles. -
* You can apply and clear sorting by invoking **SortColumn** and **ClearSorting** methods. -
* To disable sorting for a particular column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSorting) property of **GridColumn** to false. +> * DataGrid 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. -## Initial sort +## Initial sorting -To sort at initial rendering, set the **Field** and **Direction** in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of **GridSortSettings** component. +By default, the grid component 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) component. This feature is helpful when you want to display your data in a specific order when the grid is first loaded. -```csharp +The following example demonstrates how to set the **GridSortSettings** component of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + + - - + + - - - - - - + + + + + + -@code{ - public List Orders { get; set; } + +@code { + public List GridData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + + public class OrderData + { + public static List Orders = new List(); + + public OrderData() { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - public class Order { + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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 DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } } -} -``` +{% endhighlight %} +{% endtabs %} -## Multi-column sorting -You can sort more than one column in a DataGrid. To sort multiple columns, press and hold the **CTRL** key and click the column header. The sorting order will be displayed in the header while performing multi-column sorting. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -To clear sorting for a particular column, press the "Shift + mouse left click". +> The initial sorting defined in the `GridSortSettings` component of the `Columns` will override any sorting applied through user interaction. -N> The [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) must be **true** while enabling multi-column sort. -
Set [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property as **false** to disable multi-column sorting. +## Multi-column sorting + +The DataGrid component 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. -```csharp +To clear multi-column sorting for a particular column, press the "Shift + mouse left click". +> * The `AllowSorting` must be **true** while enabling multi-column sort. +> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - - - - - - + + + + + + + -@code{ - public List Orders { get; set; } +@code { + public List GridData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + + public class OrderData + { + public static List Orders = new List(); + + public OrderData() { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - public class Order { + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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 DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } } -} -``` - -## Sort order +{% endhighlight %} +{% endtabs %} -By default, the sorting order will be as **Ascending -> Descending -> None**. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -When first click a column header it sorts the column in ascending. Again click the same column header, it will sort the column in descending. A repetitive third click on the same column header will clear the sorting. +## Prevent sorting for particular column -## Sorting events +The DataGrid component 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. -During the sort action, the datagrid component triggers two events. The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event triggers before the sort action starts, and the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event triggers after the sort action is completed. Using these events you can perform the needed actions. +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**. -```csharp +The following example demonstrates, how to disable sorting for **CustomerID** column. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + - - - - + + + + -@code{ - public List Orders { get; set; } +@code { + public List GridData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + + public class OrderData + { + public static List Orders = new List(); + + public OrderData() { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - public class Order { + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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 DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } } +{% endhighlight %} +{% endtabs %} - public void SortEvent(ActionEventArgs args) { - if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Sorting)){ - // You can get action information from the argument. - } - } -} -``` - -## Custom sort comparer +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can customize the default sort action for a specific Grid column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn Directive. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://docs.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-5). +## Customizing Sorting Functionality with the AllowUnsort Property -In the following code example, custom SortComparer class was defined in the CustomerID Column. - -```csharp +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) component, 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. +In the following example, this is demonstrated by preventing the grid from entering an unsorted state by setting `AllowUnsort` to false in **GridSortSettings** component. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + + - - - - - + + + + -@code{ - public List Orders { get; set; } +@code { + public List GridData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 10).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - ShipCountry = (new string[] {"USA","UK","INDIA","CHINA","ENGLAND"})[new Random().Next(5)], - }).ToList(); + GridData = OrderData.GetAllRecords(); } - public class Order +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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 DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - public string ShipCountry { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Sort order + +By default, the sorting order will be as **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. + +## Custom sorting + +The DataGrid component 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 Directive.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 following example demonstrates how to define custom sort comparer function for the **CustomerID** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + public List GridData { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); } public class CustomComparer : IComparer { public int Compare(object XRowDataToCompare, object YRowDataToCompare) { - Order XRowData = XRowDataToCompare as Order; - Order YRowData = YRowDataToCompare as Order; + OrderData XRowData = XRowDataToCompare as OrderData; + OrderData YRowData = YRowDataToCompare as OrderData; int XRowDataOrderID = (int)XRowData.OrderID; int YRowDataOrderID = (int)YRowData.OrderID; if (XRowDataOrderID < YRowDataOrderID) @@ -264,23 +474,772 @@ In the following code example, custom SortComparer class was defined in the Cust } } } -``` +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + 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; + } -The following GIF represents custom SortComparer for CustomerID column. When the user clicks the CustomerID column's header, the custom SortComparer will sort the data according to the OrderID field value. So that custom SortComparer class sort the column data by using another column's value. + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + } +{% endhighlight %} +{% endtabs %} -![Custom sort comparer in Blazor DataGrid](./images/blazor-datagrid-custom-sort-comparer.gif) -N> 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. +{% 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. ## Touch interaction When you tap the datagrid header on touchscreen devices, the selected column header is sorted. A popup ![sorting](./images/sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![msorting](./images/msorting.jpg), and then tap the desired datagrid headers. -N> 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. +> 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. -The following screenshot shows datagrid touch sorting. +The following screenshot represents a grid touch sorting in the device. ![Sorting in Blazor DataGrid using Touch Interaction](./images/blazor-datagrid-touch-sorting.jpg) -N> 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=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file +## 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. + +**Sort foreign key column based on text for local data** + +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. + +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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + public List GridData { get; set; } + public List customerData { get; set; } + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + customerData = EmployeeData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class EmployeeData + { + public static List customerData = new List(); + public EmployeeData() + { + + } + public EmployeeData(int? customerID, string contactName) + { + CustomerID = customerID; + ContactName = contactName; + } + public static List GetAllRecords() + { + 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; + } + public int? CustomerID { get; set; } + public string ContactName { get; set; } + } + 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 static List GetAllRecords() + { + 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; + } + + 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" %} + +## How to customize sort icon + +To customize the sort icon in the 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 + +```css +.e-grid .e-icon-ascending::before { + content: '\e87a'; +} + +.e-grid .e-icon-descending::before { + content: '\e70d'; +} +``` + +In the below sample, DataGrid is rendered with a customized sort icon. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + 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 OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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; } + } + {% endhighlight %} +{% endtabs %} + + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhKCWZqBWwrwhml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Sort columns externally + +The DataGrid component in Syncfusion's Blazor suite 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. + +### 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 DataGrid component. This method allows you to programmatically sort a specific column based on your requirements. + +The following example demonstrates how to add sort columns to a grid. It utilizes the **DropDownList** component 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.DropDowns + +
+ + + + +
+
+ +
+ + + +
+
+
+ ADD SORT COLUMN +
+ + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + 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 + { + new Columns() { ID= "OrderID", Value= "OrderID" }, + new Columns() { ID= "CustomerID", Value= "CustomerID" }, + new Columns() { ID= "Freight", Value= "Freight" }, + }; + + List LocalData1 = new List + { + new Direction() { ID= "Ascending", Value= "Ascending" }, + new Direction() { ID= "Descending", Value= "Descending" }, + + }; + + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + + public class Direction + { + public string ID { get; set; } + public string Value { get; set; } + } + + public async Task AddsortColumn() + { + await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + 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; + } + + 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" %} + +### 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 component. This method allows you to remove the sorting applied to a specific column. + +The following example demonstrates how to remove sort columns. It utilizes the **DropDownList** component to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.DropDowns + +
+ + + + +
+
+ +
+ REMOVE SORT COLUMN +
+ + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + public SfGrid? Grid { get; set; } + + public string DropDownValue { get; set; } = "OrderID"; + + + 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 string ID { get; set; } + public string Value { get; set; } + } + + public class Direction + { + public string ID { get; set; } + public string Value { get; set; } + } + 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 OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJXWtlsYHkfUrY?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 DataGrid component. This method clears the sorting applied to all columns in the grid. + +The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ Clear Sorting +
+ + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + public SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private async Task onExternalSort() + { + await Grid.ClearSortingAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUWWjKiFKHdJVl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Sorting events + +The DataGrid component 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. + +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. + +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. + +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 + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + +@if (show == true) +{ +
+ Sort action completed for @columnName column +
+
+} + + + + + + + + + + + +@code { + public List GridData { get; set; } + + public string columnName { get; set; } + public bool show { get; set; } = false; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + public async Task SortingHandler(SortingEventArgs args) + { + if (args.ColumnName == "OrderID") + { + args.Cancel = true; + } + } + + public async Task SortedHandler(SortedEventArgs args) + { + columnName = args.ColumnName; + show = true; + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + 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; } + } +{% endhighlight %} +{% endtabs %} + + +{% 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=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file