diff --git a/README.md b/README.md
index d24bec012a..ad175c30e3 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Syncfusion® Blazor Documentation
+# Syncfusion® Blazor Documentation
-This is the GitHub repository for the technical product documentation for Syncfusion® Blazor components. This documentation is published to https://blazor.syncfusion.com/documentation/introduction
+This is the GitHub repository for the technical product documentation for Syncfusion® Blazor components. This documentation is published to https://blazor.syncfusion.com/documentation/introduction
## Contributions Welcome!
diff --git a/blazor-toc.html b/blazor-toc.html
index 1af8a8bb18..be178cc0f6 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -1816,7 +1816,6 @@
diff --git a/blazor/Release-Notes/28.1.33.md b/blazor/Release-Notes/28.1.33.md
new file mode 100644
index 0000000000..4cf94147fd
--- /dev/null
+++ b/blazor/Release-Notes/28.1.33.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor 2024 Volume 4 main Release Release Notes
+description: Essential Studio for Blazor 2024 Volume 4 main Release Release Notes
+platform: Blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor Release Notes
+
+{% include release-info.html date="December 12, 2024" version="v28.1.33" %}
+
+{% directory path: _includes/release-notes/v28.1.33 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/blazor/common/adding-script-references.md b/blazor/common/adding-script-references.md
index 31b1a292da..6f7cdf8df1 100644
--- a/blazor/common/adding-script-references.md
+++ b/blazor/common/adding-script-references.md
@@ -30,7 +30,7 @@ Syncfusion Blazor components are available in CDN for each version. Make sure th
-
All components except PDF Viewer, PDF Viewer(NextGen) & Document Editor
+
All components except PDF Viewer (Classic), PDF Viewer & Document Editor
{% highlight cshtml %}
@@ -81,7 +81,7 @@ https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor-sfp
```
-If you are using `PDF Viewer`,`PDF Viewer(NextGen)` or `DocumentEditor`, ensure to add additional script references as follows,
+If you are using `PDF Viewer (Classic)`,`PDF Viewer` or `DocumentEditor`, ensure to add additional script references as follows,
```html
@@ -96,13 +96,13 @@ In addition to above, Syncfusion Blazor components provides latest scripts in CD
| Component | CDN Script Reference |
| --- | --- |
-| All components except PDF Viewer, PDF Viewer(NextGen) & Document Editor | https://cdn.syncfusion.com/blazor/syncfusion-blazor.min.js |
-| PDF Viewer | https://cdn.syncfusion.com/blazor/syncfusion-blazor-pdfviewer.min.js |
+| All components except PDF Viewer (Classic), PDF Viewer & Document Editor | https://cdn.syncfusion.com/blazor/syncfusion-blazor.min.js |
+| PDF Viewer (Classic)| https://cdn.syncfusion.com/blazor/syncfusion-blazor-pdfviewer.min.js |
| Document Editor | https://cdn.syncfusion.com/blazor/syncfusion-blazor-documenteditor.min.js |
-| PDF Viewer(NextGen) | https://cdn.syncfusion.com/blazor/syncfusion-blazor-sfpdfviewer.min.js |
+| PDF Viewer | https://cdn.syncfusion.com/blazor/syncfusion-blazor-sfpdfviewer.min.js |
-N> To add custom PDF Viewer(NextGen) script file in your application, refer [How to refer SfPdfViewer script file in application](../pdfviewer-2/how-to/refer-sfpdfviewer-script-in-application).
+N> To add custom PDF Viewer script file in your application, refer [How to refer SfPdfViewer script file in application](../pdfviewer-2/how-to/refer-sfpdfviewer-script-in-application).
## Static web assets
@@ -125,7 +125,7 @@ N> For **Blazor Web App with interaction mode as Auto & Blazor WASM App**, call
```
-* If you're using the PDF viewer, PDF Viewer(NextGen) or Document Editor component, use the code below to refer to script from static web assets.
+* If you're using the PDF viewer (Classic), PDF Viewer or Document Editor component, use the code below to refer to script from static web assets.
```html
diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md
index 3ccfd87e1c..6ae4d21f54 100644
--- a/blazor/datagrid/column-headers.md
+++ b/blazor/datagrid/column-headers.md
@@ -9,6 +9,8 @@ documentation: ug
# Headers in Blazor DataGrid component
+The Syncfusion Blazor DataGrid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid.
+
## Header text
By default, the header text of a column in DataGrid is displayed from the column's [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value. However, you can easily override the default header title and provide a custom header text for the column using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property.
@@ -104,20 +106,28 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
-@using BlazorApp1.Data
+@using Syncfusion.Blazor.DropDowns
-
+
-
-
+
+
Customer ID
-
-
+
+
+
+
+
+
+
+
+
+
@HeaderValue
@@ -142,9 +152,20 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private SfGrid Grid;
+ public List Orders { get; set; }
public string HeaderValue { get; set; } = "Order Date";
+ public string DropDownValue { get; set; } = "Freight";
+ public class Columns
+ {
+ public string ID { get; set; }
+ public string Value { get; set; }
+ }
+ List DropDownData = new List {
+ new Columns() { ID= "Freight", Value= "Freight" },
+ new Columns() { ID= "Shipment", Value= "Shipment" },
+ new Columns() { ID= "Cargo", Value= "Cargo" },
+ };
private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
{
if (args.Checked)
@@ -160,58 +181,54 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate)
{
- public static List Orders = new List();
- public OrderData()
- {
-
- }
- public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate,double? Freight)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.OrderDate = OrderDate;
- this.Freight = Freight;
- }
-
- public static List GetAllRecords()
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", new DateTime(1996,07,08), 32.38));
- Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 08),66.98));
- Orders.Add(new OrderData(10248, "HANAR", new DateTime(1996, 07, 08),56.08));
- Orders.Add(new OrderData(10248, "VICTE", new DateTime(1996, 07, 08),21.78));
- Orders.Add(new OrderData(10248, "SUPRD", new DateTime(1996, 07, 08),87.56));
- Orders.Add(new OrderData(10248, "HANAR", new DateTime(1996, 07, 08),32.56));
- Orders.Add(new OrderData(10248, "CHOPS", new DateTime(1996, 07, 08),12.76));
- Orders.Add(new OrderData(10248, "RICSU", new DateTime(1996, 07, 08),55.45));
- Orders.Add(new OrderData(10248, "VINET", new DateTime(1996, 07, 08),11.94));
- code += 5;
- }
- }
- return Orders;
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4)));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5)));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9)));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17)));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18)));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22)));
}
-
-
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ return order;
}
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqXarRxgGevNlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVJshXLfRNuKUbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
>* The `HeaderTemplate` property is only applicable to DataGrid columns that have a header element.
>* You can use any HTML or Blazor component in the header template to add additional functionality to the header element.
@@ -226,21 +243,29 @@ In the following sample, the columns **Order Date**, and **Freight** are grouped
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
-
+
-
+ Order ID
+
+
+
+
+
+
+
+
+
@@ -250,74 +275,75 @@ In the following sample, the columns **Order Date**, and **Freight** are grouped
- Ship Details ()
-
-
+ Ship Details ()
+
-
-
@code {
- public List Orders { get; set; }
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
}
+ public string DropDownValue { get; set; } = "Order Details";
+
+ public class Columns
+ {
+ public string ID { get; set; }
+ public string Value { get; set; }
+ }
+ List DropDownData = new List {
+ new Columns() { ID= "Order Details", Value= "Order Details" },
+ new Columns() { ID= "Order Information", Value= "Order Information" },
+ };
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string Shipcountry, double Freight, DateTime OrderDate, DateTime shippeddate)
{
- public static List Orders = new List();
- public OrderData()
- {
+ this.OrderID = OrderID;
+ this.ShipCountry = Shipcountry;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = shippeddate;
- }
- public OrderData( int? OrderID,DateTime? OrderDate,double? Freight,string ShipCountry,DateTime? ShippedDate)
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
{
- this.OrderID = OrderID;
- this.OrderDate = OrderDate;
- this.Freight = Freight;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
+ order.Add(new OrderDetails(10248, "France", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10249, "Germany", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10250, "Brazil", 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10251, "France", 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10252, "Belgium", 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10253, "Brazil", 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10254, "Switzerland", 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23)));
+ order.Add(new OrderDetails(10255, "Switzerland", 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24)));
+ order.Add(new OrderDetails(10256, "Brazil", 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25)));
+ order.Add(new OrderDetails(10257, "Venezuela", 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30)));
+ order.Add(new OrderDetails(10258, "Austria", 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29)));
+ order.Add(new OrderDetails(10259, "Mexico", 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31)));
+ order.Add(new OrderDetails(10260, "Germany", 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1)));
+ order.Add(new OrderDetails(10261, "Brazil", 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2)));
+ order.Add(new OrderDetails(10262, "USA", 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5)));
}
-
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, new DateTime(1996,07,08), 32.38, "France",new DateTime(1996,07,16)));
- Orders.Add(new OrderData(10249, new DateTime(1996, 07, 08),66.98, "Germany", new DateTime(1996, 07, 10)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),56.08, "Brazil", new DateTime(1996, 07, 26)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),21.78, "France", new DateTime(1996, 07, 24)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),87.56, "Belgium", new DateTime(1996, 07, 01)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),32.56, "Brazil", new DateTime(1996, 07, 06)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),12.76, "Switzerland", new DateTime(1996, 07, 18)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),55.45, "Switzerland", new DateTime(1996, 07, 19)));
- Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),11.94, "Brazil", new DateTime(1996, 07, 17)));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public DateTime? ShippedDate { get; set; }
+ return order;
}
+ public int OrderID { get; set; }
+ public string ShipCountry { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+ public DateTime ShippedDate { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUsCZiiuVewxQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhJMLtKrNbNTfwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Align the text of header text
@@ -414,81 +440,101 @@ DataGrid provides the below three options for configuring:
* **Header**: With this option, only the grid header text is wrapped.
* **Content**: With this option, only the grid content is wrapped.
+> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the DataGrid's width.
+> * If a column's header text contains no white space, the text may not be wrapped.
+> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content.
+
In the following example, the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode) is set to **Content**.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using BlazorApp1.Data
+@using Syncfusion.Blazor.DropDowns
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
@code {
- public List Orders { get; set; }
+ public SfGrid Grid { get; set; }
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
- }
+ Orders = InventoryData.GetAllRecords();
+ }
+ public WrapMode WrapModeValue = WrapMode.Header;
+ public WrapMode DropDownValue = WrapMode.Header;
+ public class DropDownOrder
+ {
+ public string Text { get; set; }
+ public WrapMode Value { get; set; }
+ }
+ List DropDownData = new List
+ {
+ new DropDownOrder() { Text = "Both", Value = WrapMode.Both },
+ new DropDownOrder() { Text = "Header", Value = WrapMode.Header},
+ };
+ public async Task OnChange(ChangeEventArgs Args)
+ {
+ WrapModeValue = Args.Value;
+ await Grid.Refresh();
+ }
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+{% highlight c# tabtitle="InventoryData.cs" %}
+public class InventoryData
+{
+ public static List Orders = new List();
+
+ public InventoryData(string inventor, int? patentFamilies, string country, string mainFields)
{
- public static List Orders = new List();
- public OrderData()
- {
+ this.Inventor = inventor;
+ this.NumberofPatentFamilies = patentFamilies;
+ this.Country = country;
+ this.Mainfieldsofinvention = mainFields;
+ }
- }
- public OrderData(string Inventor, int? PatentFamilies, string Country, string MainFields)
- {
- this.Inventor = Inventor;
- this.NumberofPatentFamilies = PatentFamilies;
- this.Country = Country;
- this.Mainfieldsofinvention = MainFields;
- }
- 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("Kia Silverb", 4737, "Australia", "Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI"));
- Orders.Add(new OrderData("Shunpei Yamazaki", 4677, "Japan", "Various"));
- Orders.Add(new OrderData("Lowell L. Wood, Jr.", 13197, "Canada", "Printing, Digital paper, Internet, Electronics, CGI, VLSI"));
- Orders.Add(new OrderData("Paul Lap", 1255, "India", "Automotive, Stainless steel products"));
- Orders.Add(new OrderData("Gurtej Sandhu", 1240, "USA", "Gaming machines"));
- Orders.Add(new OrderData("Shunpei Yamazaki", 1240, "Canada", "Printing, Digital paper, Internet, Electronics, CGI, VLSI"));
- Orders.Add(new OrderData("Paul Lap", 1093, "USA", "Automotive, Stainless steel products"));
- Orders.Add(new OrderData("Gurtej Sandhu", 993, "Japan", "Various"));
- Orders.Add(new OrderData("Kia Silverb", 949, "India", "Printing, Digital paper, Internet, Electronics, CGI, VLSI"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new InventoryData("Kia Silverbrook", 4737, "Australia", "Printing, Digital paper, Internet, Electronics, Lab-on-a-chip, MEMS, Mechanical, VLSI"));
+ Orders.Add(new InventoryData("Shunpei Yamazaki", 4677, "Japan", "Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED"));
+ Orders.Add(new InventoryData("Lowell L. Wood, Jr.", 1419, "USA", "Mosquito laser, Nuclear weapons"));
+ Orders.Add(new InventoryData("Paul Lapstun", 1281, "Australia", "Printing, Digital paper, Internet, Electronics, CGI, VLSI"));
+ Orders.Add(new InventoryData("Gurtej Sandhu", 1255, "India", "Thin film processes and materials, VLSI, Semiconductor device fabrication"));
+ Orders.Add(new InventoryData("Jun Koyama", 1240, "Japan", "Thin film transistors, Liquid crystal displays, OLED"));
+ Orders.Add(new InventoryData("Roderick A. Hyde", 1240, "USA", "Various"));
+ Orders.Add(new InventoryData("Leonard Forbes", 1093, "Canada", "Semiconductor Memories, CCDs, Thin film processes and materials, VLSI"));
+ Orders.Add(new InventoryData("Thomas Edison", 1084, "USA", "Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining"));
+ Orders.Add(new InventoryData("Donald E. Weder", 999, "USA", "Florist supplies"));
+ Orders.Add(new InventoryData("George Albert Lyon", 993, "Canada", "Automotive, Stainless steel products"));
}
- public string Inventor { get; set; }
- public int? NumberofPatentFamilies { get; set; }
- public string Country { get; set; }
- public string Mainfieldsofinvention { get; set; }
+ return Orders;
}
+
+ public string Inventor { get; set; }
+ public int? NumberofPatentFamilies { get; set; }
+ public string Country { get; set; }
+ public string Mainfieldsofinvention { get; set; }
+}
{% endhighlight %}
{% endtabs %}
->* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the DataGrid's width.
->* If a column's header text contains no white space, the text may not be wrapped.
->* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKWMjirseyNsmj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVJMVDAgevobXAA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Change the height of header
@@ -504,6 +550,246 @@ You can use CSS to override the default height of the **.e-grid .e-headercell**
}
```
+## Change header text dynamically
+
+The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience.
+
+**Using Event**
+
+To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid.
+
+When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties:
+
+* **cell**: Defines the header cell that is being modified.
+* **node**: Defines the DOM element of the header cell that is being modified.
+
+You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the Grid.
+
+**Using method**
+
+The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use:
+
+1. [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_): This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column.
+
+2. [GetColumnByUidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByUidAsync_System_String_): Retrieves the column object based on its unique identifier. You can modify the `HeaderText` property of the column object to change the header text.
+
+> * When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method.
+> * The unique identifier is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
+
+Here is an example of how to change the header text of a column using the `GetColumnByFieldAsync` method:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Change
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public string ModifiedHeader { get; set; } = "";
+ public string IdHeader { get; set; } = "Order ID";
+ public string CustomerHeader { get; set; } = "Customer ID";
+ public string FreightHeader { get; set; } = "Freight";
+ public string DateHeader { get; set; } = "Order Date";
+ public string PlaceHolder { get; set; } = "Enter new header text";
+ public string DropDownValue { get; set; } = "OrderID";
+ public class Columns
+ {
+ public string ID { get; set; }
+ public string Value { get; set; }
+ }
+ List DropDownData = new List {
+ new Columns() { ID= "OrderID", Value= "OrderID" },
+ new Columns() { ID= "CustomerID", Value= "CustomerID" },
+ new Columns() { ID= "Freight", Value= "Freight" },
+ new Columns() { ID= "OrderDate", Value= "OrderDate" },
+ };
+
+ public async Task changeHeaderText()
+ {
+ var selectedColumn = await Grid.GetColumnByFieldAsync(DropDownValue);
+ switch (selectedColumn.Field)
+ {
+ case "OrderID":
+ IdHeader = ModifiedHeader;
+ break;
+ case "CustomerID":
+ CustomerHeader = ModifiedHeader;
+ break;
+ case "Freight":
+ FreightHeader = ModifiedHeader;
+ break;
+ case "OrderDate":
+ DateHeader = ModifiedHeader;
+ break;
+ }
+ await Grid.RefreshHeaderAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4)));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5)));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9)));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17)));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18)));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22)));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthfsiLOBGoUXutu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+**Changing the header text of all columns**
+
+If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property for each column. Here is an example:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+ Change Header Text
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public string IdHeader { get; set; } = "OrderID";
+ public string CustomerHeader { get; set; } = "CustomerID";
+ public string FreightHeader { get; set; } = "Freight";
+ public string CityHeader { get; set; } = "ShipCity";
+
+ public void ChangeHeaderText()
+ {
+ IdHeader = "Order ID";
+ CustomerHeader = "Customer Name";
+ FreightHeader = "Freight Charge";
+ CityHeader = "Ship To City";
+ Grid.RefreshHeaderAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string Shipcity)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = Shipcity;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, "Reims"));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, "Münster"));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83, "Rio de Janeiro"));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, "Lyon"));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, "Charleroi"));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, "Rio de Janeiro"));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, "Bern"));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, "Genève"));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, "Resende"));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, "San Cristóbal"));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, "Graz"));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, "México D.F."));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, "Köln"));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, "Rio de Janeiro"));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, "Albuquerque"));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVfCVDLUYQXoZkN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Change the orientation of header text
By default, the text in the column headers of the Syncfusion DataGrid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
@@ -515,7 +801,7 @@ Follow the below steps to change the orientation of the header text in DataGrid:
To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property.
```css
- .e-grid .e-columnheader .e-headercell.textorientationclass .e-headercelldiv {
+ .e-grid .e-columnheader .e-headercell.orientation .e-headercelldiv {
transform: rotate(90deg); // Rotate a particular headertext
}
```
@@ -524,10 +810,10 @@ To `rotate` the header text, you can create a CSS class with the `transform` pro
Once you have created the CSS class, you can add it to the particular column by using the `CustomAttributes` property. This property allows you to add any custom attribute to the GridColumn.
-For example, to add the textorientationclass class to the CustomerID column, you can use the following code:
+For example, to add the orientation class to the CustomerID column, you can use the following code:
```cshtml
-
+
```
**Step 3**: **Resize the header cell height**
@@ -536,7 +822,7 @@ After adding the custom CSS class to a column, you need to resize the header cel
```cshtml
function setHeaderHeight(args) {
- var textWidth = document.querySelector(".textorientationclass > div").scrollWidth; // Obtain the width of the headerText content.
+ var textWidth = document.querySelector(".orientation > div").scrollWidth; // Obtain the width of the headerText content.
var header = document.querySelectorAll(".e-columnheader");
for (var i = 0; i < header.length; i++) {
(header.item(i)).style.height = textWidth + 'px'; // Assign the obtained textWidth as the height of the column header.
@@ -557,12 +843,12 @@ This is demonstrated in the following sample:
-
+
@@ -634,6 +920,131 @@ This is demonstrated in the following sample:
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBKiiDMrraFxmkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## Custom tooltip for header
+
+Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion DataGrid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful.
+
+To enable custom tooltips for headers in the Grid, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) feature by rendering the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) components within the template.
+
+Here's an example of how to use the `HeaderTemplate` to add a custom tooltip to a header cell:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+ Order ID
+
+
+
+
+
+
+ Customer ID
+
+
+
+
+
+
+ Order Date
+
+
+
+
+
+
+ Freight
+
+
+
+
+
+
+ Shipped Date
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ // Dictionary for column descriptions
+ public Dictionary ColumnDescriptions = new()
+ {
+ { "Order ID", "Order ID: A unique number assigned to each order." },
+ { "Customer ID", "Customer ID: The ID of the customer placing the order." },
+ { "Order Date", "Order Date: The date when the order was placed." },
+ { "Freight", "Freight: The cost of shipping the order." },
+ { "Shipped Date", "Shipped Date: The date when the order was shipped." }
+ };
+
+ // Method to get tooltip content dynamically based on HeaderText
+ public string GetTooltipContent(string headerText)
+ {
+ return ColumnDescriptions.ContainsKey(headerText) ? ColumnDescriptions[headerText] : "No description available.";
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, DateTime shippeddate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = shippeddate;
+
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23)));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24)));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25)));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30)));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29)));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31)));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1)));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2)));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5)));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+ public DateTime ShippedDate { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrJirtAJDjvaNlx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Customize header text styles
Customizing the datagrid header styles allows you to modify the appearance of the column header in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS and CustomAttributes property of the GridColumn component.
@@ -733,9 +1144,9 @@ Step 1: Define a CSS class that specifies the styles you want to apply to the he
```CSS
.e-grid .e-headercell.customcss {
- background-color: rgb(43, 205, 226);
- color: black;
- }
+ background-color: rgb(43, 205, 226);
+ color: black;
+}
```
@@ -750,14 +1161,13 @@ The following example demonstrates how to customize the appearance of the **Orde
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using BlazorApp1.Data
-
+
-
-
-
-
+
+
+
+
@code {
- public List Orders { get; set; }
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, DateTime OrderDate, DateTime shippeddate)
{
- public static List Orders = new List();
- public OrderData()
- {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = shippeddate;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Paul Henriot", new DateTime(1996, 7, 4), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10249, "Karin Josephs", new DateTime(1996, 7, 5), new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10250, "Mario Pontes", new DateTime(1996, 7, 8), new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10251, "Mary Saveley", new DateTime(1996, 7, 8), new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10252, "Pascale Cartrain", new DateTime(1996, 7, 9), new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10253, "Mario Pontes", new DateTime(1996, 7, 10), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10254, "Yang Wang", new DateTime(1996, 7, 11), new DateTime(1996, 7, 23)));
+ order.Add(new OrderDetails(10255, "Michael Holz", new DateTime(1996, 7, 12), new DateTime(1996, 7, 24)));
+ order.Add(new OrderDetails(10256, "Paula Parente", new DateTime(1996, 7, 15), new DateTime(1996, 7, 25)));
+ order.Add(new OrderDetails(10257, "Carlos Hernández", new DateTime(1996, 7, 16), new DateTime(1996, 7, 30)));
+ order.Add(new OrderDetails(10258, "Roland Mendel", new DateTime(1996, 7, 17), new DateTime(1996, 7, 29)));
+ order.Add(new OrderDetails(10259, "Francisco Chang", new DateTime(1996, 7, 18), new DateTime(1996, 7, 31)));
+ order.Add(new OrderDetails(10260, "Henriette Pfalzheim", new DateTime(1996, 7, 19), new DateTime(1996, 8, 1)));
+ order.Add(new OrderDetails(10261, "Bernardo Batista", new DateTime(1996, 7, 19), new DateTime(1996, 8, 2)));
+ order.Add(new OrderDetails(10262, "Paula Wilson", new DateTime(1996, 7, 22), new DateTime(1996, 8, 5)));
}
- public OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate)
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public DateTime ShippedDate { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVJMVtUKbqNkJzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Using event
+
+To customize the appearance of the grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column.
+
+The following example demonstrates how to add a `HeaderCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public void HeaderCell(HeaderCellInfoEventArgs args)
+ {
+ if (args.Column.Field == "OrderDate")
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.Freight = Freight;
- this.OrderDate = OrderDate;
+ args.Cell.AddClass(new string[] { "customcss" });
}
- public static List GetAllRecords()
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, DateTime shippeddate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = shippeddate;
+
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996,07,08)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 07, 18)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 07, 05)));
- Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 07, 23)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 07, 16)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 07, 12)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 07, 18)));
- Orders.Add(new OrderData(10255, "VINET", 148.53, new DateTime(1996, 07, 05)));
- Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 07, 01)));
- code += 5;
- }
- }
- return Orders;
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23)));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24)));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25)));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30)));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29)));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31)));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1)));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2)));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5)));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+ public DateTime ShippedDate { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfsMWkTIsIyEuk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## How to refresh header
+
+The refresh header feature in the Syncfusion Blazor DataGrid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
+To use the refresh header feature, you can call the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the DataGrid component. This method updates the grid header with the latest changes made to the columns.
+The following example demonstrates how to use the `RefreshHeaderAsync` method to update the grid header:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+ Refresh Header
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public string CustomerHeaderText = "CustomerID";
+ public void refreshHeader()
+ {
+ CustomerHeaderText= "New Header Text";
+ Grid.RefreshHeaderAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4)));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5)));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8)));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9)));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10)));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11)));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12)));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15)));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16)));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17)));
+ order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18)));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19)));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22)));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+ public DateTime OrderDate { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTCWruiIbAmHsM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md
index 4a18d906d5..471ea72333 100644
--- a/blazor/datagrid/column-template.md
+++ b/blazor/datagrid/column-template.md
@@ -112,51 +112,228 @@ The following example demonstrates how to define a `Template` for the **Employee
{% endtabs %}
+
> The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option allows to define any HTML content within a column.
+## Render hyperlink in a column
+
+The DataGrid component provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website.
+
+The following example demonstrates, how to render hyperlink column in the Grid using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the `GridColumn` tag. To define a `Template` for the column, you can use the `Template` with the `a` tag to create the hyperlink.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+ @{
+ var Data = (context as EmployeeDetails);
+
+ }
+
+
+
+
+@code {
+ public List EmployeeData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ EmployeeData = EmployeeDetails.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+
+ public EmployeeDetails() { }
+
+ public EmployeeDetails(int employeeID, string lastName, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.LastName = lastName;
+ this.FirstName = firstName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Davolio", "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Fuller", "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Leverling", "Janet"));
+ employee.Add(new EmployeeDetails(4, "Peacock", "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Buchanan", "Steven"));
+ employee.Add(new EmployeeDetails(6, "Suyama", "Michael"));
+ employee.Add(new EmployeeDetails(7, "King", "Robert"));
+ employee.Add(new EmployeeDetails(8, "Callahan", "Laura"));
+ employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne"));
+ }
+ return employee;
+ }
+
+ public int EmployeeID { get; set; }
+ public string LastName { get; set; }
+ public string FirstName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrpMMVXzoBzmrze?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Render other components in a column
The column template has options to render a custom component in a DataGrid column instead of a field value.
+### Render LineChart component in a column
+
+The [LineChart](https://blazor.syncfusion.com/documentation/sparkline/getting-started-webapp) component of Syncfusion provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data.
+
+In the following example, we rendered the Sparkline Chart component in the Grid column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+ @{
+ var Data = (context as EmployeeDetails);
+
+
+ }
+
+
+
+
+@code {
+ public List EmployeeData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ EmployeeData = EmployeeDetails.GetAllRecords();
+ }
+ // Line data
+ private List> lineData = new List>
+ {
+ new List { 0, 6, -4, 1, -3, 2, 5 },
+ new List { 5, -4, 6, 3, -1, 2, 0 },
+ new List { 6, 4, 0, 3, -2, 5, 1 },
+ new List { 4, -6, 3, 0, 1, -2, 5 },
+ new List { 3, 5, -6, -4, 0, 1, 2 },
+ new List { 1, -3, 4, -2, 5, 0, 6 },
+ new List { 2, 4, 0, -3, 5, -6, 1 },
+ new List { 5, 4, -6, 3, 1, -2, 0 },
+ new List { 0, -6, 4, 1, -3, 2, 5 },
+ new List { 6, 4, 0, -3, 2, -5, 1 }
+ };
+
+ // Function to get sparkline data
+ private List GetSparkData(string type, int count)
+ {
+ if (type == "line" && count > 0 && count <= lineData.Count)
+ {
+ return lineData[count - 1];
+ }
+ return new List();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+
+ public EmployeeDetails() { }
+
+ public EmployeeDetails(int employeeID, string lastName, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.LastName = lastName;
+ this.FirstName = firstName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Davolio", "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Fuller", "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Leverling", "Janet"));
+ employee.Add(new EmployeeDetails(4, "Peacock", "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Buchanan", "Steven"));
+ employee.Add(new EmployeeDetails(6, "Suyama", "Michael"));
+ employee.Add(new EmployeeDetails(7, "King", "Robert"));
+ employee.Add(new EmployeeDetails(8, "Callahan", "Laura"));
+ employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne"));
+ }
+ return employee;
+ }
+
+ public int EmployeeID { get; set; }
+ public string LastName { get; set; }
+ public string FirstName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBJsWrWVXXLwpde?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
### Render DropDownList component in a column
-To render a custom component in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started) component in the **Order Status** column by defining the `Template` property.
+To render a custom component in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component in the **Order Status** column by defining the `Template` property.
```csharp
-
-
-
+
+
+
```
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
-
-
-
-
+
+
+
+
-
-
-
+ @{
+ var Data = (context as OrderDetails);
+
+
+
+ }
@code {
- public List Orders { get; set; }
+ public List Orders { get; set; }
public List EmployeeDetails { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
EmployeeDetails = Enumerable.Range(1, 3).Select(x => new EmployeeNames()
{
@@ -171,60 +348,226 @@ To render a custom component in a grid column, you need to define a [Template](h
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, double Freight, string Orderstatus)
{
- public static List Orders = new List();
- public OrderData()
- {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.Freight = Freight;
+ this.OrderStatus = Orderstatus;
- }
- public OrderData(int? OrderID, string CustomerID, double Freight, string Title, string OrderStatus)
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.Freight = Freight;
- this.Title = Title;
- this.OrderStatus = OrderStatus;
+ order.Add(new OrderDetails(10248, "VINET", 32.38, "Order Placed"));
+ order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Processing"));
+ order.Add(new OrderDetails(10250, "HANAR", 65.83, "Order Placed"));
+ order.Add(new OrderDetails(10251, "VICTE", 41.34, "Order Placed"));
+ order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Processing"));
+ order.Add(new OrderDetails(10253, "HANAR", 58.17, "Processing"));
+ order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Order Placed"));
+ order.Add(new OrderDetails(10255, "RICSU", 148.33, "Processing"));
+ order.Add(new OrderDetails(10256, "WELLI", 13.97, "Order Placed"));
+ order.Add(new OrderDetails(10257, "HILAA", 81.91, "Processing"));
+ order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Order Placed"));
+ order.Add(new OrderDetails(10259, "CENTC", 3.25, "Processing"));
+ order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Order Placed"));
+ order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Order Placed"));
+ order.Add(new OrderDetails(10262, "RATTC", 48.29, "Processing"));
}
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "Nancy",32.14, "Sales Representative", "Order Placed"));
- Orders.Add(new OrderData(10249, "Andrew", 33.33, "Vice President, Sales", "Processing"));
- Orders.Add(new OrderData(10250, "Janet", 56.78, "Sales Manager", "Delivered"));
- Orders.Add(new OrderData(10251, "Margaret",43.34, "Inside Sales Coordinator", "Delivered"));
- Orders.Add(new OrderData(10252, "Steven", 17.98, "Sales Manager", "Delivered"));
- Orders.Add(new OrderData(10253, "Michael", 53.33, "Sales Representative", "Processing"));
- Orders.Add(new OrderData(10254, "Robert", 78.99, "Vice President, Sales", "Delivered"));
- Orders.Add(new OrderData(10255, "Anne", 46.66, "Inside Sales Coordinator", "Order Placed"));
- Orders.Add(new OrderData(10256, "Laura", 98.76, "Sales Manager", "Delivered"));
- code += 5;
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string OrderStatus { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJCrtKzUHwTXIk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Render Chip component in a column
+
+The DataGrid component provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/color-picker/getting-started-with-web-app) component in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip component to be rendered in a column.
+
+In the following code, we rendered the Chips component in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property.
+
+```
+
+
+
+
+
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+ @{
+ var Data = (context as EmployeeDetails);
+
+
+
+
+
}
- }
- return Orders;
+
+
+
+
+@code {
+ public List EmployeeData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ EmployeeData = EmployeeDetails.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+
+ public EmployeeDetails() { }
+
+ public EmployeeDetails(int employeeID, string lastName, string firstName, string city)
+ {
+ this.EmployeeID = employeeID;
+ this.LastName = lastName;
+ this.FirstName = firstName;
+ this.City = city;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Davolio", "Nancy", "Seattle"));
+ employee.Add(new EmployeeDetails(2, "Fuller", "Andrew", "Tacoma"));
+ employee.Add(new EmployeeDetails(3, "Leverling", "Janet", "Kirkland"));
+ employee.Add(new EmployeeDetails(4, "Peacock", "Margaret", "Redmond"));
+ employee.Add(new EmployeeDetails(5, "Buchanan", "Steven", "London"));
+ employee.Add(new EmployeeDetails(6, "Suyama", "Michael", "London"));
+ employee.Add(new EmployeeDetails(7, "King", "Robert", "London"));
+ employee.Add(new EmployeeDetails(8, "Callahan", "Laura", "Seattle"));
+ employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne", "London"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public string Title { get; set; }
- public string OrderStatus { get; set; }
- }
+ return employee;
+ }
+
+ public int EmployeeID { get; set; }
+ public string LastName { get; set; }
+ public string FirstName { get; set; }
+ public string City { get; set; }
+}
{% endhighlight %}
{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfsihZJaDYOHeV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKiMZsUppLpTZe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+### Render ProgressBar component in a column
+
+The Syncfusion Grid component supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) component within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` component in a grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities.
+
+In the following code, the `Progress Bar` component render in the Grid **Freight** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property.
+
+```
+
+
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.ProgressBar
+
+
+
+
+
+
+
+ @{
+ var Data = (context as OrderDetails);
+
+
+ }
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, 32.38));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61));
+ order.Add(new OrderDetails(10250, "HANAR", 4, 65.83));
+ order.Add(new OrderDetails(10251, "VICTE", 3, 41.34));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3));
+ order.Add(new OrderDetails(10253, "HANAR", 3, 58.17));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98));
+ order.Add(new OrderDetails(10255, "RICSU", 9, 48.33));
+ order.Add(new OrderDetails(10256, "WELLI", 3, 13.97));
+ order.Add(new OrderDetails(10257, "HILAA", 4, 81.91));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, 40.51));
+ order.Add(new OrderDetails(10259, "CENTC", 7, 3.25));
+ order.Add(new OrderDetails(10260, "OTTIK", 2, 55.09));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05));
+ order.Add(new OrderDetails(10262, "RATTC", 8, 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVpMWhMhJHQEtIF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Using condition template
The conditional column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) allows you to display template elements based on specific conditions.
-
In the following code, checkbox is rendered based on **Discontinued** field value in the datasource. This data can be accessed inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) using the implicit named parameter **context**.
{% tabs %}
@@ -310,6 +653,286 @@ In the following code, checkbox is rendered based on **Discontinued** field valu
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrKWsDsASInUbPD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## How to get the row object by clicking on the template element
+
+The Grid component allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record.
+
+In the following code, the button component is rendered in the **Employee Data** column and [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event binding is used to call the showDetails method when the template element is clicked and the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the grid used to access the selected row object and display it in the dialog popup.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+ View
+
+
+
+ @if (selectedRecord !=null)
+ {
+
Employee ID: @selectedRecord.EmployeeID
+
First Name: @selectedRecord.FirstName
+
Last Name: @selectedRecord.LastName
+ }
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List EmployeeData { get; set; }
+ protected override void OnInitialized()
+ {
+ EmployeeData = EmployeeDetails.GetAllRecords();
+ }
+ private SfDialog Dialog;
+ private EmployeeDetails selectedRecord;
+
+ private void OnRowSelected(RowSelectEventArgs args)
+ {
+ selectedRecord = args.Data;
+ }
+ private void ShowDetails()
+ {
+ Dialog.ShowAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+
+ public EmployeeDetails(int employeeID, string lastName, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.LastName = lastName;
+ this.FirstName = firstName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Davolio", "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Fuller", "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Leverling", "Janet"));
+ employee.Add(new EmployeeDetails(4, "Peacock", "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Buchanan", "Steven"));
+ employee.Add(new EmployeeDetails(6, "Suyama", "Michael"));
+ employee.Add(new EmployeeDetails(7, "King", "Robert"));
+ employee.Add(new EmployeeDetails(8, "Callahan", "Laura"));
+ employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne"));
+ }
+ return employee;
+ }
+
+ public int EmployeeID { get; set; }
+ public string LastName { get; set; }
+ public string FirstName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhJiCBLfgSrKWdw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Use custom helper inside the template
+
+The Syncfusion Grid allows you to use custom helpers inside the `Template` directive of a column. This feature allows you to create complex templates that can incorporate additional helper functions that are not available through the default [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) syntax.
+
+To use the custom helper function inside a column template, you must first add the function to the template's context.
+
+The following example demonstrates how to use a custom helper function inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, using the `Template` element for the Freight column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+ @formatCurrency(((OrderDetails)data).Freight)
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public string formatCurrency(double value)
+ {
+ return "₹ " + value.ToString("F3"); // Format currency with 3 decimals
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+
+ public OrderDetails(int OrderID, string CustomerId, DateTime Orderdate, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.OrderDate = Orderdate;
+ this.Freight = Freight;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", new DateTime(1996, 7, 4), 32.38));
+ order.Add(new OrderDetails(10249, "TOMSP", new DateTime(1996, 7, 5), 11.61));
+ order.Add(new OrderDetails(10250, "HANAR", new DateTime(1996, 7, 8), 65.83));
+ order.Add(new OrderDetails(10251, "VICTE", new DateTime(1996, 7, 8), 41.34));
+ order.Add(new OrderDetails(10252, "SUPRD", new DateTime(1996, 7, 9), 51.3));
+ order.Add(new OrderDetails(10253, "HANAR", new DateTime(1996, 7, 10), 58.17));
+ order.Add(new OrderDetails(10254, "CHOPS", new DateTime(1996, 7, 11), 22.98));
+ order.Add(new OrderDetails(10255, "RICSU", new DateTime(1996, 7, 12), 148.33));
+ order.Add(new OrderDetails(10256, "WELLI", new DateTime(1996, 7, 15), 13.97));
+ order.Add(new OrderDetails(10257, "HILAA", new DateTime(1996, 7, 16), 81.91));
+ order.Add(new OrderDetails(10258, "ERNSH", new DateTime(1996, 7, 17), 140.51));
+ order.Add(new OrderDetails(10259, "CENTC", new DateTime(1996, 7, 18), 3.25));
+ order.Add(new OrderDetails(10260, "OTTIK", new DateTime(1996, 7, 19), 55.09));
+ order.Add(new OrderDetails(10261, "QUEDE", new DateTime(1996, 7, 19), 3.05));
+ order.Add(new OrderDetails(10262, "RATTC", new DateTime(1996, 7, 22), 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthJiiBVViweNEBD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> Custom helpers can only be used inside the `Template` property of a column.
+
+## Dynamically adding template column
+
+The Syncfusion Grid component allows you to dynamically add template columns at runtime. This capability is particularly useful when the structure of the grid needs to be modified based on individual interactions or other dynamic conditions.
+
+Dynamically adding template columns involves creating and inserting columns with custom templates after the grid has been initialized. This approach provides flexibility in presenting data in a highly customizable manner.
+
+The following example demonstrates how to add template column using external button click. In this example, the **ShipCountry** column with a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is added in column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template), and an icon is displayed using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) for the **ShipCountry** column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Buttons
+
+Add Column
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List ShipCountryList { get; set; } = new();
+ public List OrderData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ ShipCountryList = OrderData.Select(o => o.ShipCountry).Distinct().ToList();
+ }
+ private void AddTemplateColumn()
+ {
+ List NewColumns = new List {
+ new GridColumn {
+ Field = "ShipCountry",
+ Template= data =>
+ {
+ return @
+
+
+
;
+ },
+ HeaderTemplate = data => {return @
Ship Country
;},
+ Width = "120"
+ }
+ };
+ foreach (GridColumn column in NewColumns)
+ {
+ Grid.Columns.Add(column);
+ }
+ Grid.RefreshColumnsAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+
+ public OrderDetails(int OrderID, string CustomerId, string Shipcountry, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCountry = Shipcountry;
+ this.Freight = Freight;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "France", 32.38));
+ order.Add(new OrderDetails(10249, "TOMSP", "Germany", 11.61));
+ order.Add(new OrderDetails(10250, "HANAR", "Brazil", 65.83));
+ order.Add(new OrderDetails(10251, "VICTE", "France", 41.34));
+ order.Add(new OrderDetails(10252, "SUPRD", "Belgium", 51.3));
+ order.Add(new OrderDetails(10253, "HANAR", "Brazil", 58.17));
+ order.Add(new OrderDetails(10254, "CHOPS", "Switzerland", 22.98));
+ order.Add(new OrderDetails(10255, "RICSU", "Switzerland", 148.33));
+ order.Add(new OrderDetails(10256, "WELLI", "Brazil", 13.97));
+ order.Add(new OrderDetails(10257, "HILAA", "Venezuela", 81.91));
+ order.Add(new OrderDetails(10258, "ERNSH", "Austria", 140.51));
+ order.Add(new OrderDetails(10259, "CENTC", "Mexico", 3.25));
+ order.Add(new OrderDetails(10260, "OTTIK", "Germany", 55.09));
+ order.Add(new OrderDetails(10261, "QUEDE", "Brazil", 3.05));
+ order.Add(new OrderDetails(10262, "RATTC", "USA", 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCountry { get; set; }
+ public double Freight { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVJsChWpdcrPOlN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Using hyperlink column and performing routing on click
The Column template property can be used to provide routing links inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). For routing, [UriHelper](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0&viewFallbackFrom=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized.
@@ -398,7 +1021,6 @@ This can be achieved by initially defining an anchor tag inside the column templ
{% endhighlight %}
{% endtabs %}
-
In the above code, the url to be navigated is specified in the Link variable of the DataGrid data. Based on this, the page is routed to the corresponding url.
After that, add new razor page for routing with routing url along with the parameters to be received, and initialize it with the required details.
@@ -425,10 +1047,9 @@ After that, add new razor page for routing with routing url along with the param
{% endhighlight %}
{% endtabs %}
-
The following GIF represents template routing in DataGrid
## See also
-* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template)
\ No newline at end of file
+* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template)
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index 36b5c2283c..d296f6a78b 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -9,1437 +9,1853 @@ documentation: ug
# Editing in Blazor DataGrid Component
-The DataGrid component has options to dynamically insert, delete, and update records.
+The Grid component provides powerful options for dynamically inserting, deleting, and updating records, enabling you to modify data directly within the grid. This feature is useful when you want to enable you to perform CRUD (Create, Read, Update, Delete) operations seamlessly.
-N> [Editing](https://blazor.syncfusion.com/documentation/datagrid/editing) feature requires a primary key column for CRUD operations.
+To enable editing functionality directly within the grid, you need to configure the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing), [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowAdding), and [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) properties within the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **true**.
-To know about editing feature in Blazor DataGrid component, you can check on this video.
+Editing feature requires a primary key column for CRUD operations. To define the primary key, set [Columns.isPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) to **true** in particular column.
-{% youtube
-"youtube:https://www.youtube.com/watch?v=jOiZpLexDB0"%}
-
-To define the primary key, set [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) to **true** in a particular column whose value is unique.
+You can start the edit action either by double clicking the particular row or by selecting the required row and click on **Edit** button in the toolbar. Similarly, you can add a new record to grid either by clicking on **Add** button in the toolbar or on an external button which is bound to invoke the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord) method of the grid, **Save** and **Cancel** while in edit mode is possible using respective toolbar icon in grid. Deletion of the record is possible by selecting the required row and click on **Delete** button in the toolbar.
-You can start the edit action either by double-clicking the particular row or by selecting the required row and click on the **Edit** button in the toolbar. Similarly, you can add a new record to DataGrid either by clicking on **Add** button in the toolbar or on an external button which is bound to invoke the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord) method of the DataGrid, **Save** and **Cancel** while in edit mode is possible using the respective toolbar icon in DataGrid.
+To learn about what are all the edit modes and edit types are available in Blazor DataGrid, you can check on this video
-Deletion of the record is possible by selecting the required row and click on **Delete** button in the toolbar.
+{% youtube
+"youtube:https://www.youtube.com/watch?v=jOiZpLexDB0"%}
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
+@using BlazorApp1.Data
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
-
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
-}
-```
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
+ }
-The following screenshot represents Editing with Default Mode.
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhziWBvqbwIbFth?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> * Grid uses `Activator.CreateInstance()` to generate a new record when an insert operation is invoked, so it must have a parameterless constructors defined for the model class and any referenced complex type classes. To provide custom logic for object creation during editing, you can refer [here](#provide-new-item-or-edited-item-using-events).
- * If [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) is enabled, then it will be considered as a read-only column when editing and adding a record.
- * You can disable editing for a particular column by specifying
-[AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) to **false**.
- * You can disable adding for a particular column by specifying
-[AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) to **false**.
- * You can disable editing of a record on double click by specifying
-[EditSettings.AllowEditOnDblClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditOnDblClick) to **false**.
+> * If [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) is enabled, then it will be considered as a read-only column when editing and adding a record.
+> * You can disable editing for a particular column, by specifying [Columns.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) to **false**.
+> * You can use the **Insert** key to add a new row to the grid and use the **Delete** key to delete the selected row from the grid.
## Toolbar with edit option
-The datagrid toolbar has the following built-in items to execute editing actions.
+The toolbar with edit option feature in the DataGrid component provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes various items for executing editing actions. This feature allows you to easily perform edit operations on the grid data, such as modifying cell values, updating changes, and canceling edits.
-* Add - Adds a new record.
-* Edit - Edits the selected record.
-* Update - Updates the edited record.
-* Delete - Deletes the selected record.
-* Cancel - Cancels the edit state.
+To enable this feature, you need to configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the DataGrid component. This property allows you to define the items that will be displayed in the grid toolbar. By including the relevant items like **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `Toolbar` property, you can enable the edit options in the toolbar.
-You can define this by using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property.
+Here’s an example of how to enable the toolbar with edit option in the DataGrid:
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
+@using BlazorApp1.Data
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+namespace BlazorApp1.Data
+{
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
+ }
- public class Order {
- public int? OrderID { get; set; }
+ public int OrderID { get; set; }
public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
+ public string ShipName { get; set; }
public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
}
-```
-The following screenshot represents Toolbar with Edit option.
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrfMiVbAESNqmNd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Default column values on adding new record
+## Disable editing for particular column
-The datagrid provides an option to set the default value for the columns when adding a new record in it. To set a default value for a particular column you need to define it in the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
+In Grid component, you have an option to disable editing for a specific column. This feature is useful when you want to prevent editing certain columns, such as columns that contain calculated values or read-only data.
-The following sample code demonstrates setting default value as **ANTON** to the **CustomerID** column,
+To disable editing for a particular column, you can use the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property of the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object. By setting this property to **false**, you can prevent editing for that specific column.
-```cshtml
-@using Syncfusion.Blazor.Grids
+Here’s an example that demonstrates how to disable editing for the column in the Grid:
-
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using BlazorApp1.Data
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List Orders { get; set; }
+ public SfGrid Grid;
+ public string SelectedColumn { get; set; } = "OrderID";
+ public bool option { get; set; } = true;
+
+ public class ColumnOption
+ {
+ public string Field { get; set; }
+ public string HeaderText { get; set; }
+ }
+
+ List ColumnsList = new List
+ {
+ new ColumnOption { Field = "OrderID", HeaderText = "Order ID" },
+ new ColumnOption { Field = "CustomerID", HeaderText = "Customer ID" },
+ new ColumnOption { Field = "Freight", HeaderText = "Freight" },
+ new ColumnOption { Field = "OrderDate", HeaderText = "Order Date" },
+ new ColumnOption { Field = "ShipCountry", HeaderText = "Ship Country" }
+ };
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders = OrderData.GetAllRecords();
+ }
+ private void OnColumnSelectionChange(ChangeEventArgs args)
+ {
+ SelectedColumn = args.Value;
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public class Order
+ public static List GetAllRecords()
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
}
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-The following image represents the default value displayed in the **CustomerID** column while adding a new record in DataGrid,
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTMWBYiLcvZECc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+> * If you have set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property to **true** for a column, editing will be automatically disabled for that column.
+> * You can disable the particular row using [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event.
+> * You can disable the particular cell using [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event.
-## Disable editing for particular column
+## Editing template column
+
+The editing template column feature in the Grid allows you to create custom editing templates for specific columns in the grid. This feature is particularly useful when you need to customize the editing experience for certain columns, such as using custom input controls or displaying additional information during editing.
-You can disable editing for particular columns by setting value as **false** to the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
+To enable the editing template column feature, you need to define the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property for the specific column in the grid’s configuration. The `Field` property maps the column to the corresponding field name in the data source, allowing you to edit the value of that field.
-The following sample code demonstrates editing disabled for the **CustomerID** column,
+In the below demo, the ShipCountry column is rendered with the template.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Inputs
+@using BlazorApp1.Data
-
-
+
+
+
-
-
-
-
+
+
+
+
+
+ @{
+ var Order = (context as OrderData);
+
+ }
+
+
-@code{
- public List Orders { get; set; }
-
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
- public class Order
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-N> Similarly [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding) property at the column level helps us to disable the particular column from inserting value to it.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLTiMVEWAvGBnfF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-The following screenshot represents the editing disabled for the **CustomerID** column in DataGrid,
+## Customize delete confirmation dialog
-
+Customizing the delete confirmation dialog in Grid allows you to personalize the appearance, content, and behavior of the dialog that appears when you attempts to delete an item. You can modify properties like header, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog.
-## Disable editing for a particular row or cell
+To customize the delete confirmation dialog, you can use the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid. This event lets you cancel the default delete behavior and show a custom confirmation dialog, allowing users to confirm or cancel the delete action.
-Specific rows can be disabled from editing using the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid based on the `RequestType` as `BeginEdit`.
+>* Enable delete functionality in the Grid using [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html).
+>* Use a [SfDialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) to create a custom confirmation dialog.
+>* Handle the `OnActionBegin` event to cancel the default delete action and show the custom dialog.
+>* Perform the delete operation programmatically if the user confirms the action.
-In the following sample, the rows that have the value for the ShipCountry column as "RUSSIA" are prevented from being edited by updating the `Cancel` argument of the `OnActionBegin` event to true.
+The following example that demonstrates how to customize the delete confirmation dialog using the custom dialog:
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
-
-
-
-
+@using Syncfusion.Blazor.Popups
+@using BlazorApp1.Data
+
+
+
+
+ Delete Confirmation Dialog
+
+ Are you sure you want to delete the selected Record?
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ SfGrid Grid;
+ SfDialog Dialog;
+ public List Orders { get; set; }
+ public object SelectedData;
+ public bool DialogVisible { get; set; } = false;
+ public bool flag = true;
- private void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs args)
- {
- if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
- {
- if (args.RowData.ShipCountry == "RUSSIA")
- {
- args.Cancel = true;
- }
- }
+ // Reset flag when the dialog is closed
+ public void Closed()
+ {
+ flag = true;
}
-
- protected override void OnInitialized()
+ // Trigger dialog visibility during delete action
+ public void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs Args)
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ if (Args.RequestType.ToString() == "Delete" && flag)
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ Args.Cancel = true; // Cancel the default delete action
+ flag = false;
+ DialogVisible = true; // Show the dialog
+ }
}
- public class Order
+ // Confirm delete action
+ private async Task OkClick()
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ await Grid.DeleteRecordAsync(); // Delete the record programmatically
+ DialogVisible = false; // Hide the dialog
}
-}
-```
-N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-disable-editing-for-particular-row)
-
-Use the Grid's [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnCellEdit) event to disable a specific cell when editing in batch mode.
-
-In the following sample, the cells that have the value for the ShipCountry column as "INDIA" are prevented from being edited by updating the `Cancel` argument of the `OnCellEdit` event to true.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List Orders { get; set; }
- public void OnCellEdit(CellEditArgs args)
+ // Cancel delete action
+ private void CancelClick()
{
- if (args.RowData.ShipCountry == "INDIA" && args.ColumnName == "ShipCountry") {
- args.Cancel = true;
- }
+ DialogVisible = false; // Hide the dialog
}
+
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
- }
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ Orders = OrderData.GetAllRecords();
}
}
-```
-
-N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-disable-editing-for-particular-cell)
-## Adding a new row at the bottom of the datagrid
-
-By default, a new row will be added at the top of the datagrid. You can change it by setting [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component as **Bottom**.
-
-The following sample code demonstrates changing the position of the new row that gets added in the DataGrid component,
-
-```cshtml
-@using Syncfusion.Blazor.Grids
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
-
-
-
-
-
-
-
-
-
+ public OrderData() { }
-@code{
- public List Orders { get; set; }
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
+ }
- protected override void OnInitialized()
+ public static List GetAllRecords()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ if (Orders.Count == 0)
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
}
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-```
-
-The following image represents the new row added at the bottom of the DataGrid,
-
-
+{% endhighlight %}
+{% endtabs %}
-## Troubleshoot: Editing works only for first row
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVTWsLIKoaZlyNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-The Editing functionalities can be performed based on the primary key value of the selected row. If **PrimaryKey** is not defined in the datagrid, the edit or delete action is performed in the first row.
-
-## Event trace while editing
-
-While editing operation is getting executed the following events will be notified,
-
-* OnActionBegin
-* OnActionComplete
+## Update boolean column value with a single click
-In both of these events, the type of editing operation is returned in the **RequestType** parameter of the event arguments. In addition, the event arguments return the edited row data.
+The Syncfusion Grid allows you to update a boolean column value with a single click in the normal mode of editing. This feature streamlines the process of toggling boolean values within the grid, enhancing interaction and efficiency. This can be achieved through the use of the column template feature.
-The **RequestType** values for the editing operations are listed in the below table,
+In the following sample, the [CheckBox](https://blazor.syncfusion.com/documentation/check-box/getting-started-with-web-app) component is rendered as a template in the **Verified** column to make it editable with a single click.
-| RequestType | OnActionBegin | OnActionComplete |
-|----------|---------------|---------------|
-| BeginEdit | Before editing operation begins | After editing operation is completed |
-| Add | Before add operation begins | After add operation is completed |
-| Delete | Before delete operation begins | After delete operation is completed |
-| Save | Before save operation begins | After save operation is completed |
-| Cancel | Before cancel operation begins | After cancel operation is completed |
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Inputs
+@using BlazorApp1.Data
-The following sample code demonstrates the different **RequestType** parameters returned while performing editing operations in the OnActionBegin and OnActionComplete events,
+
-```cshtml
-@using Syncfusion.Blazor.Grids
+
-
-
-
+
-
-
-
-
+
+
+
+
+
+
+ @{
+ var Order = (context as OrderData);
+
+ }
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public OrderData() { }
- public void ActionBegin(ActionEventArgs args)
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
- {
- // Triggers before editing operation starts
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)
- {
- // Triggers before add operation starts
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Cancel)
- {
- // Triggers before cancel operation starts
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
- {
- // Triggers before save operation starts
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
- {
- // Triggers before delete operation starts
- }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public void ActionComplete(ActionEventArgs args)
+ public static List GetAllRecords()
{
- if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
- {
- // Triggers once editing operation completes
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)
- {
- // Triggers once add operation completes
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Cancel)
- {
- // Triggers once cancel operation completes
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
- {
- // Triggers once save operation completes
- }
- else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
+ if (Orders.Count == 0)
{
- // Triggers once delete operation completes
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
}
+ return Orders;
}
-}
-```
-## Perform CRUD operation for complex object using EditTemplate
-
-Before performing CRUD operations with complex Objects, it is recommended to go through the [Complex DataBinding](https://blazor.syncfusion.com/documentation/datagrid/columns#complex-data-binding) documentation.
-
-To customize the default Grid EditForm TextBox component, we will use [EditTemplate](https://blazor.syncfusion.com/documentation/datagrid/editing#cell-edit-template) to customize the Grid EditForm.
-
-You can edit the complex objects using EditTemplate inside the GridColumn component by defining two-way (**@bind-Value**) binding to reflect the changes in DataGrid.
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
-For focus and Column Validation to work properly, you have to define the **ID** property EditTemplate components with a value similar to GridColumn Field property value.
+## Edit enum column
-N> Also, ensure to define **ID** property for the complex column as (`___`) replacing the (`.`) operator in the Field value.
+The Syncfusion® Grid provides a feature that allows you to edit enum type data in a grid column. This is particularly useful when you need to edit enumerated list data efficiently.
-The following sample code demonstrates the CRUD operation for complex objects with EditTemplate.
+In the following example, the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the **Employee Feedback** column. The enumerated list data can be bound to the **Employee Feedback** column using the two-way binding (@bind-Value).
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.DropDowns
-
-
+
+
+
-
-
+
+
+
@{
-
-
+ var Order = (context as EmployeeDetails);
+
+
}
-
-
- @{
-
-
-
- }
-
-
-
@code{
- public List Employees { get; set; }
-
- protected override void OnInitialized()
+ SfDropDownList DropDownList;
+ public List DropDownEnumValue = new List();
+ public enum Feedback
{
- Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()
- {
- CustomerID = x,
- Data = new EmployeeName()
- {
- FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
- EmployeeID = 1000 + x
- },
- Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",
- "Inside Sales Coordinator" })[new Random().Next(4)],
- }).ToList();
+ Positive = 0,
+ Negative = 1
}
- public class EmployeeData
+ public class EmployeeDetails
{
- public int? CustomerID { get; set; }
- public EmployeeName Data { get; set; }
- public string Title { get; set; }
- }
- public class EmployeeName
+ public int Id { get; set; }
+ public string CustomerID { get; set; }
+ public Feedback FeedbackDetails { get; set; }
+
+ }
+ protected override void OnInitialized()
{
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
+ foreach (string item in Enum.GetNames(typeof(Feedback)))
+ {
+ DropDownEnumValue.Add(item);
+ }
}
+ public List Details = Enumerable.Range(1, 8).Select(x => new EmployeeDetails()
+ {
+ Id = x,
+ CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "PETER", "BLOP", "CHRISTN" })[new Random().Next(8)],
+ FeedbackDetails = Feedback.Positive,
+ }).ToList();
}
-```
+{% endhighlight %}
+{% endtabs %}
-## Performing CRUD operations programmatically
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfsihYMwfNqnqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-You can perform CRUD operations like **Add**, **Update**, **Delete** by using the [AddRecord](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecord), [UpdateRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRow_System_Double__0_), [DeleteRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRow_System_Object_) methods.
+## Edit complex column
-* **AddRecord** - Add a new record into the datagrid.
-* **UpdateRow** - Update an existing record in a datagrid.
-* **DeleteRow** - Delete a selected row from the datagrid.
+The edit template for complex column in Grid is used to customize the editing experience when dealing with complex data structures. This capability is particularly useful for handling nested data objects within grid columns. By default, the grid binds complex data to column fields using the dot (.) operator. However, when you render custom elements, such as input fields, in the edit template for a complex column, you must use the (___) underscore operator instead of the dot (.) operator to bind the complex object.
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
+In the following sample, the input element is rendered in the edit template of the FirstName and LastName column. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName column, The `Name` property should be defined as **Name__FirstName and Name__LastName**, respectively, instead of using the dot notation (**Name.FirstName and Name.LastName**).
- Add
- Update - 1001
- Delete the selected row
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Inputs
+@using BlazorApp1.Data
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-@code{
- public List Orders { get; set; }
- SfGrid Grid;
+@code {
+ public List Employees { get; set; }
- public async Task Add()
+ protected override void OnInitialized()
{
- Order adddata = new Order()
- {
- OrderID = 1000,
- CustomerID = "MJDGX",
- ShipCountry = "LONDON",
- Freight = 3.01
- };
- await this.Grid.AddRecord(adddata);
+ Employees = EmployeeDetails.GetAllRecords();
}
+}
- public async Task Update()
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+namespace BlazorApp1.Data
+{
+ public class EmployeeDetails
{
- Order data = new Order() { OrderID = 1001, CustomerID = "ABCDE", ShipCountry = "LONDON", Freight = 2.91 };
- await this.Grid.UpdateRow(1, data);
- }
+ public EmployeeDetails() { }
- public async Task Delete()
- {
- await this.Grid.DeleteRecord();
- }
+ public EmployeeDetails(int employeeID, string firstName, string lastName, string title)
+ {
+ EmployeeID = employeeID;
+ Name = new Name { FirstName = firstName, LastName = lastName };
+ Title = title;
+ }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ public static List GetAllRecords()
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ return new List
+ {
+ new EmployeeDetails(1, "Nancy", "Davolio", "Sales Representative"),
+ new EmployeeDetails(2, "Andrew", "Fuller", "Vice President, Sales"),
+ new EmployeeDetails(3, "Janet", "Leverling", "Sales Manager"),
+ new EmployeeDetails(4, "Margaret", "Peacock", "Inside Sales Coordinator"),
+ new EmployeeDetails(5, "Steven", "Buchanan", "Sales Representative"),
+ new EmployeeDetails(6, "Michael", "Suyama", "Marketing Coordinator"),
+ new EmployeeDetails(7, "Robert", "King", "Sales Representative"),
+ new EmployeeDetails(8, "Laura", "Callahan", "Marketing Specialist"),
+ new EmployeeDetails(9, "Anne", "Dodsworth", "Sales Manager"),
+ new EmployeeDetails(10, "Andrew", "Davies", "Vice President, Operations")
+ };
+ }
+
+ public int EmployeeID { get; set; }
+ public Name Name { get; set; }
+ public string Title { get; set; }
}
- public class Order
+ public class Name
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ public string FirstName { get; set; }
+ public string LastName { get; set; }
}
}
-```
+{% endhighlight %}
+{% endtabs %}
-The following GIF represents the datagrid with Add, Update, Delete items,
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLpWBZBCPEnQmvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+## Edit foreign key column
-## Perform CRUD operation using Grid events
+The Syncfusion® Grid offers a powerful editing feature for foreign key columns, enhancing the default rendering of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component during editing. This flexibility is particularly useful when you need to customize the editor for foreign key columns. By default, the Syncfusion® Grid renders the DropDownList component as the editor for foreign key columns during editing. However, you can enhance and customize this behavior by leveraging the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the GridColumn. The `EditTemplate` allows you to specify a cell edit template that serves as an editor for a particular column, accepting either a template string or an HTML element ID.
-IQueryable data can be bound directly to Grid component from database without using Data Adaptors. IQueryable data bound to Grid component using DataSource property of SfGrid. While binding the Data to Grid component using **DataSource** property, CRUD actions need to be handled using Grid Action Events (i.e., using **OnActionBegin** and **OnActionComplete** events of Grid).
+In the following code example, the Employee Name is a foreign key column. When editing, the [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) component is rendered instead of DropDownList.
-### Create an interface layer to the database
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using BlazorApp1.Data
-Create an interface with CRUD methods like below based on your model class.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-```csharp
-using System.Collections.Generic;
-using System.Linq;
+@code {
+ public List Orders { get; set; }
+ public List Employees { get; set; }
-namespace LibraryManagement.Models
-{
- interface ILibraryService
+ protected override void OnInitialized()
{
- IQueryable GetBooks();
- void InsertBook(Book employee);
- void UpdateBook(long id, Book employee);
- Book SingleBook(long id);
- void DeleteBook(long id);
+ Employees = EmployeeData.GetAllRecords();
+ Orders = OrderData.GetAllRecords();
}
}
-```
-
-### Create an intermediate service using the interface
-
-By inheriting the interface, create a new service to retrieve the data from database and perform CRUD operation. Refer the below demonstration.
-
-```csharp
-using Microsoft.EntityFrameworkCore;
-using System.Linq;
-
-namespace LibraryManagement.Models
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+namespace BlazorApp1.Data
{
- public class LibraryService : ILibraryService
+ public class OrderData
{
- private LibraryContext _context;
- public LibraryService(LibraryContext context)
- {
- _context = context;
- }
+ public static List Orders = new List();
- public void DeleteBook(long id)
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- try
- {
- Book ord = _context.Books.Find(id);
- _context.Books.Remove(ord);
- _context.SaveChanges();
- }
- catch
- {
- throw;
- }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public IQueryable GetBooks()
+ public static List GetAllRecords()
{
- try
+ if (Orders.Count == 0)
{
- return _context.Books.AsQueryable();
- }
- catch
- {
- throw;
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "India", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "India", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
}
+ return Orders;
}
- public void InsertBook(Book book)
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeData.cs" %}
+namespace BlazorApp1.Data
+{
+ public class EmployeeData
+ {
+ public static List Employees = new List();
+
+ public EmployeeData() { }
+
+ public EmployeeData(int EmployeeID, string FirstName, string LastName, string Title, string Country, string City, DateTime HireDate )
{
- try
- {
- _context.Books.Add(book);
- _context.SaveChanges();
- }
- catch
- {
- throw;
- }
+ this.EmployeeID = EmployeeID;
+ this.FirstName = FirstName;
+ this.LastName = LastName;
+ this.Title = Title;
+ this.Country = Country;
+ this.City = City;
+ this.HireDate = HireDate;
}
- public void UpdateBook(long id, Book book)
+
+ public static List GetAllRecords()
{
- try
+ if (Employees.Count == 0)
{
- var local = _context.Set().Local.FirstOrDefault(entry => entry.Id.Equals(book.Id));
- // check if local is not null
- if (local != null)
+ var firstNames = new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" };
+ var lastNames = new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" };
+ var titles = new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", "Inside Sales Coordinator" };
+ var countries = new string[] { "USA", "UK", "UAE", "NED", "BER" };
+ var cities = new string[] { "New York", "London", "Dubai", "Amsterdam", "Berlin" };
+ var customerNames = new string[] { "Amazon", "Google", "Microsoft", "Tesla", "Apple" };
+
+ Random random = new Random();
+ for (int i = 1; i <= 5; i++)
{
- // detach
- _context.Entry(local).State = EntityState.Detached;
+ Employees.Add(new EmployeeData(
+ i,
+ firstNames[random.Next(firstNames.Length)],
+ lastNames[random.Next(lastNames.Length)],
+ titles[random.Next(titles.Length)],
+ countries[random.Next(countries.Length)],
+ cities[random.Next(cities.Length)],
+ DateTime.Now.AddDays(-random.Next(1000, 5000)),
+ ));
}
- _context.Entry(book).State = EntityState.Modified;
- _context.SaveChanges();
- }
- catch
- {
- throw;
}
+ return Employees;
}
+
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+ public string LastName { get; set; }
+ public string Title { get; set; }
+ public string Country { get; set; }
+ public string City { get; set; }
+ public DateTime HireDate { get; set; }
}
}
-```
-
-### Configure the DataGrid component to perform CRUD actions using Grid events
-
-Since data is bound to Grid using DataSource property, CRUD actions will be reflected at Grid component level only. To reflect the changes in database, you need to handle the changes in Grid action events.
-
-**OnActionBegin** – This event will be triggered when the action gets initiated. So, while inserting/updating a record, **RequestType Save** will be sent in the event arguments to save the changes in the database. Similarly, while deleting a record, RequestType as Delete will be initiated to perform actions externally. Since for both Update and Insert action, RequestType will be Save, you can differentiate them by using the **Args.Action** property, which will indicate the current action.
-**OnActionComplete** – It will be triggered when certain actions are completed. Here, you can refresh the Grid component with an updated datasource to reflect the changes.
-```cshtml
-@using LibraryManagement.Models
-@inject ILibraryService LibraryService
+{% endhighlight %}
+{% endtabs %}
-
-
-
-
-
-
-
-
-
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrfsBZACuuzbDIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-@code
-{
- public IQueryable LibraryBooks { get; set; }
- protected override void OnInitialized()
- {
- LibraryBooks = LibraryService.GetBooks();
- }
- public void ActionBeginHandler(ActionEventArgs Args)
- {
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))
- {
- if (Args.Action == "Add")
- {
- LibraryService.InsertBook(Args.Data);
- }
- else
- {
- LibraryService.UpdateBook(Args.Data.Id, Args.Data);
- }
- }
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Delete))
- {
- LibraryService.DeleteBook(Args.Data.Id);
- }
- }
- public void ActionCompleteHandler(ActionEventArgs Args)
- {
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))
- {
- LibraryBooks = LibraryService.GetBooks(); //to fetch the updated data from db to Grid
- }
- }
-}
-```
+## How to perform CRUD action externally
-N> Find the sample from this [Github](https://github.com/SyncfusionExamples/blazor-server-datagrid-efcore-crud/) location.
+Performing CRUD (Create, Read, Update, Delete) actions externally in the Syncfusion® Grid allows you to manipulate grid data outside the grid itself. This can be useful in scenarios where you want to manage data operations programmatically.
-## Cancel CRUD operation by using condition
+### Using separate toolbar
-You can cancel the default CRUD operation by specifying Args.Cancel as true based on the corresponding Args.RequestType values.
+The Syncfusion® Grid enables external CRUD operations, allowing you to efficiently manage data manipulation within the grid. This capability is particularly useful when you need to manage data operations using a separate toolbar.
-### Cancel CRUD operation for Normal/Dialog edit mode
+To perform CRUD operations externally, the following methods are available:
-For Normal/Dialog edit mode, you have to specify Args.Cancel as true in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event.
+* [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync) - To add a new record. If no data is passed then add form will be shown.
+* [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) - To edit the selected row.
+* [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) - To delete a selected row.
+* [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) - If the grid is in editable state, then you can save a record by invoking this method.
+* [CloseEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEditAsync) - To cancel the edited state.
-```csharp
+The following example demonstrates the integration of the Syncfusion® Grid with a separate toolbar for external CRUD operations. The toolbar contains buttons for Add, Edit, Delete, Update, and Cancel.
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Navigations
+@using BlazorApp1.Data
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-@code{
- public List Orders { get; set; }
- public void ActionBeginHandler(ActionEventArgs Args)
+@code {
+
+ public List Orders { get; set; }
+ SfGrid Grid { get; set; }
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+ public async Task OnClicked(ClickEventArgs Args)
{
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit) && Args.Data.OrderID > 1050)
+ if (Args.Item.Text == "Add")
{
- Args.Cancel = true;
+ await Grid.AddRecordAsync();
}
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && Args.Action == "Edit" && Args.Data.OrderID > 1010)
+ if (Args.Item.Text == "Edit")
{
- Args.Cancel = true;
+ await Grid.StartEditAsync();
}
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && Args.Action == "Add" && Args.Data.OrderID > 1100)
+ if (Args.Item.Text == "Delete")
{
- Args.Cancel = true;
+ await Grid.DeleteRecordAsync();
}
- if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Delete))
+ if (Args.Item.Text == "Update")
{
- Args.Cancel = true;
+ await Grid.EndEditAsync();
}
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ if (Args.Item.Text == "Cancel")
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
- }
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ await Grid.CloseEditAsync();
+ }
}
}
-```
-### Cancel CRUD operation for Batch edit mode
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
-For Batch edit mode, you have to specify Args.Cancel as true in the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit)/[OnBatchDelete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchDelete)/[OnCellSave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellSave) events based on the corresponding CRUD operation.
+ public OrderData() { }
-```csharp
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
+ }
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List Orders { get; set; }
- public void OnCellEdit(CellEditArgs Args)
+ public static List GetAllRecords()
{
- if (Args.ColumnName == "CustomerID" && Args.Data.OrderID > 1010)
+ if (Orders.Count == 0)
{
- //Cancel the Edit Operation.
- Args.Cancel = true;
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
}
+ return Orders;
}
- public void BatchDeleteHandler(BeforeBatchDeleteArgs Args)
- {
- if (Args.RowData.OrderID > 1010)
- {
- //Cancel the Delete Operation.
- Args.Cancel = true;
- }
- }
- public void OnCellSave(CellSaveArgs Args)
- {
- if (Args.ColumnName == "ShipCountry" && Args.Data.OrderID > 1005)
- {
- //Cancel the Update Operation.
- Args.Cancel = true;
- }
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
- }
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-## Performing CRUD operation by using separate toolbar
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzirZhqEaHrapA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-You can perform the CRUD operation externally by using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync), [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync), [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync), [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync), and [CloseEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEditAsync) methods.
+### Using external form
-* `AddRecordAsync` - To add a new record. If no data is passed then add form will be shown.
-* `StartEditAsync` - To edit the selected row.
-* `DeleteRecordAsync` - To delete a selected row.
-* `EndEditAsync` - If the grid is in editable state, then you can save a record by invoking this method.
-* `CloseEditAsync` - To cancel the edited state.
+Performing the edit operation in a custom external form in the Syncfusion® Grid is a valuable feature when you need to customize the edit operation within a separate form rather than the default in-grid editing.
-```csharp
+To enable the use of an external form for editing in Syncfusion® Grid, you can make use of the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) property. This property specifies whether the edit operation should be triggered when a row is selected.
-@using Syncfusion.Blazor.Navigations
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- SfGrid Grid { get; set; }
- public List Orders { get; set; }
- public async Task OnClicked(ClickEventArgs Args)
- {
- if (Args.Item.Text == "Add")
- {
- await Grid.AddRecordAsync();
- }
- if (Args.Item.Text == "Edit")
- {
- await Grid.StartEditAsync();
- }
- if (Args.Item.Text == "Delete")
- {
- await Grid.DeleteRecordAsync();
- }
- if (Args.Item.Text == "Update")
- {
- await Grid.EndEditAsync();
- }
- if (Args.Item.Text == "Cancel")
- {
- await Grid.CloseEditAsync();
- }
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-## Custom external form editing
-
-You can perform the edit operation of Datagrid in a Custom external form. The edit operation can be done by [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) property.
-
-```csharp
+In the following example, it demonstrates how to edit the form using an external form by utilizing the `RowSelected` property:
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Buttons
+@using BlazorApp1.Data
-
-
+
+
-
+
-
+
-
+
-
+
+ Save
- Save
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-@code{
- public List Orders { get; set; }
- SfGrid Grid;
- public Order SelectedProduct = new Order();
+
+
+@code {
+ public List Orders { get; set; }
+ SfGrid Grid { get; set; }
public class Country
{
public string ShipCountry { get; set; }
}
+ public OrderData SelectedProduct = new OrderData();
List Dropdown = new List
-{
- new Country() { ShipCountry= "USA" },
- new Country() { ShipCountry= "UK" },
- new Country() { ShipCountry= "RUSSIA" },
- new Country() { ShipCountry= "INDIA" },
- new Country() { ShipCountry= "CHINA" },
+ {
+ new Country() { ShipCountry= "France" },
+ new Country() { ShipCountry= "Germany" },
+ new Country() { ShipCountry= "India" },
+ new Country() { ShipCountry= "Switzerland" },
+ new Country() { ShipCountry= "Belgium" },
};
async Task Save()
{
- await this.Grid.UpdateRow(1, SelectedProduct);
+ await this.Grid.UpdateRowAsync(1, SelectedProduct);
+ }
+ public void RowSelectHandler(RowSelectEventArgs args)
+ {
+ SelectedProduct = args.Data;
}
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
- public class Order
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public void RowSelectHandler(RowSelectEventArgs args)
+ public static List GetAllRecords()
{
- SelectedProduct = args.Data;
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
}
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzMhZrzICSfxBH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-The following GIF represent the datagrid with Custom External form editing,
+## Troubleshoot editing works only for first row
-
+The Editing functionalities can be performed based upon the primary key value of the selected row. If [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is not defined in the grid, then edit or delete action take places the first row. To overcome this, ensure that you establish the `IsPrimaryKey` property as **true** for the relevant column responsible for holding the unique identifier for each row.
+
+## How to make a grid column always editable
-## Use edit template in foreign key column
+To make a Grid column always editable, you can utilize the column template feature of the Grid. This feature is useful when you want to edit a particular column's values directly within the grid.
-By default, the foreign key column renders the DropDownList component as an editor component while editing. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox component in the foreign column.
+In the following example, the [SfTextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started-webapp) is rendered in the **Freight** column using a column template. The edited changes are saved in the data source using the two-way binding(@bind-Value) of the `SfTextBox` component.
-In the following code example, the Employee Name is a foreign key column. When editing, the ComboBox component is rendered instead of DropDownList.
-
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Inputs
+@using BlazorApp1.Data
-
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-@code{
- public List Orders { get; set; }
- public List Employees { get; set; }
-
+@code {
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- EmployeeID = x,
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
-
- Employees = Enumerable.Range(1, 75).Select(x => new EmployeeData()
- {
- EmployeeID = x,
- FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
- }).ToList();
+ Orders = OrderData.GetAllRecords();
}
- public class Order
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public class EmployeeData
+ public static List GetAllRecords()
{
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
}
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-## Edit enum column
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVACDDzLCOPwlKE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-You can edit the enum type data in the grid column using the Edit Template feature of the Grid.
+## Use different EditMode for Add/Edit action
-In the following sample, the `SfDropDownList` component is rendered in the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the Employee Feedback column. The enumerated list data can be bound to the Employee Feedback column using the two-way binding (**@bind-Value**).
+You can dynamically customize the [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html) for Add or Edit actions in the Syncfusion® Grid using the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event. Based on the [RequestType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_RequestType), set the `EditMode` to either [Dialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#Syncfusion_Blazor_Grids_EditMode_Dialog) or [Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#Syncfusion_Blazor_Grids_EditMode_Normal). For instance, Add actions can use `Dialog` mode while Edit actions use `Normal` mode.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.DropDowns
+@using BlazorApp1.Data
-
-
-
+
+
+ @if (IsDialogEditMode)
+ {
+
+ }
+ else
+ {
+
+ }
-
-
-
-
- @{
- var Order = (context as EmployeeDetails);
-
-
- }
-
-
+
+
+
+
+
-@code{
- SfDropDownList DropDownList;
- public List DropDownEnumValue = new List();
- public enum Feedback
+@code {
+ SfGrid Grid;
+ public bool IsDialogEditMode { get; set; }
+ public List Orders { get; set; }
+
+ public void OnActionBegin(ActionEventArgs args)
{
- Positive = 0,
- Negative = 1
+ if (args.RequestType.ToString() == "BeginEdit")
+ {
+ IsDialogEditMode = false;
+ }
+ else if (args.RequestType.ToString() == "Add")
+ {
+ IsDialogEditMode = true;
+ }
}
-
- public class EmployeeDetails
+ public void OnActionComplete(ActionEventArgs args)
+ {
+ if (args.RequestType.ToString() == "Add" || args.RequestType.ToString() == "BeginEdit")
+ {
+ args.PreventRender = false;
+ }
+ }
+ protected override void OnInitialized()
{
+ Orders = OrderData.GetAllRecords();
+ }
+}
- public int Id { get; set; }
- public string CustomerID { get; set; }
- public Feedback FeedbackDetails { get; set; }
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- protected override void OnInitialized()
+
+ public static List GetAllRecords()
{
- foreach (string item in Enum.GetNames(typeof(Feedback)))
+ if (Orders.Count == 0)
{
- DropDownEnumValue.Add(item);
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
}
+ return Orders;
}
- public List Details = Enumerable.Range(1, 8).Select(x => new EmployeeDetails()
- {
- Id = x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "PETER", "BLOP", "CHRISTN" })[new Random().Next(8)],
- FeedbackDetails = Feedback.Positive,
- }).ToList();
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJCBNUKGtrqxql?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Use different EditMode for Add/Edit action
+## Event trace while editing
+
+When performing editing operations in the Syncfusion® Blazor Grid, two primary events are triggered:
+
+* [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin)
+* [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete)
-Customize the EditMode for add and edit actions as `Dialog` or `Normal` based on the RequestType value in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event.
+These events notify the application about the execution of different editing actions. The type of editing operation is returned in the [RequestType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_RequestType) parameter within the event arguments. Additionally, the event arguments also include the edited row data.
+
+| RequestType | OnActionBegin | OnActionComplete |
+|----------|---------------|---------------|
+| BeginEdit | Before editing operation begins | After editing operation is completed |
+| Add | Before add operation begins | After add operation is completed |
+| Delete | Before delete operation begins | After delete operation is completed |
+| Save | Before save operation begins | After save operation is completed |
+| Cancel | Before cancel operation begins | After cancel operation is completed |
-This is demonstrated in the following sample code:
+The following sample code demonstrates the different **RequestType** parameters returned while performing editing operations in the `OnActionBegin` and `OnActionComplete` events,
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@page "/"
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Inputs
+@using BlazorApp1.Data
-
-
- @if (EditModeSelection)
- {
-
- }
- else
- {
-
- }
+
@actionBeginMessage
+
@actionCompleteMessage
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+@code {
+ public List Orders { get; set; }
+ string actionBeginMessage = "";
+ string actionCompleteMessage = "";
-@code{
- SfGrid Grid;
- public bool EditModeSelection { get; set; }
- public List Orders { get; set; }
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
- public void OnActionBegin(ActionEventArgs args)
+ public void ActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs args)
{
- if (args.RequestType.ToString() == "BeginEdit")
+ if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
{
- EditModeSelection = false;
+ // Triggers before editing operation starts
}
- else if (args.RequestType.ToString() == "Add")
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)
+ {
+ // Triggers before add operation starts
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Cancel)
+ {
+ // Triggers before cancel operation starts
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
{
- EditModeSelection = true;
+ // Triggers before save operation starts
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
+ {
+ // Triggers before delete operation starts
}
+ actionBeginMessage = $"ActionBegin Event: Triggers when {args.RequestType.ToString()} operation starts.";
}
- public void OnActionComplete(ActionEventArgs args)
+
+ public void ActionComplete(Syncfusion.Blazor.Grids.ActionEventArgs args)
{
- if (args.RequestType.ToString() == "Add" || args.RequestType.ToString() == "BeginEdit")
+ if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
{
- args.PreventRender = false;
+ // Triggers once editing operation completes
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add)
+ {
+ // Triggers once add operation completes
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Cancel)
+ {
+ // Triggers once cancel operation completes
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
+ {
+ // Triggers once save operation completes
+ }
+ else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
+ {
+ // Triggers once delete operation completes
}
+ actionCompleteMessage = $"ActionComplete Event: Triggers when {args.RequestType.ToString()} operation completes.";
}
- protected override void OnInitialized()
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public class Order
+ public static List GetAllRecords()
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+ }
+ return Orders;
}
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBTWrDHUvvLUGmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Perform CRUD operation using Grid events
+
+The Syncfusion® Blazor Grid enables seamless CRUD (Create, Read, Update, Delete) operations directly with IQueryable data from a database without requiring additional data adaptors. This functionality can be implemented using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the SfGrid component and handling the necessary CRUD actions through Grid Action Events such as [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) and [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete).
+
+### Create an interface layer to the database
+
+Define the `Book` model class along with the `ILibraryService` interface. The Book model will represent the data structure for the books, and the `ILibraryService` interface will define the CRUD methods to interact with the database.
+
+**Book Model**
+The Book model represents the structure of a book in a library system. It includes essential properties such as Id, Name, Author, Quantity, Price, and Available.
+
+```cs
+public class Book
+{
+ public long Id { get; set; }
+ public string Name { get; set; } = null!;
+ public string Author { get; set; } = null!;
+ public int? Quantity { get; set; }
+ public int Price { get; set; }
+ public bool? Available { get; set; }
+}
```
+The `Book` class represents the structure of a book in the library, including properties like Id, Name, Author, Quantity, Price, and Available.
-N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-different-editmode-for-add-edit-action).
+**ILibraryService Interface**
-## Update boolean column value with a single click
+The `ILibraryService` interface declares the CRUD operations that interact with the database for managing `Book` data.
-You can make the boolean column editable with a single click in the normal mode of editing by using the column template feature of the Grid.
+```csharp
+using System.Collections.Generic;
+using System.Linq;
-In the following sample, the `SfCheckbox` component is rendered as a template in the Verified column to make it editable with a single click.
+namespace LibraryManagement.Models
+{
+ interface ILibraryService
+ {
+ IQueryable GetBooks();
+ void InsertBook(Book employee);
+ void UpdateBook(long id, Book employee);
+ Book SingleBook(long id);
+ void DeleteBook(long id);
+ }
+}
+```
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
+### Create an intermediate service using the interface
-
-
-
-