diff --git a/blazor/datagrid/images/blazor-datagrid-delete-confirm-dialog.gif b/blazor/datagrid/images/blazor-datagrid-delete-confirm-dialog.gif deleted file mode 100644 index c23207d8a7..0000000000 Binary files a/blazor/datagrid/images/blazor-datagrid-delete-confirm-dialog.gif and /dev/null differ diff --git a/blazor/datagrid/images/blazor-datagrid-normal-editing.png b/blazor/datagrid/images/blazor-datagrid-normal-editing.png deleted file mode 100644 index 8e92b31a1e..0000000000 Binary files a/blazor/datagrid/images/blazor-datagrid-normal-editing.png and /dev/null differ diff --git a/blazor/datagrid/images/show-add-new-row.gif b/blazor/datagrid/images/show-add-new-row.gif deleted file mode 100644 index 3348ac2f72..0000000000 Binary files a/blazor/datagrid/images/show-add-new-row.gif and /dev/null differ diff --git a/blazor/datagrid/in-line-editing.md b/blazor/datagrid/in-line-editing.md index 3c44c16459..00df016194 100644 --- a/blazor/datagrid/in-line-editing.md +++ b/blazor/datagrid/in-line-editing.md @@ -7,181 +7,864 @@ control: DataGrid documentation: ug --- -# Inline Editing in Blazor DataGrid Component +# Inline editing in Blazor DataGrid component -In Normal edit mode, when you start editing the currently selected record is changed to edit state. You can change the cell values and save edited data to the data source. To enable the Normal edit, set the [EditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) as **Normal**. +The Blazor DataGrid component provides a powerful in-line editing feature that allows you to edit cell values of row directly within the grid. This feature is especially useful when you want to quickly modify data without the need for a separate edit form. In normal edit mode, the selected record is changed to an edit state, and you can modify the cell values and save the edited data to the data source. -```cshtml +To enable in-line editing in the grid component, you need to set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property of the Grid's configuration to **Normal**. This property determines the editing mode of the Grid. + +{% 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() + OrderData = OrderDetails.GetAllRecords(); + } +} +{% 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) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.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), - ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)] - }).ToList(); + 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 %} - public class Order +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhTWVWxfiLoTefJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * Normal edit mode is default mode of editing. +> * When enabling editing, it is necessary to set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property value to **true** for the unique column. + +## Automatically update a specific column based on another column edited value + +You can automatically update the value of a column based on the edited value of another column using Cell Edit Template feature. This feature is useful when you want to dynamically calculate and update a column's value in real-time based on changes made to another related column. + +You can update the column value based on another column’s edited value in normal mode by using the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) and the [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the Grid. + +In the following example, the **TotalCost** column value is updated based on changes to the **UnitPrice** and **UnitInStock** columns during normal editing. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs + + + + + + + + + + + @{ + var Data = context as ProductDetails; + + + + } + + + + + @{ + var Data = context as ProductDetails; + + + + } + + + + + @{ + + + } + + + + + +@code { + private SfGrid Grid; + SfNumericTextBox UnitPriceReference; + SfNumericTextBox UnitsInStockReference; + public double TotalValue { get; set; } + public List ProductData { get; set; } + protected override void OnInitialized() { - 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; } + ProductData = ProductDetails.GetAllRecords(); + } + public async Task UpdateHandler(RowUpdatingEventArgs args) + { + args.Data.TotalCost = TotalValue; + } + public async Task EditHandler(RowEditedEventArgs args) + { + TotalValue = args.Data.TotalCost; + } + private void ValueChangeHandler() + { + TotalValue = Convert.ToDouble(UnitPriceReference.Value * UnitsInStockReference.Value); + Grid.PreventRender(false); } } -``` +{% endhighlight %} +{% highlight c# tabtitle="ProductDetails.cs" %} +public class ProductDetails +{ + public static List Products = new List(); + public ProductDetails(int productID, string productName, double unitPrice, double unitsInStock, double totalCost) + { + this.ProductID = productID; + this.ProductName = productName; + this.UnitPrice = unitPrice; + this.UnitsInStock = unitsInStock; + this.TotalCost = totalCost; + } + public static List GetAllRecords() + { + if (Products.Count == 0) + { + Products.Add(new ProductDetails(1, "Chai", 18.0, 39, 702)); + Products.Add(new ProductDetails(2, "Chang", 19.0, 17, 323)); + Products.Add(new ProductDetails(3, "Aniseed Syrup", 10.0, 13, 130)); + Products.Add(new ProductDetails(4, "Chef Anton's Cajun Seasoning", 22.0, 53, 1166)); + Products.Add(new ProductDetails(5, "Chef Anton's Gumbo Mix", 21.35, 0, 0)); + Products.Add(new ProductDetails(6, "Chef Anton's Gumbo", 23.35, 0, 0)); + Products.Add(new ProductDetails(7, "Chef Anton's Mix", 25.35, 0, 0)); + Products.Add(new ProductDetails(8, "Chef Gumbo Mix", 27.39, 0, 0)); + } + return Products; + } + public int ProductID { get; set; } + public string ProductName { get; set; } + public double UnitPrice { get; set; } + public double UnitsInStock { get; set; } + public double TotalCost { get; set; } +} +{% endhighlight %} +{% endtabs %} -The following screenshot represents Editing in Normal Mode. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJMhsGhTuTRXHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor DataGrid with Normal Editing](./images/blazor-datagrid-normal-editing.png) +## Cancel edit based on condition -N> Normal edit mode is the default mode of editing. +The grid provides the ability to cancel the edit operations for particular row or cell based on specific conditions. This feature allows you to control over whether editing should be allowed or prevented for certain rows or cells in the grid. -## Provide new item or edited item using events +To cancel the edit operation based on a specific condition, you can handle the following events of grid component. These events are triggered when a CRUD (Create, Read, Update, Delete) operation is performed in the grid. -Grid uses `Activator.CreateInstance()` to create or clone new record instance during add and edit operations, so it must have parameterless constructors defined for the model class and any referenced complex type classes. +1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before an add action is executed in the grid. -There are cases where custom logic is required for creating new object or new object instance cannot be created using `Activator.CreateInstance()`. In such cases you can provide model object instance manually using events. +2. [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered before a delete action is executed in the grid. -You can use OnActionBegin event to provide new object instance during editing operation. The new object should be assigned to the `OnActionBegin.Data` property. +3. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an edit action is executed in the grid. -In the following example: +By applying your desired condition, you can cancel the edit, delete, or add operation by setting the args.Cancel property to **true**. -* A model class with no parameter-less constructor is bound with the grid. -* Enabled inline editing feature in grid. -* `OnActionBegin` event callback is assigned in which `Data` property is assigned with custom object for both add and edit operation. +In the below demo, prevent the CRUD operation based on the **Role** column value. If the Role Column is **Admin**, then edit/delete action is prevented for that row. -```csharp +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons - - + + + + - - - - + + + + - @code { - - List Orders { get; set; } - + private string Content => IsAddable ? "Grid is Addable" : "Grid is Not Addable"; + private bool IsAddable = true; + public List EmployeeData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 10).Select(x => new Order(1000 + x) + EmployeeData = EmployeeDetails.GetAllRecords(); + } + public void RowAddingHandler(RowCreatingEventArgs args) + { + if (!IsAddable) { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", - "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x, - OrderDate = (new DateTime[] { new DateTime(2019, 01, 01), new DateTime(2019, 01, 02) })[new Random().Next(2)] - }).ToList(); + args.Cancel = true; + } } - - public void ActionBegin(ActionEventArgs arg) + public void RowEditingHandler(RowEditingEventArgs args) { - //Handles add operation - if (arg.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add)) + if (args.Data.Role == "Admin") { - arg.Data = new Order(0) { CustomerID = "Customer ID" }; + args.Cancel = true; } + } + public void RowDeletingHandler(RowDeletingEventArgs args) + { + if (args.Datas[0].Role == "Admin") + { + args.Cancel = true; + } + } + public void ToggleGridAddability() + { + IsAddable = !IsAddable; + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} +public class EmployeeDetails +{ + public static List Employees = new List(); + public EmployeeDetails(int employeeID, string employeeName, string role, string employeeCountry) + { + this.EmployeeID = employeeID; + this.EmployeeName = employeeName; + this.Role = role; + this.EmployeeCountry = employeeCountry; + } + public static List GetAllRecords() + { + if (Employees.Count == 0) + { + Employees.Add(new EmployeeDetails(1, "Davolio", "Admin", "France")); + Employees.Add(new EmployeeDetails(2, "Buchanan", "Employee", "Germany")); + Employees.Add(new EmployeeDetails(3, "Fuller", "Admin", "Brazil")); + Employees.Add(new EmployeeDetails(4, "Leverling", "Manager", "France")); + Employees.Add(new EmployeeDetails(5, "Peacock", "Manager", "Belgium")); + Employees.Add(new EmployeeDetails(6, "Janet", "Admin", "Brazil")); + Employees.Add(new EmployeeDetails(7, "Suyama", "Employee", "Switzerland")); + Employees.Add(new EmployeeDetails(8, "Robert", "Admin", "Switzerland")); + Employees.Add(new EmployeeDetails(9, "Andrew", "Employee", "Brazil")); + Employees.Add(new EmployeeDetails(14, "Michael", "Admin", "Venezuela")); + Employees.Add(new EmployeeDetails(11, "Ana Trujillo", "Manager", "Austria")); + Employees.Add(new EmployeeDetails(10, "Antonio Moreno", "Manager", "Mexico")); + Employees.Add(new EmployeeDetails(12, "VICTE", "Admin", "Germany")); + Employees.Add(new EmployeeDetails(13, "Christina Berglund", "Manager", "Brazil")); + Employees.Add(new EmployeeDetails(15, "Hanna Moos", "Employee", "USA")); + } + return Employees; + } + public int EmployeeID { get; set; } + public string EmployeeName { get; set; } + public string Role { get; set; } + public string EmployeeCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBfWhsbiluKzXeX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Perform CRUD action programmatically + +Performing CRUD actions programmatically refers to the ability to create, read, update, and delete data in a system or application using code instead of manual user interaction. + +* To add a new record to the Grid, use the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. In this method, you can pass the **data** parameter to add a new record to the Grid, and the **index** parameter to add a record at a specific index. If you call this method without any parameters, it will create an empty row in the Grid. If an index is not specified, the newly added record will be displayed at the zeroth index. + +* To change the selected row to the edit state, use the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method. Before invoking this method, it is necessary to select a row in the grid. + +* If you need to update the row data in the Grid’s data source, you can use the [UpdateRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRowAsync_System_Int32__0_) method. In this method, you need to pass the **index** value of the row to be updated along with the updated **data**. + +* If you need to update the particular cell in the row, you can use the [SetCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetCellValueAsync_System_Object_System_String_System_Object_) method. In this method, you need to pass the primary key value of the data source, field name, and new value for the particular cell. When using this method, any changes made to a cell will only be reflected visually in the UI of Grid alone, not persisted or saved in the underlying data source. This method is commonly employed for unbound columns, such as auto-calculated columns or formula columns, where the values are derived or computed based on other data within the Grid or external calculations. By using this method, you can update the visual representation of these unbound columns without modifying the actual data source. + +* To remove a selected row from the Grid, use the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method. For both edit and delete operations, you must select a row first. + +> In both normal and dialog editing modes, these methods can be used. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ + + + + +
+ + + + + + + + + - //Handles edit operation. During edit operation, original object will be cloned. - if (arg.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit)) +@code { + public SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public async Task GridAddAction() + { + var newRecord = new OrderDetails( + new Random().Next(100000), + GenerateCustomerId(), + GenerateShipCity(), + GenerateShipName() + ); + await Grid.AddRecordAsync(newRecord); + } + public async Task GridEditAction() + { + await Grid.StartEditAsync(); + } + public async Task GridDeleteAction() + { + await Grid.DeleteRecordAsync(); + } + public async Task UpdateRowAction() + { + var UpdatedData = new OrderDetails(10248, "RTER", "America", "Hanari"); + await Grid.UpdateRowAsync(0, UpdatedData); + } + public async Task UpdateCellAction() + { + var firstRecord = Grid.CurrentViewData.FirstOrDefault(); + if (firstRecord != null) { - arg.Data = new Order(arg.RowData.OrderID) + if (firstRecord is OrderDetails record) { - CustomerID = arg.RowData.CustomerID, - Freight = arg.RowData.Freight, - OrderDate = arg.RowData.OrderDate - }; + await Grid.SetCellValueAsync(record.OrderID, "CustomerID", "Value Changed"); + } + } + } + private string GenerateCustomerId() + { + const string characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + var random = new Random(); + return new string(Enumerable.Repeat(characters, 5).Select(s => s[random.Next(s.Length)]).ToArray()); + } + private string GenerateShipCity() + { + var cities = new[] { "London", "Paris", "New York", "Tokyo", "Berlin" }; + return cities[new Random().Next(cities.Length)]; + } + private string GenerateShipName() + { + var names = new[] { "Que Delícia", "Bueno Foods", "Island Trading", "Laughing Bacchus Winecellars" }; + return names[new Random().Next(names.Length)]; + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + Order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + Order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + Order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + Order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + Order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + Order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + Order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} - // This class does not contain any parameter-less constructor, hence this cannot be instantiated using Activator.CreateInstance. - public class Order - { - public Order(int? orderid) => OrderID = orderid; +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBTWrWOgendnpyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Show confirmation dialog while deleting - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } +Displaying a confirmation dialog adds an extra layer of confirmation when deleting a record from the grid. This dialog prompts for confirmation before proceeding with the deletion, ensuring that accidental or undesired deletions are avoided. The deletion can proceed only if the decision is certain. The grid component provides a built-in confirmation dialog that can be used to confirm a deleting action. + +To enable the confirmation dialog for the delete operation in the Grid, you can set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property of the `GridEditSettings` configuration to **true**. By default, this property is set to **false**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ + +
+ + + + + + + + + + +@code { + public bool DeleteConfirmDialog { get; set; } = false; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + DeleteConfirmDialog = args.Checked; + } +} +{% 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) + { + 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 %} -``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBfiLsFpKplAfEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> The `ShowDeleteConfirmDialog` property supports all type of edit modes. -## Confirmation dialog +## Display default value for columns while adding -The delete confirms dialog can be shown on deleting a record by setting the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property of the [GridEditSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component as **true**. +This feature is useful when you want to pre-fill certain column values with default values to streamline the data entry process. The grid component allows you to set default values for columns when adding a new record. -The following sample code demonstrates enabling delete confirmation dialog in the DataGrid component, +To set a default value for a specific column in the Grid, you can use the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the `GridColumns` configuration. By providing a default value, the grid will automatically populate that value in the corresponding column when a new row is added. -```cshtml +Here's an example of how to set a default value for a column: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + + - - - - + + + + -@code{ - public List Orders { get; set; } - +@code { + public string CustomerValue { get; set; } = "HANAR"; + public double FreightValue { get; set; } = 1.0; + public string CountryValue { get; set; } = "France"; + public List OrderData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + OrderData = OrderDetails.GetAllRecords(); + } +} +{% 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) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.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(); + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVJCLsuBDjebSEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Delete multiple rows - public class Order +The delete multiple rows feature in the grid component allows you to easily remove multiple rows from the grid at once. This feature is useful when you want to delete multiple records simultaneously. There are two approaches to implement this feature: using the inbuilt toolbar delete option or using a method. + +**Using the inbuilt toolbar delete option** + +The grid component provides a user-friendly interface for performing various actions, including deleting rows using the inbuilt toolbar. To enable the delete multiple rows using the toolbar, 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 grid and set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property as **multiple** to enable multiple row selection. + +To delete multiple selected records in the grid, first you need to select multiple rows in the grid by highlighting or checking the corresponding checkboxes. Once the desired rows are selected, you can click on the delete icon located in the toolbar. This action will initiate the deletion process and remove the selected records from the grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@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, double Freight, string ShipCountry) { - 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; + } + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpiBMkLcuVmJPN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> Also delete the selected records using keyboard shortcut key **delete**. + +**Using method** + +You can delete multiple rows programmatically by using [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method. This method allows you to delete a record with the given options. If the **fieldname** (field name of the primary key column) and **data** parameters are not provided, the grid will delete the selected records. + +```ts + Grid.DeleteRecordAsync(); ``` -The following GIF represents the delete confirmation dialog displayed while deleting a record in DataGrid, +> * The `GridSelectionSettings.Type` property is set to **Multiple** to enable multiple row selection. +> * To prevent accidental or undesired deletions, it is recommended to enable the `ShowDeleteConfirmDialog` property of the `GridEditSettings` configuration. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + +@code { + public SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private async Task GridDeleteAction() + { + await Grid.DeleteRecordAsync(); + } +} +{% 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) + { + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLStsZBUpReRDUm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Adding a new row at the bottom of the grid + +The grid component allows you to add a new row at the bottom of the grid, allowing you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without the need of scroll up or manually reposition the newly added row. + +By default, when adding a new row in the grid component, the row is inserted at the top of the grid. However, you can change this behavior by setting the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of the `GridEditSettings` configuration to **Bottom**. This property determines the position where the new row will be inserted. + +Here's an example of how to enable adding new rows at the bottom of the grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
+ + + + + +
+ + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public NewRowPosition RowPosition { get; set; } = NewRowPosition.Top; + public class DropDownOrder + { + public string Text { get; set; } + public NewRowPosition Value { get; set; } + } + public void OnChange(ChangeEventArgs Args) + { + RowPosition = Args.Value; + } + List DropDownValue = new List + { + new DropDownOrder() { Text = "Top", Value = NewRowPosition.Top }, + new DropDownOrder() { Text = "Bottom", Value = NewRowPosition.Bottom}, + }; +} +{% 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) + { + 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; } +} +{% endhighlight %} +{% endtabs %} -![Blazor DataGrid displays Delete Confirmation Dialog](./images/blazor-datagrid-delete-confirm-dialog.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhTCBWEJgzWWmwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> The [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) supports all type of edit modes. +> Add `NewRowPostion` is supported for **Normal** and **Batch** editing modes. ## Show add new row always in grid @@ -189,59 +872,336 @@ The Syncfusion® Grid simplifies the additio The following sample demonstrates how to add a new record continuously using `ShowAddNewRow` property. -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Data +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + + - - - - - - + + + + - @code { - public List Orders { get; set; } - - SfGrid Grid {get;set;} - + 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), - OrderTime = DateTime.Now.AddHours(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) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? OrderTime { get; set; } - public string ShipCountry { get; set; } + 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 %} -![Show Add New Row](../datagrid/images/show-add-new-row.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfiLskTTrNxaux?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> To save the newly added records, you can either hit the **Enter** key or click on the **Update** button located on the toolbar after filling in the new add form. +> To save the newly added records, you can either hit the **Enter** key or click on the **Update** button located on the toolbar after filling in the new add form. -**Limitations** +### Limitations * This feature is supported only for Inline/Normal editing mode and is not compatible with other edit modes. * The new blank add row form will always be displayed at the top, even if you have set the new row position as the bottom for Virtual Scrolling and Infinite Scrolling enabled grid. * This feature is not compatible with the column virtualization feature. + +## Enable editing in single click + +Enabling single-click editing in the Syncfusion® Grid's **Normal** editing mode is a valuable feature that allows you to make a row editable with just one click.This can be achieved by using the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) and [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) methods. + +To implement this feature, you need to bind the [OnRecordClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRecordClick) event of the Grid. Within the event handler, call the `StartEditAsync` method to begin editing the clicked row and the `EndEditAsync` method to save or cancel editing for a previously edited row. This ensures that the editing mode is triggered when a specific record in the Grid is clicked. + +The following sample demonstrates how to enable editing in a single click using the `OnRecordClick` event: + +{% 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(); + } + private int? CurrentRowIndex { get; set; } = null; + public async Task RecordClickHandler(Syncfusion.Blazor.Grids.RecordClickEventArgs args) + { + if (Grid.IsEdit && CurrentRowIndex != args.RowIndex) + { + // End editing for the previously edited row + await Grid.EndEditAsync(); + } + // Update the currently selected row index + CurrentRowIndex = args.RowIndex; + await Grid.SelectRowAsync(args.RowIndex); + // Start editing the clicked row + await Grid.StartEditAsync(); + } +} +{% 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) + { + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtryNWXVhqPKVwhQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Disable editing for a particular row + +In the Syncfusion® Grid component, you can prevent editing of specific rows based on certain conditions. This feature is useful when you want to restrict editing for certain rows , such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. + +To disable editing for a particular row, use the [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event of the grid. You can then set the **args.Cancel** property to **true** to prevent editing for that row. + +In the below demo, the rows which are having the value for **ShipCountry** column as **France** is prevented from editing. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public void RowEditingHandler(RowEditingEventArgs args) + { + if (args.Data.ShipCountry == "France") + { + args.Cancel = true; + } + } +} +{% 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) + { + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLotiNrUuudyXpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Provide new item or edited item using events + +Grid uses `Activator.CreateInstance()` to create or clone new record instance during add and edit operations, so it must have parameterless constructors defined for the model class and any referenced complex type classes. + +There are cases where custom logic is required to create a new object, or a new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can manually provide model object instance using events. + +You can use the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) and [OnBeginEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBeginEdit) events to provide a new object instance during creation and editing operations. The new object should be assigned to the `RowCreating.Data` and `OnBeginEdit.RowData` properties. + +In the following example: + +* A model class without parameter-less constructor is bound with the grid. +* Enabled inline editing feature in grid. +* The `RowCreating` event is used to assign default values for new rows. +* The `OnBeginEdit` event is used to clone the current row's data when editing an existing item. + +{% 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(); + } + private int LatestOrderID { get; set; } = 101; + public void RowCreating(RowCreatingEventArgs args) + { + args.Data.OrderID = LatestOrderID; + args.Data.CustomerID = "HANAR"; + args.Data.Freight = 5; + args.Data.ShipCountry = "Brazil"; + LatestOrderID += 1; + } + public void OnBeginEdit(BeginEditArgs args) + { + args.RowData = new OrderDetails(args.RowData.OrderID, args.RowData.CustomerID, args.RowData.Freight, args.RowData.ShipCountry); + } +} +{% 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) + { + 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthINCtgBmWlAIwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file