diff --git a/blazor/Release-Notes/31.2.9.md b/blazor/Release-Notes/31.2.9.md
new file mode 100644
index 0000000000..dd89f63f11
--- /dev/null
+++ b/blazor/Release-Notes/31.2.9.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 3 SP2 Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v31.2.9 Release Notes
+
+{% include release-info.html date="November 12, 2025" version="v31.2.9" %}
+
+{% directory path: _includes/release-notes/v31.2.9 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/blazor/common/deployment/deployment-linux-nginx.md b/blazor/common/deployment/deployment-linux-nginx.md
new file mode 100644
index 0000000000..f17bdf89e3
--- /dev/null
+++ b/blazor/common/deployment/deployment-linux-nginx.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Deploy a Blazor Web App to Linux with NGINX | Syncfusion
+description: Learn here all about deploying the Blazor Web App with Syncfusion Blazor Components to Linux server using NGINX.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Deploy Blazor Web App to Linux with NGINX
+
+This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Linux server using NGINX as a reverse proxy.
+
+Refer to [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0&tabs=linux-ubuntu) topic for more information.
+
+## Prerequisites
+
+* Linux Server – Ubuntu 20.04, Red Hat Enterprise (RHEL) 8.0 and SUSE Linux Enterprise Server 12.
+* [.NET runtime](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) installed on the server.
+* An existing Blazor Web App with Syncfusion components or create a new one.
+
+## Install and Start NGINX
+
+Install NGINX on your Linux system and enable it to start automatically:
+
+```bash
+sudo dnf install nginx
+sudo systemctl start nginx
+sudo systemctl enable nginx
+sudo systemctl status nginx
+```
+
+**Verification**: Open `http://your-server-ip` in a browser — you should see the NGINX welcome page.
+
+## Create and publish Your Blazor Web App with Syncfusion Components
+
+* You can create a Blazor Web App using the .NET CLI commands with Syncfusion components by referring [here](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli).
+
+* Publish your Blazor Web application in Release configuration using the following command and run it:
+
+```bash
+dotnet publish -c Release -o publish
+cd publish
+dotnet SfBlazorApp.dll --urls "http://0.0.0.0:5000"
+```
+
+
+
+## Configure NGINX to Proxy Requests
+
+Create a new NGINX configuration file for your Blazor application:
+
+```bash
+sudo nano /etc/nginx/conf.d/blazorapp.conf
+```
+
+Add the following configuration to enable NGINX to act as a reverse proxy:
+
+```nginx
+server {
+ listen 80;
+ server_name _;
+ location / {
+ proxy_pass http://localhost:5000;
+ proxy_http_version 1.1;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "upgrade";
+ }
+}
+```
+
+Save and exit the file (Ctrl+O, Enter, then Ctrl+X).
+
+## Validate and Restart NGINX
+
+Test the NGINX configuration and restart the service:
+
+```bash
+sudo nginx -t
+sudo systemctl restart nginx
+```
+
+## Configure SELinux (For Red Hat-based Systems)
+
+On Red Hat-based systems, SELinux may block NGINX from accessing your Blazor app. Allow NGINX to connect to network services:
+
+```bash
+sudo setsebool -P httpd_can_network_connect 1
+```
+
+## Access the Application
+
+From your Windows machine or any other device, open a browser and navigate to:
+
+```
+http:///
+```
+
+You should now see your Blazor Web app running successfully with Syncfusion components!
+
+
+
+## See also
+
+* [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0)
+* [Configure NGINX for ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0#configure-nginx)
diff --git a/blazor/common/images/output-linux.png b/blazor/common/images/output-linux.png
new file mode 100644
index 0000000000..4064e734d1
Binary files /dev/null and b/blazor/common/images/output-linux.png differ
diff --git a/blazor/common/images/publish-blazor-app.jpg b/blazor/common/images/publish-blazor-app.jpg
new file mode 100644
index 0000000000..9c3ee9997a
Binary files /dev/null and b/blazor/common/images/publish-blazor-app.jpg differ
diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md
index 0691049aa7..0cadf2f9d6 100644
--- a/blazor/datagrid/clipboard.md
+++ b/blazor/datagrid/clipboard.md
@@ -1,31 +1,30 @@
---
layout: post
title: Clipboard in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Clipboard in the Syncfusion Blazor DataGrid component and much more.
+description: Learn how to copy, paste, and autofill data in the Syncfusion Blazor DataGrid using keyboard shortcuts, buttons, and batch editing.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Clipboard in Blazor DataGrid
+# Clipboard in Syncfusion Blazor DataGrid
-The clipboard feature in the Syncfusion® Blazor DataGrid provides an easy way to copy selected rows or cells data into the clipboard. You can use keyboard shortcuts to perform the copy operation. The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into clipboard.
+The **clipboard** feature in the Syncfusion® Blazor DataGrid allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors.
+To use keyboard shortcuts, selection must be enabled and the grid must be focused.
-Interaction keys |Description
------|-----
-Ctrl + C |Copy selected rows or cells data into clipboard.
-Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard.
+| Windows | Mac | Actions |
+|---------|-----|---------|
+| Ctrl + C | Command + C | Copy selected rows or cells to the clipboard |
+| Ctrl + Shift + H | Command + Shift + H | Copy selected rows or cells with headers to the clipboard |
-By using these keyboard shortcuts, you can quickly copy data from the Grid to the clipboard, making it easy to paste the data into other applications or documents.
-
-To enable the clipboard feature, you can use the Grid with your data source and selection property.
+To enable clipboard functionality, configure the DataGrid with the required [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html). If the selection mode is **Row**, entire rows are copied. If it is **Cell**, only the highlighted cells are copied.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -36,7 +35,7 @@ To enable the clipboard feature, you can use the Grid with your data source and
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -48,40 +47,40 @@ To enable the clipboard feature, you can use the Grid with your data source and
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ internal OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -93,14 +92,16 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNVlTrSTfkKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLosNWcpKkBYKnF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## Copy to clipboard using external buttons
-## Copy to clipboard by external buttons
+Clipboard actions can be triggered using external buttons when using UI controls is preferred over shortcut keys.
-Copying data to the clipboard by using external buttons in the Syncfusion® Blazor DataGrid allows you to programmatically trigger the copy operation, making it more friendly, especially for those who may not be familiar with keyboard shortcuts or manual copying.
+The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method programmatically copies selected rows or cells:
-To copy selected rows or cells data into the clipboard with the help of external buttons, you can utilize the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method available in the Grid. This is demonstrated in the following example,
+- Pass **true** to include column headers in the copied content.
+- Pass **false** or omit the parameter to copy without headers.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -123,19 +124,19 @@ To copy selected rows or cells data into the clipboard with the help of external
@code {
private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public async Task Copy()
+ private async Task Copy()
{
await Grid.CopyAsync();
}
- public async Task CopyHeader()
+ private async Task CopyHeader()
{
await Grid.CopyAsync(true);
}
@@ -145,40 +146,40 @@ To copy selected rows or cells data into the clipboard with the help of external
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ internal OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -190,32 +191,27 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSDfMKeTVVoBtf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSsjCcfTtZWPnL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## AutoFill
-The AutoFill feature in the Syncfusion® Blazor DataGrid allows you to copy the data of selected cells and paste it into other cells by simply dragging the autofill icon of the selected cells to the desired cells. This feature provides a convenient way to quickly populate data in a grid.
-
-**how to use the autofill feature**
+The AutoFill feature in the Syncfusion® Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle.
-1. Select the cells from which you want to copy data.
+**Steps to use AutoFill feature**
-2. Hover over the bottom-right corner of the selection to reveal the autofill icon.
+1. Select the desired cells to copy.
+2. Hover over the bottom-right corner of the selection to display the autofill handle.
+3. Drag the handle to the target cells.
+4. Release the mouse to populate the target cells with the copied data.
-3. Click and hold the autofill icon, then drag it to the target cells where you want to paste the copied data.
-
-4. Release the mouse to complete the autofill action, and the data from the source cells will be copied and pasted into the target cells.
-
-This feature is enabled by defining [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as **true**.
-
-The following example demonstrates how to enable the autofill feature in the Grid.
+To enable AutoFill, set the [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property to **true** and use [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) to allow copying values across multiple cells.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -227,7 +223,7 @@ The following example demonstrates how to enable the autofill feature in the Gri
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -239,40 +235,40 @@ The following example demonstrates how to enable the autofill feature in the Gri
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -284,46 +280,39 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLojTCUezbECphd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-> * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, then the autofill icon will be displayed on cell selection to copy cells.
-> * It requires the selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to be **Box** and also [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) to be **Batch**.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsNicJTjOUEma?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+> * When [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, the autofill handle appears on cell selection.
+> * AutoFill requires selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) set to **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) set to **Box**, and [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) set to `Batch`.
### Limitations
-* AutoFill does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using autofill to avoid unexpected results.
-
-* The AutoFill feature does not support generating non-linear series or sequential data automatically. Cannot create complex series or patterns by simply dragging cells with non-sequential data. The autofill feature is designed for copying and pasting data from a selected range of cells.
-
-* The AutoFill feature does not support virtual scrolling or column virtualization in the Grid.
-
-* The Auto Fill feature can only be applied to the viewport cell when enabling the features of infinite scrolling in the Grid.
+- **Data Type Conversion**: AutoFill does not convert string values to numeric or date types. Copying strings into numeric cells results in **NaN**, and copying strings into date cells results in an **empty cell**.
+- **Value Copying**: AutoFill copies values directly from the source range without generating non-linear or sequential series.
+- **Virtualization**: AutoFill is not supported with virtual scrolling or column virtualization.
+- **Infinite Scrolling**: With infinite scrolling, AutoFill applies only to cells within the current viewport.
## Paste
-The Syncfusion® Blazor DataGrid provides a paste feature that allows you to copy the content of a cell or a group of cells and paste it into another set of cells. This feature allows you to quickly copy and paste content within the grid, making it convenient for data entry and manipulation.
-
-Follow the steps below to use the Paste feature in the grid:
+The Paste feature in the Syncfusion® Blazor DataGrid allows copying content from selected cells and pasting it into another range using Ctrl + C and Ctrl + V.
-1. Select the cells from which you want to copy the content.
+**To paste data within the grid:**
-2. Press the Ctrl + C shortcut key to copy the selected cells' content to the clipboard.
-
-3. Select the target cells where you want to paste the copied content.
-
-4. Press the Ctrl + V shortcut key to paste the copied content into the target cells.
+1. Select the cells to copy.
+2. Press Ctrl + C to copy the content.
+3. Select the target cells.
+4. Press Ctrl + V to paste the copied content.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
@@ -331,7 +320,7 @@ Follow the steps below to use the Paste feature in the grid:
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -343,40 +332,40 @@ Follow the steps below to use the Paste feature in the grid:
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -388,11 +377,10 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyNzsUeyrJRGbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBoWNsGJziFNQMu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> To perform paste functionality, it requires the selection **mode** to be **Cell**, **cellSelectionMode** to be **Box** and also Batch Editing should be enabled.
+> To paste content, set selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to **Cell**, set [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to **Box**, and enable [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing).
### Limitations
-* The Paste feature does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using AutoFill to avoid unexpected results.
\ No newline at end of file
+- **Data Type Conversion**: Pasting does not convert string values to numeric or date types. Pasting strings into numeric cells results in **NaN**, and pasting strings into date cells results in an **empty cell**. Ensure that the pasted values are compatible with the target column's data type.
\ No newline at end of file
diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md
index 3f5adcc36a..7ff8c0d564 100644
--- a/blazor/datagrid/context-menu.md
+++ b/blazor/datagrid/context-menu.md
@@ -7,18 +7,20 @@ control: DataGrid
documentation: ug
---
-# Context menu in Syncfusion® Blazor DataGrid
+# Context menu in Syncfusion Blazor DataGrid
-The Syncfusion® Blazor DataGrid comes equipped with a context menu feature, which is triggered when a user right-clicks anywhere within the Grid. This feature serves to enrich the user experience by offering immediate access to a variety of supplementary actions and operations that can be executed on the data displayed in the Grid.
+The Syncfusion® Blazor DataGrid supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability.
-To activate the context menu within the Grid, you have an option to configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. You can set this property to either include the default context menu items or define your own custom context menu items, tailoring the menu options to suit your specific needs. This customization allows you to enhance the Grid's functionality by providing context-sensitive actions for interacting with your data.
-
-The context menu is triggered when you right-click on different areas of the Grid, including:
- * Header: When you right-click on the Grid's header section.
- * Content: When you right-click on the Grid's main content area.
- * Pager: When you right-click on the pager section.
+To enable the context menu, configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. Use default items for built-in menu options or add custom items for tailored functionality. This feature improves interactivity by offering context-sensitive actions.
-The default context menu items in the header area of the Grid are as follows:
+The context menu appears when right-clicking in these Grid areas:
+* **Header:** Displays column-specific actions.
+* **Content:** Shows row-related options.
+* **Pager:** Offers navigation controls.
+
+The default context menu items include:
+
+**Header**
| Items | Description |
| ---------------- | ------------------------------------------------------------ |
@@ -29,7 +31,7 @@ The default context menu items in the header area of the Grid are as follows:
| `SortAscending` | Sort the current column in ascending order. |
| `SortDescending` | Sort the current column in descending order. |
-The default context menu items in the content area of the Grid are as follows:
+**Content**
| Items | Description |
| ------------- | ------------------------------------------------------------------- |
@@ -42,7 +44,7 @@ The default context menu items in the content area of the Grid are as follows:
| `ExcelExport` | Export the Grid data as an Excel document. |
| `CsvExport` | Export the Grid data as a CSV document. |
-The default context menu items in the pager area of the Grid are as follows:
+**Pager**
| Items | Description |
| ----------- | ------------------------------------------ |
@@ -51,7 +53,6 @@ The default context menu items in the pager area of the Grid are as follows:
| `LastPage` | Navigate to the last page of the Grid. |
| `NextPage` | Navigate to the next page of the Grid. |
-The following example demonstrates how to enable context menu feature in the Grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -69,36 +70,19 @@ The following example demonstrates how to enable context menu feature in the Gri
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
- public List
@code {
- private SfGrid Grid;
- public List Employees { get; set; }
+ private SfGrid? Grid;
+ private List? Employees { get; set; }
protected override void OnInitialized()
{
Employees = EmployeeData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await this.Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
-
}
{% endhighlight %}
@@ -203,15 +187,14 @@ The following example demonstrates how to add custom context menu items in the G
public class EmployeeData
{
-
- public static List Employees = new List();
+ private static readonly List Employees = new();
public EmployeeData(int employeeID, string firstName, string lastName, string city)
{
- this.EmployeeID = employeeID;
- this.FirstName = firstName;
- this.LastName = lastName;
- this.City = city;
+ EmployeeID = employeeID;
+ FirstName = firstName;
+ LastName = lastName;
+ City = city;
}
public static List GetAllRecords()
@@ -247,46 +230,50 @@ public class EmployeeData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyDfNYsPWaHXLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoMjLaVOKOJFCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Built-in and Custom context menu items
-The Syncfusion® Blazor DataGrid provides the flexibility to use both built-in and custom context menu items simultaneously. This is useful when you want to extend the default functionalities (like copy, delete, or edit) with your own custom actions, such as Copy with headers, Export row, or other application-specific commands.
+The Syncfusion® Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**.
+
+To configure **built-in** and **custom** context menu items:
-You can achieve this by defining a list containing both built-in menu item strings and custom context menu items using the [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property of the Grid. The actions for custom context menu items can be handled using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
+1. Define both built-in item strings and custom [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property.
+2. For custom items, specify properties such as **Text**, **Target**, and **Id**.
+3. Handle custom actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
-The following example demonstrates how to define both built-in and custom context menu items, and how to handle the custom item action in the `ContextMenuItemClicked` event. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers.
+The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method copies selected rows or cells, including headers, to the clipboard.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -297,14 +284,14 @@ The following example demonstrates how to define both built-in and custom contex
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -340,29 +327,26 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBSNftEhBsXumEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSiXBaVEwxOsiX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Sub context menu items in DataGrid
-The Syncfusion® Blazor DataGrid supports hierarchical context menu structures, allowing you to define sub-context menu items that appear as child options under a parent item in the context menu. This feature is useful when organizing multiple related actions under a single top-level context menu item.
-
-To define sub-context menu items in the Blazor Grid, do follow the steps given below:
-
-1. Use the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property to define a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects.
-
-2. The sub context menu items can be added by defining the collection of `MenuItems` for `Items` Property in `ContextMenuItemModel`.
+The Syncfusion® Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability.
-3. Use the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event to handle actions for each menu item.
+To configure sub-context menu items:
+1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property with a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects.
+2. Add sub-items by specifying the collection for the Items property in `ContextMenuItemModel`.
+3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
-The following example demonstrates how to create a sub context menu titled **Clipboard**, with sub-items **Copy** and **Copy With Header**. The corresponding actions are triggered when the `ContextMenuItemClicked` event is fired and [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) action is carried out with and without headers.
+This example creates a sub-context menu titled **Clipboard**, which includes the sub-items **Copy** and **Copy With Header**. When the `ContextMenuItemClicked` event is triggered, the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method runs to copy data with or without headers.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -374,9 +358,9 @@ The following example demonstrates how to create a sub context menu titled **Cli
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
- public List ContextMenuItems = new()
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
+ private List ContextMenuItems = new()
{
new ContextMenuItemModel
{
@@ -396,15 +380,15 @@ The following example demonstrates how to create a sub context menu titled **Cli
Orders = OrderData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copy")
{
- await Grid.CopyAsync(false);
+ await Grid!.CopyAsync(false);
}
else if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -415,14 +399,14 @@ The following example demonstrates how to create a sub context menu titled **Cli
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -458,21 +442,23 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVyjfjkrhfaJLAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIiNhEqQfJGczz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Disable the context menu for specific columns in DataGrid
-In certain scenarios, you may want to restrict the context menu from appearing on specific columns within the Syncfusion® Blazor DataGrid. This can be helpful to prevent actions like copying or editing on columns that contain sensitive or read-only data.
+The Syncfusion® Blazor DataGrid allows restricting the context menu for individual columns, which is useful when dealing with **sensitive** or **read-only** data.
-You can achieve this by using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to cancel it conditionally.
+This behavior is controlled using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu appears and provides access to column details. By checking the column's **Field** property, the context menu can be conditionally disabled.
-To prevent the context menu from opening on a specific column:
+To disable the context menu for a specific column:
-1. Handle the `ContextMenuOpen` event of the Grid and use the `Column.Field` property within the event handler to identify the target column.
+1. Handle the [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ContextMenuOpen) event of the Grid.
+2. Use the **args.Column.Field** property to identify the target column.
+3. Set **args.Cancel = true** to prevent the context menu from opening for that column.
-2. Set `Args.Cancel` as **true** to prevent the menu from opening on that column.
-
-The following example demonstrates how to prevent the context menu from opening when right-clicking on the **Freight** column. The [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event is used to handle actions triggered by context menu item clicks. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method will be executed for all columns except **Freight** column, where the context menu is disabled.
+In this example:
+- The context menu is disabled for the **Freight** column.
+- The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method executes for all other columns when the **Copy with headers** option is selected.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -491,28 +477,27 @@ The following example demonstrates how to prevent the context menu from opening
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
+ public void OnContextMenuOpen(ContextMenuOpenEventArgs args)
{
- if (Args.Column.Field == "Freight")
+ if (args.Column.Field == "Freight")
{
- Args.Cancel = true; // To prevent the context menu from opening.
+ args.Cancel = true;
}
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -521,17 +506,16 @@ The following example demonstrates how to prevent the context menu from opening
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -567,28 +551,26 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeNTjaVhQWEiHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBSCNrOqOXtBomQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Enable or disable context menu items
-The Syncfusion® Blazor DataGrid allows you to dynamically enable or disable specific context menu items using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is particularly useful in scenarios where certain actions, such as **Edit** or **Delete**, should be restricted based on the column, the data in the row, or other custom logic.
+The Syncfusion® Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
-To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to enable or disable the desired menu items dynamically.
+To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows enabling or disabling menu items dynamically based on conditions.
-To enable or disable context menu items dynamically, follow the steps below:
+1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid.
+2. Use the **args.ContextMenu.Items** collection to access the menu items.
+3. Set the **Disabled** property of the required item(s) to **true** or **false** based on the defined logic.
-1. Handle the `ContextMenuOpen` event of the DataGrid and use the `Args.ContextMenuObj.Items` collection within the handler to access the context menu items.
-
-2. Set the `Disabled` property of the desired item(s) to `true` or `false` based on your logic.
-
-The following example demonstrates how to dynamically enable or disable **Copy** context menu items in the Grid using the `ContextMenuOpen` event. The **Copy** item is disabled for the **ShipCity** column and enabled for other columns.
+The **Copy** menu item is disabled for the **ShipCity** column and remains enabled for all other columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -601,42 +583,39 @@ The following example demonstrates how to dynamically enable or disable **Copy**
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
- {
- if (Args.Column.Field == "ShipCity") // You can check condition based on your requirement.
- {
- Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item.
- }
- else
+ private void OnContextMenuOpen(ContextMenuOpenEventArgs args)
+ {
+ foreach (var item in args.ContextMenu.Items)
{
- Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item.
+ if (item.Text == "Copy" && args.Column.Field == nameof(OrderData.ShipCity))
+ {
+ item.Disabled = true;
+ }
}
}
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -672,21 +651,21 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryDfXEqqyMSDPD?appbar=false&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrIiiZySUQfOieR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Show or hide context menu
-The Syncfusion® Blazor DataGrid provides the flexibility to show or hide both default and custom context menu items. This feature allows you to customize the context menu items based on various conditions or individuals interactions.
-
-This can be achieved using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened , allowing you to customize context menu items visibility dynamically.
+The Syncfusion® Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
-To control the visibility of context menu items, follow the steps below:
+To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows dynamic modification of menu item visibility based on defined conditions.
-1. Handle the `ContextMenuOpen` event of the Grid and access the `Args.ContextMenu.Items` collection within the event handler to modify the visibility of specific menu items.
+To control the visibility of context menu items:
-2. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of `MenuItems` to **true** or **false**, based on your conditions
+1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid.
+2. Use the **args.ContextMenu.Items** collection to access the menu items.
+3. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of the required item(s) to **true** or **false** based on the defined logic.
-The following example demonstrates how to dynamically show or hide **Edit** context menu items in the Grid using the `ContextMenuOpen` event. The **Edit** item is disabled for the **CustomerID** column and enabled for other columns.
+The **Edit** menu item is hidden for the **CustomerID** column and remains visible for all other columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -706,23 +685,21 @@ The following example demonstrates how to dynamically show or hide **Edit** cont
@code {
- public List Orders { get; set; }
-
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
+ private void OnContextMenuOpen(ContextMenuOpenEventArgs args)
{
- if (Args.Column.Field == "CustomerID")
- {
- Args.ContextMenu.Items[1].Hidden = true;
- }
- else
+ foreach (var item in args.ContextMenu.Items)
{
- Args.ContextMenu.Items[1].Hidden = false;
+ if (item.Text == "Edit Record" && args.Column.Field == nameof(OrderData.CustomerID))
+ {
+ item.Hidden = true;
+ }
}
}
}
@@ -731,17 +708,16 @@ The following example demonstrates how to dynamically show or hide **Edit** cont
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -777,38 +753,36 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBIMWXIIKutSiPz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
### Access specific row details on context menu click
-The Syncfusion® Blazor DataGrid allows you to interact with specific row data when a context menu item is clicked. This feature is useful when you want to perform actions like viewing, editing, or processing data from the selected row.
+The Syncfusion® Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data.
-You can achieve this by handling the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides access to the clicked menu item and the associated row data, enabling you to fetch and display specific details dynamically.
+To achieve this, handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. The event is triggered when a context menu item is clicked and provides access to the selected row details.
-Steps to access row data on context menu click:
+To access row data on context menu click:
1. Define a custom context menu item using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property.
-2. Handle the `ContextMenuItemClicked` event to capture the selected row's data.
-3. Use the `RowInfo.RowData` property from the event arguments to access the full row details.
-
-The following example demonstrates how to fetch specific row details when a context menu item is clicked in the Grid using the `ContextMenuItemClicked` event. The fetch data item retrieves the row information and displays it below the Grid:
+2. Handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event of the grid.
+3. Use the **args.RowInfo.RowData** property from the event arguments to access the full details of the selected row.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
-
+
@if (rowData != null)
{
@@ -821,24 +795,22 @@ The following example demonstrates how to fetch specific row details when a cont
}
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
- private OrderData rowData { get; set; }
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
+ private OrderData? rowData;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuClick(ContextMenuClickEventArgs args)
+ private void OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "fetch data")
{
rowData = args.RowInfo.RowData;
}
}
-
}
{% endhighlight %}
@@ -847,36 +819,40 @@ The following example demonstrates how to fetch specific row details when a cont
public class OrderData
{
- public static List order = new List();
- public OrderData(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ private static readonly List Orders = new();
+
+ public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
+
public static List GetAllRecords()
{
- if (order.Count == 0)
+ if (Orders.Count == 0)
{
- order.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- order.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- order.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- order.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- order.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- order.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- order.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora"));
- order.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
- order.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- order.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
- order.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
- order.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ 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", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora"));
+ Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return order;
+
+ return Orders;
}
+
public int OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
@@ -886,6 +862,6 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSMXVazHjnCzPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a detailed overview of available capabilities. 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
diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md
index ac90524b35..3cf87076cd 100644
--- a/blazor/datagrid/data-annotation.md
+++ b/blazor/datagrid/data-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data Annotation in Blazor DataGrid | Syncfusion
-description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component.
+description: Learn how to use Data Annotations for validation and column metadata in Syncfusion Blazor DataGrid, including enum display and CRUD form validation.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,35 +9,71 @@ documentation: ug
# Data Annotation in Blazor DataGrid
-Data Annotations are used to define validation rules for model classes or properties, ensuring that data entered into an application conforms to the expected format and meets specific criteria. They also enable the display of appropriate error messages to end users.
+Data annotations define validation and display rules for model classes or properties in the Syncfusion® Blazor DataGrid. These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations.
-In the Syncfusion® Blazor DataGrid, Data Annotations are leveraged to automatically map these validation rules to the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) properties. This integration provides seamless data validation during editing operations within the Grid.
+When the DataGrid is bound to a model, data annotations automatically map to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) settings. This enables built-in validation and metadata display during CRUD operations.
-To enable Data Annotations for validation in a Grid, you need to refer the **System.ComponentModel.DataAnnotations** namespace in your Blazor application. Once enabled, the Grid automatically uses the data annotations applied to your model class properties to perform data validation.
+To enable data annotation in the Blazor DataGrid:
-The following table lists the data annotation attributes supported in the Grid:
+1. Add the **System.ComponentModel.DataAnnotations** namespace in the Blazor application.
+2. Bind the DataGrid to a model using `TValue` and [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
+3. Apply annotation attributes to model properties to enforce validation and display rules during CRUD operations.
+
+### Supported Data Annotation Attributes
+
+The tables categorize supported attributes by display, formatting, metadata, and validation functionality.
+
+### Display Attributes
+
+Use **Display** attributes to control how column headers, ordering, and metadata appear in the grid interface.
+
+| Attribute Name | Properties | Functionality |
+|----------------|------------|---------------|
+| Display | Name | Sets the header text for the DataGrid column |
+| Display | ShortName | Sets a shorter version of the header text |
+| Display | AutoGenerateField | Prevents the column from being auto-generated |
+| Display | AutoGenerateFilter | Disables filtering for the column |
+| Display | Description | Sets tooltip text shown on column ellipsis hover |
+| Display | Order | Defines the display order of the column |
+
+### DisplayFormat Attributes
+
+Apply **DisplayFormat** attributes when column values require specific formatting or null-handling behavior.
| Attribute Name | Properties | Functionality |
-|---------------|------------|--------------|
-| Display | Name | Sets the header text for the Grid column |
-| Display | ShortName | Sets a shorter version of the header text for the Grid column |
-| Display | AutoGenerateField | Prevents the column from being auto-generated in the Grid |
-| Display | AutoGenerateFilter | Specifies whether filtering should be disabled for the column |
-| Display | Description | Sets the tooltip text displayed when hovering over the column ellipsis |
-| Display | Order | Defines the display order priority of the Grid column |
-| DisplayFormat | FormatString | Sets the format for displaying data in the column |
-| DisplayFormat | ApplyFormatInEditMode | Determines whether the format should be applied during edit mode |
-| DisplayFormat | NullDisplayText | Sets the text to be displayed when the value of the property is null |
-| DisplayFormat | ConvertEmptyStringToNull | Determines whether empty string values should be converted to null in the user interface |
-| DisplayFormat | NeedsHtmlEncode | Sets whether HTML encoding should be disabled for a particular column |
-| ScaffoldColumnAttribute | Scaffold | Sets whether the column is visible in the user interface |
-| EditableAttribute | ReadOnly | Sets whether the column allows editing |
-| Key | Key | Marks a column as the primary key in the Grid |
-| Validation Attributes:
1. RequiredAttribute 2. StringLengthAttribute 3. RangeAttribute 4. RegularExpressionAttribute 5. MinLengthAttribute 6. MaxLengthAttribute 7. EmailAddressAttribute 8. CompareAttribute | | These validation attributes are used as `validation rules` in Grid CRUD operations |
-
-> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the DisplayName attribute and `HeaderText` are assigned to a field in the Grid model class for a specific column, the `HeaderText` value will be prioritized and displayed in the Grid header.
-
-The following sample code demonstrates how to use data annotations in the Grid:
+|----------------|------------|---------------|
+| DisplayFormat | FormatString | Sets the display format for column data |
+| DisplayFormat | ApplyFormatInEditMode | Applies format during edit mode |
+| DisplayFormat | NullDisplayText | Displays custom text when the value is null |
+| DisplayFormat | ConvertEmptyStringToNull | Converts empty strings to null in the UI |
+| DisplayFormat | HtmlEncode | Enables or disables HTML encoding for display |
+
+### Other Metadata Attributes
+
+Use these attributes to manage column visibility, editing behavior, and key definitions.
+
+| Attribute Name | Properties | Functionality |
+|----------------|------------|---------------|
+| ScaffoldColumnAttribute | Scaffold | Controls column visibility in the UI |
+| ReadOnlyAttribute | IsReadOnly | Prevents editing of the column |
+| Key | Key | Marks the column as the primary key |
+
+### Validation Attributes
+
+Add validation attributes to enforce rules that display inline Blazor DataGrid validation messages during CRUD operations.
+
+- RequiredAttribute
+- StringLengthAttribute
+- RangeAttribute
+- RegularExpressionAttribute
+- MinLengthAttribute
+- MaxLengthAttribute
+- EmailAddressAttribute
+- CompareAttribute
+
+> When both the `Display` attribute’s `Name` and the column’s `HeaderText` property are defined, the `HeaderText` value takes precedence and is shown in the column header.
+
+The `Display` attribute can be used to show user-friendly labels for enum values. This improves readability by replacing raw enum values with descriptive names.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -45,12 +81,12 @@ The following sample code demonstrates how to use data annotations in the Grid:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using System.Reflection
-@using System.ComponentModel.DataAnnotations;
+@using System.ComponentModel.DataAnnotations
-
+
@@ -58,9 +94,8 @@ The following sample code demonstrates how to use data annotations in the Grid:
@{
- var Order = (context as Order);
-
-
+ var CurrentOrder = (context as Order);
+
}
@@ -70,56 +105,60 @@ The following sample code demonstrates how to use data annotations in the Grid:
@code {
- public List Orders { get; set; }
- public List DropDownData = new List();
+ private List Orders { get; set; }
+ private List DropDownData { get; } = new();
protected override void OnInitialized()
{
- Random rnd = new Random();
- var values = Enum.GetValues(typeof(Status));
- foreach (Status item in Enum.GetValues(typeof(Status)))
+ var Rnd = new Random();
+ var Values = Enum.GetValues(typeof(Status));
+
+ foreach (Status Item in Values)
{
- DropDownData.Add(new Data { Type = GetDisplayName(item), Value = item });
+ DropDownData.Add(new Data { Type = GetDisplayName(Item), Value = Item });
}
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+
+ Orders = Enumerable.Range(1, 75).Select(x => new Order
{
OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[new Random().Next(5)],
+ CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[Rnd.Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
- ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)],
- Verified = (Status)(values.GetValue(rnd.Next(values.Length))),
+ ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[Rnd.Next(5)],
+ Verified = (Status)Values.GetValue(Rnd.Next(Values.Length)),
}).ToList();
}
- public static string GetDisplayName(Enum enumValue)
+ private static string GetDisplayName(Enum EnumValue)
{
- string displayName;
- displayName = enumValue.GetType()
- .GetMember(enumValue.ToString())
+ var DisplayName = EnumValue.GetType()
+ .GetMember(EnumValue.ToString())
.FirstOrDefault()
.GetCustomAttribute()?
.GetName();
- if (String.IsNullOrEmpty(displayName))
+
+ if (string.IsNullOrEmpty(DisplayName))
{
- displayName = enumValue.ToString();
+ DisplayName = EnumValue.ToString();
}
- return displayName;
+ return DisplayName;
}
- public enum Status
+
+ internal enum Status
{
[Display(Name = "Yeah")]
Yes = 0,
[Display(Name = "Nope")]
No = 1
}
- public class Data
+
+ internal sealed class Data
{
public string Type { get; set; }
public Status Value { get; set; }
}
- public class Order
+ internal sealed class Order
{
// Sets column as primary key.
[Key]
@@ -128,21 +167,26 @@ The following sample code demonstrates how to use data annotations in the Grid:
// Sets header text to the column.
[Display(ShortName = "ID")]
public int OrderID { get; set; }
+
[Display(Name = "CustomerID", Description ="List of Customers")]
// Sets column as required and error message to be displayed when empty.
[Required(ErrorMessage = "Field should not be empty")]
[DisplayFormat(NullDisplayText = "Empty", ConvertEmptyStringToNull = true)]
- public string? CustomerID { get; set; }
+ public string CustomerID { get; set; }
+
// Sets data type of column as Date.
[DataType(DataType.Date)]
[Display(Name = "Order Date")]
// Sets column as read only.
[Editable(false)]
public DateTime? OrderDate { get; set; }
+
[Display(Name = "Freight", AutoGenerateFilter = false)]
public double? Freight { get; set; }
- [ScaffoldColumn(scaffold:false)]
+
+ [ScaffoldColumn(false)]
public string ShipCity { get; set; }
+
public Status Verified { get; set; }
}
}
@@ -150,12 +194,8 @@ The following sample code demonstrates how to use data annotations in the Grid:
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-The following image shows how Data Annotations are applied to Grid columns in a Blazor application:
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijigsHQsZoWd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The **Verified** column displays the `Enum` member using the `Display` attribute name, enhancing user experience by rendering a human-readable label instead of the raw enum value.
+
-> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its features. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+N> Refer to the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application.
\ No newline at end of file
diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md
index 1645ff1236..a76f127b80 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,107 @@ 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**.
+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.
-To know about how to **Sorting** in Grid, you can check 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" %}
-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**.
+## 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" %}
+
@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 OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public static List GetAllRecords()
+ 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)
{
- 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/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**.
+
## 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 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).
-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 +120,78 @@ 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.
+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**.
-To clear multi-column sorting for a particular column, press the "Shift + mouse left click".
+**How Multi-Column Sorting Works**
-> * The `AllowSorting` must be **true** while enabling multi-column sort.
-> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting.
+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" %}
@@ -195,158 +199,140 @@ 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 %}
{% 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 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 provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted.
-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 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 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 %}
{% 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
-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.
-
-In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**.
+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" %}
@@ -355,84 +341,68 @@ 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 %}
{% 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 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
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
@@ -717,64 +665,63 @@ 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
+## Sort via programmatically
-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 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
-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.
+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.
-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.
+**Sorting 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.
+
+| 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. |
+| 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" %}
@@ -783,31 +730,27 @@ The following example demonstrates how to add sort columns to a Grid. It utilize
@using Syncfusion.Blazor.DropDowns
-
-
+
+
-
-
+
+
+
- ADD SORT COLUMN
+ ADD SORT COLUMN
-
-
-
-
-
-
+
-
+
@@ -815,127 +758,292 @@ The following example demonstrates how to add sort columns to a Grid. It utilize
@code {
- public List GridData { get; set; }
+ 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();
+ }
+
+ private List ColumnList = new List
+ {
+ 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);
+ }
+
+ private class ColumnItem
+ {
+ 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();
+
+ public OrderData(int? orderID, string customerID, double? freight, string shipName)
+ {
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ 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"));
+ }
+ 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/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
- public SfGrid? Grid { get; set; }
+**Sort Multiple Columns**
- public string DropDownValue { get; set; } = "OrderID";
+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.
- public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection));
+| Parameter | Type | Description |
+|------------------|-------------------------|--------------------------------------------------------------|
+| 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" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+Add Sort Column
+
+
+
+
+
+
+
+
+
- public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending;
+@code {
+ public List GridData { get; set; } = new List();
+ private SfGrid? grid { get; set; }
+ private List sortColumns { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
- List LocalData = new List
+ private async Task ApplyMultiColumnSort()
{
- new Columns() { ID= "OrderID", Value= "OrderID" },
- new Columns() { ID= "CustomerID", Value= "CustomerID" },
- new Columns() { ID= "Freight", Value= "Freight" },
- };
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending });
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending });
+ await grid!.SortColumnsAsync(sortColumns);
+ }
+}
- List LocalData1 = new List
- {
- new Direction() { ID= "Ascending", Value= "Ascending" },
- new Direction() { ID= "Descending", Value= "Descending" },
+{% 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 class Columns
+ public static List GetAllRecords()
{
- public string ID { get; set; }
- public string Value { get; set; }
+ 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 class Direction
+ 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" %}
+
+> 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](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 | 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" %}
+
+@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()
{
- public string ID { get; set; }
- public string Value { get; set; }
+ GridData = OrderData.GetAllRecords();
}
- public async Task AddsortColumn()
+ private async Task ApplyNewSort()
{
- await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true);
+ 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
- {
- 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 class OrderData
+{
+ private static readonly List Orders = new List();
- 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 OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipName { get; set; }
- public double? Freight { get; set; }
+ 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/LtBgsWDKBXuYpcUi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% 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.
-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.
+**Clear sorting for specific Column**
-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.
+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. |
+
+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" %}
+
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
-
-
-
+
+
+
- REMOVE SORT COLUMN
+ Remove Sort Column
-
+
@@ -943,110 +1051,95 @@ The following example demonstrates how to remove sort columns. It utilizes the [
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public SfGrid? Grid { get; set; }
-
- public string DropDownValue { get; set; } = "OrderID";
+ 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" },
+ };
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
- List LocalData = new List
+ private async Task RemoveSortColumn()
{
- 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; }
+ if (grid != null)
+ {
+ var ColumnNames = new List { dropDownValue };
+ await grid.ClearSortingAsync(ColumnNames);
+ }
}
- public class Direction
+ private 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 OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public static List GetAllRecords()
+ 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)
{
- 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/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+**Clear sorting for all columns**
-### Clear sorting
+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.
-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 following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click.
+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" %}
@@ -1054,10 +1147,10 @@ The following example demonstrates how to clear the sorting using `ClearSortingA
@using Syncfusion.Blazor.Buttons
- Clear Sorting
+ Clear Sorting
-
+
@@ -1065,186 +1158,273 @@ The following example demonstrates how to clear the sorting using `ClearSortingA
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public 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 onExternalSort()
+ private async Task ClearAllSorting()
{
- await Grid.ClearSortingAsync();
+ if (grid != null)
+ {
+ await grid.ClearSortingAsync();
+ }
}
}
+
{% 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 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/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Sorting events
+
+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`: 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**
+
+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
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; } = new List();
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private Task Sorting(SortingEventArgs args)
+ {
+ // Prevent sorting on OrderID column
+ if (args.ColumnName == "OrderID")
+ {
+ args.Cancel = true;
}
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+
+ // Change sort direction dynamically
+ if (args.ColumnName == "CustomerID" && args.Direction == SortDirection.Ascending)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
+ args.Direction = SortDirection.Descending;
}
- public static List GetAllRecords()
+ 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 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/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Sorting events
+### Sorted
-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 `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.
-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.
+**Event Arguments**
-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 event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties:
-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.
+| 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 (show == true)
+@if (showNotification)
{
-
- Sort action completed for @columnName column
+
+ Sorting completed for @lastSortedColumn column
}
-
-
+
+
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public string columnName { get; set; }
- public bool show { get; set; } = false;
+ 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();
- }
-
- public async Task SortingHandler(SortingEventArgs args)
- {
- if (args.ColumnName == "OrderID")
- {
- args.Cancel = true;
- }
+ gridData = OrderData.GetAllRecords();
}
- public async Task SortedHandler(SortedEventArgs args)
+ private Task Sorted(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/VjLSsiZewifHMFkS?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
diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md
index 1b2c078616..11221918a4 100644
--- a/blazor/datagrid/style-and-appearance/aggregate.md
+++ b/blazor/datagrid/style-and-appearance/aggregate.md
@@ -1,19 +1,21 @@
---
layout: post
-title: Aggregate customization in Blazor DataGrid | Syncfusion
-description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more.
+title: Customize aggregates in Blazor DataGrid | Syncfusion
+description: Learn how to customize aggregate rows in the Syncfusion Blazor DataGrid using CSS, including footer containers and summary cells.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Aggregate in Syncfusion® Blazor DataGrid
+# Aggregate customization in Syncfusion Blazor DataGrid
-You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements.
+Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the grid. Styling options are available for:
-## Customizing the aggregate root element
+- **Aggregate root container:** The outer wrapper of the footer row.
+- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result.
-To customize the appearance of the Grid's aggregate root elements, you can use the following CSS code:
+## Customize the aggregate root element
+The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance:
```css
.e-grid .e-gridfooter {
@@ -21,13 +23,13 @@ To customize the appearance of the Grid's aggregate root elements, you can use t
}
```
-In this example, the **e-gridfooter** class represents the root element of the aggregate row in the Grid footer. You can modify the `font-family` property to change the font of the aggregate root element.
+Properties like **font-family**, **font-size**, and **padding** can be changed to fit the grid layout design.
-
+
-## Customizing the aggregate cell elements
+## Customize the aggregate cell elements
-To customize the appearance of the Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code:
+The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor DataGrid. Apply CSS to modify their look:
```css
.e-grid .e-summaryrow .e-summarycell {
@@ -35,27 +37,25 @@ To customize the appearance of the Grid's aggregate cell elements (summary row c
}
```
-In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements.
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction.
-
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
@{
var aggregate = (context as AggregateTemplateContext);
-
-
Sum: @aggregate.Sum
-
+
Sum: @aggregate.Sum
}
@@ -67,9 +67,7 @@ In this example, the **e-summaryrow** class represents the summary row containin
@{
var aggregate = (context as AggregateTemplateContext);
-
-
Max: @aggregate.Max
-
+
Max: @aggregate.Max
}
@@ -77,26 +75,22 @@ In this example, the **e-summaryrow** class represents the summary row containin
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -107,44 +101,43 @@ In this example, the **e-summaryrow** class represents the summary row containin
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
+ Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
+ Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
+ Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
+ Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
+ Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(2024, 1, 14)));
+ Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
+ Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
+ Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
+ Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
+ Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public DateTime OrderDate { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public double Freight { get; }
+ public DateTime OrderDate { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/BNLoXStLKgmIIyaI" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNMcivWmiUmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md
index 2d39078f61..b0f0d2222a 100644
--- a/blazor/datagrid/style-and-appearance/editing.md
+++ b/blazor/datagrid/style-and-appearance/editing.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Editing customization in DataGrid | Syncfusion
-description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details.
+title: Customize editing in Blazor DataGrid | Syncfusion
+description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor DataGrid using CSS.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,25 +9,31 @@ documentation: ug
# Editing customization in Syncfusion Blazor DataGrid
-You can customize the appearance of editing-related elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements.
+The appearance of editing elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the editing interface:
-## Customizing the edited and added row element
+- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted.
+- **Edit form input fields:** Displays text boxes used to enter or update values during editing.
+- **Edit dialog header:** Shows the title or context of the current editing operation.
+- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel.
-To customize the appearance of edited and added row table elements in the Grid, you can use the following CSS code:
+## Customize edited and added row elements
+
+The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out:
```css
.e-grid .e-editedrow table, .e-grid .e-addedrow table {
background-color: #62b2eb;
}
```
-In this example, the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements.
-
-
+Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode.
+
+
+
-## Customizing the edited row input element
+## Customize edited row input elements
-To customize the appearance of edited row input elements in the Grid, you can use the following CSS code:
+The **.e-gridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor DataGrid. Use CSS to adjust their appearance:
```css
@@ -37,40 +43,37 @@ To customize the appearance of edited row input elements in the Grid, you can us
}
```
-In this example, the **.e-gridform** class represents the editing form, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property to change text color of the input elements.
-
+Modify properties such as **font-family**, **color**, or **padding** to improve readability.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
+ private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" };
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -81,56 +84,59 @@ In this example, the **.e-gridform** class represents the editing form, and the
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ Freight = freight;
+ ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWNCxTcuUSDfi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the edit dialog header element
+## Customize the edit dialog header
-To customize the appearance of the edit dialog header element in the Grid, you can use the following CSS code:
+The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header:
```css
@@ -139,35 +145,34 @@ To customize the appearance of the edit dialog header element in the Grid, you c
}
```
-In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element.
-
+Change properties such as **background-color** to visually separate the header from the rest of the dialog content.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
+ private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" };
protected override void OnInitialized()
{
@@ -179,56 +184,59 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ Freight = freight;
+ ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- 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", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSMjiRTFXgRbNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the command column buttons
+## Customize command column buttons
-To customize the appearance of command column buttons such as edit, delete, update, and cancel, you can use the following CSS code:
+The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor DataGrid. Use CSS to adjust their appearance:
```css
@@ -240,35 +248,35 @@ To customize the appearance of command column buttons such as edit, delete, upda
}
```
-In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons.
-
-
+Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction.
+
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
+
-
-
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -292,49 +297,52 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, double freight, string shipCountry)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
OrderID = orderID;
CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
Freight = freight;
ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, "France"));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Germany"));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, "Brazil"));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, "France"));
- Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Belgium"));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, "Brazil"));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Switzerland"));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, "Switzerland"));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, "Brazil"));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, "Venezuela"));
- Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Austria"));
- Orders.Add(new OrderData(10259, "CENTC", 3.25, "Mexico"));
- Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Germany"));
- Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Brazil"));
- Orders.Add(new OrderData(10262, "RATTC", 48.29, "USA"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public string ShipCountry { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVSMNiHTPsZJUUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md
index d9c71f66f2..89b38585b1 100644
--- a/blazor/datagrid/style-and-appearance/filtering.md
+++ b/blazor/datagrid/style-and-appearance/filtering.md
@@ -1,110 +1,126 @@
---
layout: post
-title: Filtering customization in Blazor DataGrid | Syncfusion
-description: Learn here all about filtering in Syncfusion Blazor DataGrid and more.
+title: Customize filtering in Blazor DataGrid | Syncfusion
+description: Learn how to style and customize the Syncfusion Blazor DataGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Filtering in Syncfusion® Blazor DataGrid
+# Filtering customization in Syncfusion Blazor DataGrid
-You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters.
+The appearance of filtering elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the filtering interface:
-## Customizing the filter bar cell element
+- **Filter bar cell and input elements:** Used to enter filter values directly in the header row.
+- **Input focus styles:** Visual highlight applied when the filter input field is focused.
+- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers.
+- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions.
+- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering.
+- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode.
-To customize the appearance of the filter bar cell element in the Grid header, you can use the following CSS code:
+## Customize the filter bar cell element
-```css
+The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance:
+```css
.e-grid .e-filterbarcell {
background-color: #045fb4;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element in the Grid header. You can modify the `background-color` property to change the color of the filter bar cell element.
-
+Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells.
-## Customizing the filter bar input element
+
-To customize the appearance of the filter bar input element in the Grid header, you can use the following CSS code:
+## Customize the filter bar input element
+The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look:
```css
-
-.e-grid .e-filterbarcell .e-input-group input.e-input{
+.e-grid .e-filterbarcell .e-input-group input.e-input {
font-family: cursive;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element.
-
+Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the grid design.
-## Customizing the filter bar input focus
+
-To customize the appearance of the filter bar input element's focus highlight, you can use the following CSS code:
+## Customize the input focus
-```css
+The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance:
-.e-grid .e-filterbarcell .e-input-group.e-input-focus{
+```css
+.e-grid .e-filterbarcell .e-input-group.e-input-focus {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight.
+
+Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation.
-## Customizing the filter bar input clear icon
+## Customize the filter bar input clear icon
-To customize the appearance of the filter bar input element's clear icon, you can use the following CSS code:
+The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance:
```css
-
.e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
content: '\e72c';
}
-
```
-In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed.
-
+The `content` property can be updated to use a different glyph from the icon set.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -115,35 +131,35 @@ In this example, the **.e-clear-icon** class targets the clear icon element with
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
+ Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
+ Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
+ Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
+ Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
+ Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
+ Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
+ Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
+ Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
+ Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
+ Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -155,138 +171,139 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryXIXVUYyWnGdg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryMjMRrYykDUIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the Blazor DataGrid filtering icon
+## Customize the filtering icon in the header
-To customize the appearance of the Grid's filtering icon in the Grid header, you can use the following CSS code:
+The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look:
```css
-
-.e-grid .e-icon-filter::before{
+.e-grid .e-icon-filter::before {
content: '\e81e';
}
-
```
-In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed.
-
+Update the `content` value to match the desired icon glyph.
-## Customizing the filter dialog content
+
-To customize the appearance of the filter dialog's content element, you can use the following CSS code:
+## Customize the filter dialog content
-```css
+The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance:
+```css
.e-grid .e-filter-popup .e-dlg-content {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content.
+
+Modify properties such as **background-color**, **padding**, and **border** to match the application theme.
-## Customizing the filter dialog footer
+## Customize the filter dialog footer
-To customize the appearance of the filter dialog's footer element, you can use the following CSS code:
+The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance:
```css
-
.e-grid .e-filter-popup .e-footer-content {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer.
+
+Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design.
-## Customizing the filter dialog input element
+## Customize the filter dialog input field
-To customize the appearance of the filter dialog's input elements, you can use the following CSS code:
+The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance:
```css
-
-.e-grid .e-filter-popup .e-input-group input.e-input{
+.e-grid .e-filter-popup .e-input-group input.e-input {
font-family: cursive;
}
-
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements.
-
+Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency.
-## Customizing the filter dialog button element
+
-To customize the appearance of the filter dialog's button elements, you can use the following CSS code:
+## Customize the filter dialog button element
-```css
+The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance:
-.e-grid .e-filter-popup .e-btn{
+```css
+.e-grid .e-filter-popup .e-btn {
font-family: cursive;
}
-
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements.
-
+Change properties like **font-family**, **background-color**, and **border** to match the design.
-## Customizing the excel filter dialog number filters element
+
-To customize the appearance of the excel filter dialog's number filters, you can use the following CSS code:
+## Customize the Excel-style number filter menu
-```css
+The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the number filter list in the Excel-style filter dialog. Apply CSS to change its appearance:
-.e-grid .e-filter-popup .e-contextmenu-container ul{
+```css
+.e-grid .e-filter-popup .e-contextmenu-container ul {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-contextmenu-container** ul classes target the number filter elements within the excel filter dialog. You can modify the `background-color` property to change the color of these elements.
-
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -298,35 +315,35 @@ In this example, the **.e-filter-popup .e-contextmenu-container** ul classes tar
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
+ Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
+ Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
+ Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
+ Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
+ Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
+ Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
+ Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
+ Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
+ Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
+ Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -338,4 +355,4 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSjyjhAkUzNonV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsNixVEFSwNFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md
index a99346e4b3..0c27f03567 100644
--- a/blazor/datagrid/style-and-appearance/grouping.md
+++ b/blazor/datagrid/style-and-appearance/grouping.md
@@ -1,50 +1,56 @@
---
layout: post
-title: Grouping customization in Blazor DataGrid | Syncfusion
-description: Learn here all about grouping in Syncfusion Blazor DataGrid and more.
+title: Customize grouping in Blazor DataGrid | Syncfusion
+description: Learn how to style and customize the grouping UI in Syncfusion Blazor DataGrid—group headers, icons, caption rows, and indent cells with CSS tips.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Grouping in Syncfusion