diff --git a/blazor/datagrid/column-validation.md b/blazor/datagrid/column-validation.md
index 054a0d9b98..e581cd2e49 100644
--- a/blazor/datagrid/column-validation.md
+++ b/blazor/datagrid/column-validation.md
@@ -7,52 +7,84 @@ control: DataGrid
documentation: ug
---
-# Column Validation in Blazor DataGrid Component
+# Validation in Blazor DataGrid component
-Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. DataGrid uses **Form Validator** library for column validation. You can set validation rules by defining the [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules).
+Validation is a crucial aspect of data integrity in any application. The Blazor Grid component in Syncfusion provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information.
-N> Validation in datagrid works based on the Microsoft Blazor EditForm behavior. So once the validation message is shown then it will be again validated only during the form submit or when you focus out from that particular field. Refer the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#data-annotations-validator-component-and-custom-validation) for further reference.
+## Column validation
-```cshtml
+Column validation allows you to validate the edited or added row data before saving it. This feature is particularly useful when you need to enforce specific rules or constraints on individual columns to ensure data integrity. By applying validation rules to columns, you can display error messages for invalid fields and prevent the saving of erroneous data. This feature leverages the **Form Validator** library to perform the validation. You can define validation rules using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property to specify the criteria for validating column values.
+
+> Validation in datagrid works based on the Microsoft Blazor EditForm behavior. So once the validation message is shown then it will be again validated only during the form submit or when you focus out from that particular field. Refer the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) for further reference.
+
+The following code example demonstrates how to define a validation rule for grid column:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
-
-
-
-
+
+
+
+
+
-
-@code{
- public List Orders { get; set; }
-
+@code {
+ public List OrderData { 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();
+ OrderData = OrderDetails.GetAllRecords();
}
-
- public class Order
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int OrderID, string CustomerID, double Freight, string ShipCountry, DateTime OrderDate)
{
- 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.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.OrderDate = OrderDate;
}
+ public static List GetAllRecords()
+ {
+ if (Order.Count == 0)
+ {
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", new DateTime(1996, 7, 4)));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", new DateTime(1996, 7, 5)));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", new DateTime(1996, 7, 8)));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", new DateTime(1996, 7, 8)));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", new DateTime(1996, 7, 9)));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", new DateTime(1996, 7, 10)));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", new DateTime(1996, 7, 11)));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", new DateTime(1996, 7, 12)));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", new DateTime(1996, 7, 15)));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", new DateTime(1996, 7, 16)));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", new DateTime(1996, 7, 17)));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", new DateTime(1996, 7, 18)));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", new DateTime(1996, 7, 19)));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", new DateTime(1996, 7, 19)));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", new DateTime(1996, 7, 22)));
+ }
+ return Order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public DateTime OrderDate { get; set; }
}
-```
-
-The following screenshot represents the Column Validation in Normal Editing.
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyjCrhrHDetIYc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Data annotation
@@ -66,161 +98,206 @@ More information on the data annotation can be found in this [documentation](htt
## Custom validation
-Custom Validation allows the users to customize the validations manually according to the user's criteria.
+Custom Validation allows the users to customize the validations manually according to the individuals criteria.
Custom Validation can be used by overriding the IsValid method inside the class inherits the Validation Attribute. All the validations are done inside the IsValid method.
-The following sample code demonstrates custom validations implemented in the fields EmployeeID and Freight.
+The following sample code demonstrates custom validations implemented in the fields **EmployeeID** and **Freight**.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids;
-@using System.ComponentModel.DataAnnotations;
-@using System.Text.RegularExpressions;
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-@code
-{
- List EmployeeList;
- string[] toolbar = new string[] { "Add", "Edit", "Delete", "Update", "Cancel" };
+@code{
+ public List OrderData { get; set; }
protected override void OnInitialized()
{
- base.OnInitialized();
- EmployeeList = Enumerable.Range(1, 20).Select(x => new EmployeeDetails()
- {
- OrderID = 10240 + x,
- CustomerName = new string[] { "VINET", "TOSMP", "HANAR", "VICTE" }[new Random().Next(4)],
- EmployeeID = x,
- Freight = new float[] { 32.28f, 22.90f, 30.99f, 50.52f }[new Random().Next(4)],
- ShipCity = new string[] { "Reims", "Munster", "Rio de Janeir", "Lyon" }[new Random().Next(4)],
- ShipName = new string[] { "Vins et alocools chevalie", "Toms Spezialitaten", "Hanari Carnes", "Supremes delices" }[new Random().Next(4)]
- }).ToList();
+ OrderData = OrderDetails.GetAllRecords();
}
- public class EmployeeDetails
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int OrderID, string CustomerID, double Freight, string ShipCountry, int EmployeeID)
{
- [Required]
- public int? OrderID { get; set; }
- public string CustomerName { get; set; }
- [CustomValidationEmployeeID]
- public int EmployeeID { get; set; }
- [CustomValidationFreight]
- public float Freight { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = EmployeeID;
}
- public class CustomValidationEmployeeID : ValidationAttribute
+ public static List GetAllRecords()
{
- protected override ValidationResult IsValid(object value, ValidationContext validationContext)
+ if (Order.Count == 0)
{
- if (value != null)
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", 5));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", 6));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", 4));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", 3));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", 4));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", 3));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", 5));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", 9));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", 3));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", 4));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", 1));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", 4));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", 4));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", 4));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", 8));
+ }
+ return Order;
+ }
+ [Required]
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ [CustomValidationFreight]
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ [CustomValidationEmployeeID]
+ public int EmployeeID { get; set; }
+}
+
+public class CustomValidationEmployeeID : ValidationAttribute
+{
+ protected override ValidationResult IsValid(object value, ValidationContext validationContext)
+ {
+ if (value != null)
+ {
+ int EmployeeIdValue = Convert.ToInt32(value);
+ if (EmployeeIdValue >= 1)
{
- int employeeID = Convert.ToInt16(value);
- if (employeeID >= 1)
- {
- return ValidationResult.Success;
- }
- else
- {
- return new ValidationResult("Employee ID value should be greater than zero");
- }
+ return ValidationResult.Success;
}
else
{
- return new ValidationResult("Employee ID value is required");
+ return new ValidationResult("Employee ID value should be greater than zero");
}
}
+ else
+ {
+ return new ValidationResult("Employee ID value is required");
+ }
}
- public class CustomValidationFreight : ValidationAttribute
+}
+
+public class CustomValidationFreight : ValidationAttribute
+{
+ protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
- protected override ValidationResult IsValid(object value, ValidationContext validationContext)
+ if (value != null)
{
- if (value != null)
+ double FreightValue = Convert.ToDouble(value);
+ if (FreightValue >= 1 && FreightValue <= 10000)
{
- float freight = (float)value;
- if (freight >= 1 && freight <= 10000)
- {
- return ValidationResult.Success;
- }
- else
- {
- return new ValidationResult("Freight value should between 1 and 10,000");
- }
+ return ValidationResult.Success;
}
else
{
- return new ValidationResult("Freight value is required");
+ return new ValidationResult("Freight value should be between 1 and 10,000");
}
}
+ else
+ {
+ return new ValidationResult("Freight value is required");
+ }
}
}
-```
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrojMBhUyZJfcXd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
### Validate complex column using data annotation attribute
-You can perform validation for complex data binding columns using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#data-annotations-validator-component-and-custom-validation) attribute of data annotation.
+You can perform validation for complex data binding columns using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute of data annotation.
In the following sample, you must use the `ValidateComplexType` attribute for the EmployeeName class and display custom message in the "First Name" column using the `RequiredAttribute` of data annotation.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using System.ComponentModel.DataAnnotations;
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Employees { get; set; }
-
+@code {
+ public List EmployeeData { get; set; }
protected override void OnInitialized()
{
- Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()
- {
- EmployeeID = x,
- Name = new EmployeeName() {
- FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
- LastName =(new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)]
- },
- Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",
- "Inside Sales Coordinator" })[new Random().Next(4)],
- }).ToList();
- }
+ EmployeeData = EmployeeDetails.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeDetails.cs" %}
+using System.ComponentModel.DataAnnotations;
- public class EmployeeData
+public class EmployeeDetails
+{
+ public static List Employees = new List();
+ public EmployeeDetails(int employeeID, string firstName, string lastName, string title)
{
- [Required]
- public int? EmployeeID { get; set; }
- [ValidateComplexType]
- public EmployeeName Name { get; set; }
- public string Title { get; set; }
+ EmployeeID = employeeID;
+ EmpDetails = new EmployeeInfo
+ {
+ FirstName = firstName,
+ LastName = lastName
+ };
+ Title = title;
}
-
- public class EmployeeName
+ public static List GetAllRecords()
{
- [Required(ErrorMessage ="First name should not be empty")]
- public string FirstName { get; set; }
- public string LastName { get; set; }
+ if (Employees.Count == 0)
+ {
+ Employees.Add(new EmployeeDetails(1, "Nancy", "Davolio", "Sales Representative"));
+ Employees.Add(new EmployeeDetails(2, "Andrew", "Fuller", "Vice President, Sales"));
+ Employees.Add(new EmployeeDetails(3, "Janet", "Leverling", "Sales Representative"));
+ Employees.Add(new EmployeeDetails(4, "Margaret", "Peacock", "Sales Representative"));
+ Employees.Add(new EmployeeDetails(5, "Steven", "Buchanan", "Sales Manager"));
+ Employees.Add(new EmployeeDetails(6, "Michael", "Suyama", "Sales Representative"));
+ Employees.Add(new EmployeeDetails(7, "Robert", "King", "Sales Representative"));
+ Employees.Add(new EmployeeDetails(8, "Laura", "Callahan", "Inside Sales Coordinator"));
+ Employees.Add(new EmployeeDetails(9, "Anne", "Dodsworth", "Sales Representative"));
+ }
+ return Employees;
}
+ [Required]
+ public int EmployeeID { get; set; }
+ [ValidateComplexType]
+ public EmployeeInfo EmpDetails { get; set; }
+ public string Title { get; set; }
}
-```
+public class EmployeeInfo
+{
+ [Required(ErrorMessage = "First name should not be empty")]
+ public string FirstName { get; set; }
+ public string LastName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
-> To include the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** for complex type validation
+> Ensure to include the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** for complex type validation using the following reference:
+``
@@ -228,7 +305,7 @@ In the following sample, you must use the `ValidateComplexType` attribute for th
Apart from using default validation and custom validation, there are cases where you might want to use your validator component to validate the grid edit form. Such cases can be achieved using the **Validator** property of the **GridEditSettings** component which accepts a validation component and inject it inside the **EditForm** of the grid. Inside the **Validator**, you can access the data using the implicit named parameter context which is of type [ValidatorTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html).
-For creating a form validator component you can refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#validator-components).
+For creating a form validator component you can refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-5.0#validator-components).
In the below code example, the following things have been done.
@@ -239,87 +316,74 @@ In the below code example, the following things have been done.
```csharp
[MyCustomValidator.cs]
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Syncfusion.Blazor.Grids;
- using Microsoft.AspNetCore.Components;
- using Microsoft.AspNetCore.Components.Forms;
- using Syncfusion.Blazor.Grids;
-
- public class MyCustomValidator : ComponentBase
+public class MyCustomValidator : ComponentBase
+{
+ [Parameter]
+ public ValidatorTemplateContext context { get; set; }
+ private ValidationMessageStore messageStore;
+ [CascadingParameter]
+ private EditContext CurrentEditContext { get; set; }
+ protected override void OnInitialized()
{
- [Parameter]
- public ValidatorTemplateContext context { get; set; }
-
- private ValidationMessageStore messageStore;
-
- [CascadingParameter]
- private EditContext CurrentEditContext { get; set; }
-
- protected override void OnInitialized()
- {
- messageStore = new ValidationMessageStore(CurrentEditContext);
+ messageStore = new ValidationMessageStore(CurrentEditContext);
- CurrentEditContext.OnValidationRequested += ValidateRequested;
- CurrentEditContext.OnFieldChanged += ValidateField;
- }
-
- protected void HandleValidation(FieldIdentifier identifier)
+ CurrentEditContext.OnValidationRequested += ValidateRequested;
+ CurrentEditContext.OnFieldChanged += ValidateField;
+ }
+ protected void HandleValidation(FieldIdentifier identifier)
+ {
+ if (identifier.FieldName.Equals("Freight"))
{
- if (identifier.FieldName.Equals("Freight"))
+ messageStore.Clear(identifier);
+ if ((context.Data as OrdersDetails).Freight < 0)
+ {
+ messageStore.Add(identifier, "Freight value should be greater than 0");
+ }
+ else if ((context.Data as OrdersDetails).Freight > 100)
+ {
+ messageStore.Add(identifier, "Freight value should be lesser than 100");
+ }
+ else
{
messageStore.Clear(identifier);
- if ((context.Data as OrdersDetails).Freight < 0)
- {
- messageStore.Add(identifier, "Freight value should be greater than 0");
- }
- else if ((context.Data as OrdersDetails).Freight > 100)
- {
- messageStore.Add(identifier, "Freight value should be lesser than 100");
- }
- else
- {
- messageStore.Clear(identifier);
- }
}
}
-
- protected void ValidateField(object editContext, FieldChangedEventArgs fieldChangedEventArgs)
- {
- HandleValidation(fieldChangedEventArgs.FieldIdentifier);
- }
-
- private void ValidateRequested(object editContext, ValidationRequestedEventArgs validationEventArgs)
- {
- HandleValidation(CurrentEditContext.Field("Freight"));
- }
-
}
+ protected void ValidateField(object editContext, FieldChangedEventArgs fieldChangedEventArgs)
+ {
+ HandleValidation(fieldChangedEventArgs.FieldIdentifier);
+ }
+ private void ValidateRequested(object editContext, ValidationRequestedEventArgs validationEventArgs)
+ {
+ HandleValidation(CurrentEditContext.Field("Freight"));
+ }
+}
```
```csharp
[Index.razor]
-
-
-
- @{
- ValidatorTemplateContext txt = context as ValidatorTemplateContext;
- }
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ @{
+ ValidatorTemplateContext txt = context as ValidatorTemplateContext;
+ }
+
+
+
+
+
+
+
+
+
@code{
-
private List GridData;
-
protected override void OnInitialized()
{
Random r = new Random();
@@ -332,7 +396,6 @@ In the below code example, the following things have been done.
}
```
-
## Display validation message using in-built tooltip
@@ -341,57 +404,51 @@ In the above code example, you can see that **ValidationMessage** component is u
Now the HandleValidation method of the MyCustomValidator component would be changed like below.
-```csharp
-
- protected void HandleValidation(FieldIdentifier identifier)
+```c#
+protected void HandleValidation(FieldIdentifier identifier)
+{
+ if (identifier.FieldName.Equals("Freight"))
+ {
+ messageStore.Clear(identifier);
+ if ((context.Data as OrdersDetails).Freight < 0)
{
- if (identifier.FieldName.Equals("Freight"))
- {
- messageStore.Clear(identifier);
- if ((context.Data as OrdersDetails).Freight < 0)
- {
- messageStore.Add(identifier, "Freight value should be greater than 0");
- context.ShowValidationMessage("Freight", false, "Freight value should be greater than 0");
- }
- else if ((context.Data as OrdersDetails).Freight > 100)
- {
- messageStore.Add(identifier, "Freight value should be lesser than 100");
- context.ShowValidationMessage("Freight", false, "Freight value should be lesser than 100");
- }
- else
- {
- messageStore.Clear(identifier);
- context.ShowValidationMessage("Freight", true, null);
- }
- }
+ messageStore.Add(identifier, "Freight value should be greater than 0");
+ context.ShowValidationMessage("Freight", false, "Freight value should be greater than 0");
}
-
+ else if ((context.Data as OrdersDetails).Freight > 100)
+ {
+ messageStore.Add(identifier, "Freight value should be lesser than 100");
+ context.ShowValidationMessage("Freight", false, "Freight value should be lesser than 100");
+ }
+ else
+ {
+ messageStore.Clear(identifier);
+ context.ShowValidationMessage("Freight", true, null);
+ }
+ }
+}
```
-
## Disable in-built validator component
**Validator** property can also be used to disable the in-built validator component used by the grid. For instance, by default, the grid uses two validator components, **DataAnnotationValidator** and an internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property handling validator, for handling edit form validation. If you are willing to use only the **DataAnnotationValidator** component, then it could be simply achieved by using the below code.
-```cshtml
-
-
-
-
-
-
-
-
-
-
-
+```c#
+
+
+
+
+
+
+
+
+
+
+
@code{
-
private List GridData;
-
protected override void OnInitialized()
{
Random r = new Random();
@@ -410,113 +467,180 @@ Use the form validation to display a validation message for a column that is not
Use the **Validator** property to display a validation message for one of the fields in the dialog template that is not defined in the Grid column. The validation message for the **ShipAddress** is displayed in the dialog template in the following example. In the grid column, the **ShipAddress** field is not defined.
-N> The validation message for fields that are not defined in the grid column will be shown as the validation summary (top of the dialog edit form) in the dialog edit form.
+> The validation message for fields that are not defined in the grid column will be shown as the validation summary (top of the dialog edit form) in the dialog edit form.
-N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template).
-
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using System.ComponentModel.DataAnnotations
-
-
+
+
@{
- var Order = (context as OrdersDetails);
+ var Order = (context as OrderDetails);
+
+
+
+
+
-
-
+
-
-
-
-
+
+
-
-
+
-
-
+
+
-
-
+
-
-
+
-
-
+
-
+
}
-
-
-
-
-
+
+
+
+
+
@code{
- public List GridData = new List
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
{
- new OrdersDetails() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-2), ShipName = "Vins et alcools Chevalier", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
- new OrdersDetails() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-5), ShipName = "Toms Spezialitäten", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
- new OrdersDetails() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-12), ShipName = "Hanari Carnes", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" },
- new OrdersDetails() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, ShipCity = "Marseille", OrderDate = DateTime.Now.AddDays(-18), ShipName = "Victuailles en stock", ShipCountry = "Austria", ShipAddress = "Magazinweg 7" },
- new OrdersDetails() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-22), ShipName = "Suprêmes délices", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
- new OrdersDetails() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-26), ShipName = "Hanari Carnes", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
- new OrdersDetails() { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-34), ShipName = "Chop-suey Chinese", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
- new OrdersDetails() { OrderID = 10255, CustomerID = "RICSU", Freight = 148.33, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-39), ShipName = "Richter Supermarket", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
- new OrdersDetails() { OrderID = 10256, CustomerID = "WELLI", Freight = 13.97, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-43), ShipName = "Wellington Importadora", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
- new OrdersDetails() { OrderID = 10257, CustomerID = "HILAA", Freight = 81.91, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-48), ShipName = "HILARION-Abastos", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" }
- };
-
- public class OrdersDetails
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public class City
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public double? Freight { get; set; }
public string ShipCity { get; set; }
- public DateTime OrderDate { get; set; }
- public string ShipName { get; set; }
- [Required]
+ }
+ List CityName = new List
+ {
+ new City() { ShipCity= "Reims" },
+ new City() { ShipCity= "Münster" },
+ new City() { ShipCity = "Rio de Janeiro" },
+ new City() { ShipCity = "Lyon" },
+ new City() { ShipCity = "Charleroi" },
+ new City() { ShipCity = "Genève" },
+ new City() { ShipCity = "Resende" },
+ new City() { ShipCity = "San Cristóbal" },
+ new City() { ShipCity = "Graz" },
+ new City() { ShipCity = "México D.F." },
+ new City() { ShipCity = "Köln" },
+ new City() { ShipCity = "Albuquerque" },
+ };
+ public class Country
+ {
public string ShipCountry { get; set; }
- [Required]
- public string ShipAddress { get; set; }
}
+ List CountryName = new List
+ {
+ new Country() { ShipCountry= "France"},
+ new Country() { ShipCountry= "Brazil"},
+ new Country() { ShipCountry= "Germany"},
+ new Country() { ShipCountry= "Belgium"},
+ new Country() { ShipCountry= "Austria"},
+ new Country() { ShipCountry= "Switzerland"},
+ new Country() { ShipCountry= "Venezuela"},
+ new Country() { ShipCountry= "Mexico"},
+ new Country() { ShipCountry= "USA"},
+ };
}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int orderID, string customerId, double freight, string shipCountry, string shipName, string shipCity, string shipAddress, DateTime orderDate)
+ {
+ OrderID = orderID;
+ CustomerID = customerId;
+ Freight = freight;
+ ShipCountry = shipCountry;
+ ShipName = shipName;
+ ShipCity = shipCity;
+ ShipAddress = shipAddress;
+ OrderDate = orderDate;
+ }
+ public static List GetAllRecords()
+ {
+ if (Order.Count == 0)
+ {
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", "Vins et alcools Chevalier", "Reims", "59 rue de l Abbaye", new DateTime(1996, 7, 4)));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", "Toms Spezialitäten", "Münster", "Luisenstr. 48", new DateTime(1996, 7, 5)));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", "Hanari Carnes", "Rio de Janeiro", "Rua do Paço, 67", new DateTime(1996, 7, 8)));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", "Victuailles en stock", "Lyon", "2, rue du Commerce", new DateTime(1996, 7, 8)));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", "Suprêmes délices", "Charleroi", "Boulevard Tirou, 255", new DateTime(1996, 7, 9)));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", "Hanari Carnes", "Rio de Janeiro", "Rua do Paço, 67", new DateTime(1996, 7, 10)));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", "Chop-suey Chinese", "Bern", "Hauptstr. 31", new DateTime(1996, 7, 11)));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", "Richter Supermarkt", "Genève", "Starenweg 5", new DateTime(1996, 7, 12)));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", "Wellington Importadora", "Resende", "Rua do Mercado, 12", new DateTime(1996, 7, 15)));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", "HILARION-Abastos", "San Cristóbal", "Carrera 22 con Ave. Carlos Soublette #8-35", new DateTime(1996, 7, 16)));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", "Ernst Handel", "Graz", "Kirchgasse 6", new DateTime(1996, 7, 17)));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", "Centro comercial Moctezuma", "México D.F.", "Sierras de Granada 9993", new DateTime(1996, 7, 18)));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", "Ottilies Käseladen", "Köln", "Mehrheimerstr. 369", new DateTime(1996, 7, 19)));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", "Que Delícia", "Rio de Janeiro", "Rua da Panificadora, 12", new DateTime(1996, 7, 19)));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", "Rattlesnake Canyon Grocery", "Albuquerque", "2817 Milton Dr.", new DateTime(1996, 7, 22)));
+ }
+ return Order;
+ }
+ [Range(1, int.MaxValue, ErrorMessage = "Order ID must be greater than 0")]
+ public int OrderID { get; set; }
+ [StringLength(5, MinimumLength = 3, ErrorMessage = "CustomerID must be between 3 and 5 characters long.")]
+ public string CustomerID { get; set; }
+ [Range(0, double.MaxValue, ErrorMessage = "Freight must be a positive value")]
+ public double Freight { get; set; }
+ [Required]
+ public string ShipCountry { get; set; }
+ [Required]
+ public string ShipName { get; set; }
+ [Required]
+ public string ShipCity { get; set; }
+ [Required]
+ public string ShipAddress { get; set; }
+ [Required]
+ public DateTime OrderDate { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBoZChqfqyraNHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template).
\ No newline at end of file
diff --git a/blazor/datagrid/command-column-editing.md b/blazor/datagrid/command-column-editing.md
index 2487254d22..27cd0171c0 100644
--- a/blazor/datagrid/command-column-editing.md
+++ b/blazor/datagrid/command-column-editing.md
@@ -7,11 +7,13 @@ control: DataGrid
documentation: ug
---
-# Command Column Editing in Blazor DataGrid Component
+# Command column editing in Blazor DataGrid component
-The command column provides an option to add CRUD action buttons in a column. This can be defined by using the `GridCommandColumns` component which needs to be wrapped inside the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
+The command column editing feature allows you to add CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows.This feature is commonly used when you need to enable inline editing, deletion, or saving of row changes directly within the grid.
-The available built-in command buttons are:
+To enable command column editing, you can utilize the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. By defining this property, you can specify the command buttons to be displayed in the command column, such as Edit, Delete, Save, and Cancel.
+
+The available built-in command buttons are:
| Command Button | Actions |
|----------------|---------|
@@ -20,16 +22,19 @@ The available built-in command buttons are:
| Save | Update the edited row.|
| Cancel | Cancel the edited state. |
-```cshtml
+Here's an example that demonstrates how to add CRUD action buttons in a column using the `GridCommandColumns` property:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
-
-
-
-
+
+
+
+
@@ -41,94 +46,162 @@ The available built-in command buttons are:
-@code{
- public List Orders { get; set; }
-
+@code {
+ public List OrderData { 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),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ OrderData = OrderDetails.GetAllRecords();
}
-
- public class Order
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
{
- 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; }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
}
+ public static List GetAllRecords()
+ {
+ if (Order.Count == 0)
+ {
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil"));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland"));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland"));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil"));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela"));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria"));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico"));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany"));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil"));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA"));
+ }
+ return Order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-The following screenshot represents the command column.
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVyZWBVCmUhlVYq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Custom command column
-The custom command buttons can be added in a column by using the [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property of the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html) component and the action for the custom buttons can be defined in the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event.
+The custom command column feature in the Grid component allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row.
+
+To add custom command buttons in a column, you can utilize the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Furthermore, you can define the actions associated with these custom buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event.
-The following sample code demonstrates adding custom command in the **Manage Records** column and the `CommandClicked` event which triggers when the command is clicked,
+Here's an example that demonstrates how to add custom command buttons using the `GridCommandColumns` property and customize the button click behavior to display grid details in a dialog using the `CommandClicked` event:
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Popups
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-@code{
- public List Orders { get; set; }
-
+
+
+
+ @if (selectedRecord != null)
+ {
+
ShipName: @selectedRecord.ShipName
+
ShipPostalCode: @selectedRecord.ShipPostalCode
+
ShipAddress: @selectedRecord.ShipAddress
+ }
+
+
+
+
+@code {
+ public List OrderData { 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),
- ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
- }).ToList();
+ OrderData = OrderDetails.GetAllRecords();
}
-
- public class Order
+ private SfDialog Dialog;
+ private string DialogHeader;
+ private OrderDetails selectedRecord;
+ private void CommandClickedHandler(CommandClickEventArgs args)
{
- 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; }
+ selectedRecord = args.RowData;
+ DialogHeader="Row Information of " + selectedRecord.OrderID;
+ Dialog.ShowAsync();
}
-
- public void OnCommandClicked(CommandClickEventArgs args)
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry, string ShipName, string ShipPostalCode, string ShipAddress)
{
- // Perform required operations here
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipName = ShipName;
+ this.ShipPostalCode = ShipPostalCode;
+ this.ShipAddress = ShipAddress;
}
+ public static List GetAllRecords()
+ {
+ if (Order.Count == 0)
+ {
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France", "Vins et alcools Chevalier", "51100", "59 rue de l Abbaye"));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", "Toms Spezialitäten", "44087", "Luisenstr. 48"));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", "Hanari Carnes", "05454-876", "Rua do Paço, 67"));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", "Victuailles en stock", "69004", "2, rue du Commerce"));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", "Suprêmes délices", "B-6000", "Boulevard Tirou, 255"));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", "Hanari Carnes", "05454-876", "Rua do Paço, 67"));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", "Chop-suey Chinese", "3012", "Hauptstr. 31"));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", "Richter Supermarkt", "1204", "Starenweg 5"));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", "Wellington Importadora", "08737-363", "Rua do Mercado, 12"));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", "HILARION-Abastos", "5022", "Carrera 22 con Ave. Carlos Soublette #8-35"));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", "Ernst Handel", "8010", "Kirchgasse 6"));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", "Centro comercial Moctezuma", "05022", "Sierras de Granada 9993"));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", "Ottilies Käseladen", "50739", "Mehrheimerstr. 369"));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", "Que Delícia", "02389-673", "Rua da Panificadora, 12"));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", "Rattlesnake Canyon Grocery", "87110", "2817 Milton Dr."));
+ }
+ return Order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipName { get; set; }
+ public string ShipPostalCode { get; set; }
+ public string ShipAddress { get; set; }
}
-```
-
-The following image represents the custom command added in the **Manage Records** column of the DataGrid component,
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> The Grid component does not support adding a new record using the command column. Because, the command column, along with the command buttons, will be rendered only after the record is created. As a result, Grid only supported edit, delete, cancel, and update options in the command column.
\ No newline at end of file
+> The Grid component does not support adding a new record using the command column. Because, the command column, along with the command buttons, will be rendered only after the record is created. As a result, Grid only supported edit, delete, cancel, and update options in the command column.
\ No newline at end of file
diff --git a/blazor/datagrid/entity-frame-work.md b/blazor/datagrid/entity-frame-work.md
deleted file mode 100644
index 6ab9595b27..0000000000
--- a/blazor/datagrid/entity-frame-work.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-layout: post
-title: Entity Framework in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Entity Framework in Syncfusion Blazor DataGrid component and much more details.
-platform: Blazor
-control: DataGrid
-documentation: ug
----
-
-# Entity Framework in Blazor DataGrid Component
-
-This section uses and follows the code explained in the [Entity Framework data binding](./data-binding/#entity-framework) section. Hence, we recommend you to refer Entity Framework data binding section before continuing this section.
-
-## Handle CRUD in data access layer class
-
-Now, add methods **AddOrder**, **UpdateOrder**, and **DeleteOrder** in the **"OrderDataAccessLayer.cs"** to handle the insert, update, and remove operations respectively. **CRUD** record details are bound to the **Order** parameter. Refer the following code.
-
-```csharp
-using Microsoft.EntityFrameworkCore;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using EFGrid.Shared.Models;
-
-namespace EFGrid.Shared.DataAccess
-{
- public class OrderDataAccessLayer
- {
- OrderContext db = new OrderContext();
- public DbSet GetAllOrders()
- {
- try
- {
- return db.Orders;
- }
- catch
- {
- throw;
- }
- }
- public void AddOrder(Order Order)
- {
- try
- {
- db.Orders.Add(Order);
- db.SaveChanges();
- }
- catch
- {
- throw;
- }
- }
- public void UpdateOrder(Order Order)
- {
- try
- {
- db.Entry(Order).State = EntityState.Modified;
- db.SaveChanges();
- }
- catch
- {
- throw;
- }
- }
- public void DeleteOrder(int id)
- {
- try
- {
- Order ord = db.Orders.Find(id);
- db.Orders.Remove(ord);
- db.SaveChanges();
- }
- catch
- {
- throw;
- }
- }
- }
-}
-```
-
-## Enable CRUD in web API
-
-Now, you have to create a new **Post**, **Put**, **Delete** method in the Web API controller which will perform the CRUD operations and returns the appropriate resultant data. The **'SfDataManager'** will make requests to this action based on route name.
-
-```csharp
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.Extensions.Primitives;
-using EFGrid.Shared.DataAccess;
-using EFGrid.Shared.Models;
-
-namespace WebApplication1.Server.Controllers
-{
- [Route("api/[controller]")]
- [ApiController]
- public class DefaultController : ControllerBase
- {
- OrderDataAccessLayer db = new OrderDataAccessLayer();
- [HttpGet]
- public object Get()
- {
-
- IQueryable data = db.GetAllOrders().AsQueryable();
- var count = data.Count();
- var queryString = Request.Query;
- if (queryString.Keys.Contains("$inlinecount"))
- {
- StringValues Skip;
- StringValues Take;
- int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
- int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
- return new { Items = data.Skip(skip).Take(top), Count = count };
- }
- else
- {
- return data;
- }
- }
- [HttpGet("{id}", Name = "Get")]
- public string Get(int id)
- {
- return "value";
- }
- [HttpPost]
- public void Post([FromBody]Order Order)
- {
-
- Random rand = new Random();
- db.AddOrder(Order);
-
- }
- [HttpPut]
- public object Put([FromBody]Order Order)
- {
- db.UpdateOrder(Order);
- return Order;
- }
- [HttpDelete("{id}")]
- public void Delete(int id)
- {
- db.DeleteOrder(id);
- }
- }
-}
-```
-
-## Configure the datagrid to perform CRUD operations
-
-```cshtml
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-N>You can find the fully working sample [here](https://github.com/ej2gridsamples/Blazor/blob/master/EntityFramework.zip).
\ No newline at end of file
diff --git a/blazor/datagrid/images/blazor-datagrid-command-column.png b/blazor/datagrid/images/blazor-datagrid-command-column.png
deleted file mode 100644
index 7e28af1bb3..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-command-column.png and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-custom-command.png b/blazor/datagrid/images/blazor-datagrid-custom-command.png
deleted file mode 100644
index 09e2f71b9d..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-custom-command.png and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-display-validation-in-dialog-template.png b/blazor/datagrid/images/blazor-datagrid-display-validation-in-dialog-template.png
deleted file mode 100644
index a9453744e2..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-display-validation-in-dialog-template.png and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-validation-in-editing.png b/blazor/datagrid/images/blazor-datagrid-validation-in-editing.png
deleted file mode 100644
index f283f407f7..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-validation-in-editing.png and /dev/null differ