diff --git a/blazor/datagrid/dialog-editing.md b/blazor/datagrid/dialog-editing.md index c178424a62..05c6cc088e 100644 --- a/blazor/datagrid/dialog-editing.md +++ b/blazor/datagrid/dialog-editing.md @@ -7,165 +7,676 @@ control: DataGrid documentation: ug --- -# Dialog Editing in Blazor DataGrid Component +# Dialog editing in Blazor DataGrid component -In dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [EditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) as **Dialog**. +Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells. -```cshtml +To enable dialog editing in 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 to **Dialog**. This property determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature. + +Here's an example how to enable dialog editing in the blazor grid component: + +{% 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) + { + 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/htBTihBtqxaHFdKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize the edit dialog + +The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. -@code{ - public List Orders { get; set; } +To customize the edit dialog, you can use [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) property to customize the appearance of edit dialog. +The following example that demonstrates how to customize the edit dialog. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + + + + + @{ + var DialogHeader = GetHeader((context as OrderDetails)); + @DialogHeader + } + + + Submit + Discard + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List OrderData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + OrderData = OrderDetails.GetAllRecords(); + } + public DialogSettings DialogParams { get; set; } = new DialogSettings { Height= "300px", Width="300px" }; + public string GetHeader(OrderDetails value) + { + return value.OrderID == 0 + ? "New Customer" + : "Edit Record of " + value.CustomerID; + } + public async Task CancelEdit() + { + await Grid.CloseEditAsync(); //Cancel editing action + } + public async Task SaveEdit() + { + await Grid.EndEditAsync(); //Save the edited/added data to Grid + } +} +{% 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 %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyZWjvKbTMIaIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. +> * You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. - public class Order +## Show or hide columns in dialog editing + +The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the following events of the Grid. + +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. + +2. [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. + +3. [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered before a update action is executed in the grid. + +4. [EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling): Triggered before a cancel action is executed in the grid. + +The `RowCreating` and `RowEditing` events are triggered whenever an action such as adding or editing a record is initiated in the grid. Within the events handler, you can modify the visibility of columns using the [Column.Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. This property determines whether a column should be displayed or hidden. + +Additionally, you can reset the column visibility to its initial state using the `Column.Visible` property using `RowUpdating` and `EditCanceling` events of grid. + +In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state. + +{% 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() { - 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; } + OrderData = OrderDetails.GetAllRecords(); + } + public void RowAddingHandler(RowCreatingEventArgs args) + { + var columns = Grid.Columns; + foreach (var column in columns) + { + if (column.Field == "CustomerID") + { + column.Visible = true; + } + } + } + public void RowEditingHandler(RowEditingEventArgs args) + { + var columns = Grid.Columns; + foreach (var column in columns) + { + if (column.Field == "CustomerID") + { + column.Visible = true; + } + else if (column.Field == "ShipCountry") + { + column.Visible = false; + } + } + } + public void RowUpdatingHandler(RowUpdatingEventArgs args) + { + var columns = Grid.Columns; + foreach (var column in columns) + { + if (column.Field == "CustomerID") + { + column.Visible = false; + } + else if (column.Field == "ShipCountry") + { + column.Visible = true; + } + } + } + public void RowCancelingHandler(EditCancelingEventArgs args) + { + var columns = Grid.Columns; + foreach (var column in columns) + { + if (column.Field == "CustomerID") + { + column.Visible = false; + } + else if (column.Field == "ShipCountry") + { + column.Visible = 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 %} -``` - -The following screenshot represents Editing in Dialog Mode. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrzWVLAqtMKVgod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor DataGrid with Dialog Editing](./images/blazor-datagrid-dialog-editing.png) +## Use wizard like dialog editing -## Customize the edit dialog +Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. -You can use [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component to customize the appearance of edit dialog. +To achieve wizard-like dialog editing in the grid component, you can use the template feature. This feature allows you to define your own custom editing template using the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property set to **Dialog** and the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to specify the template variable that defines the editors for each step of the wizard. -In the below example we have changed the dialog's header text and footer button content for editing and adding records. +The following example demonstrate the wizard like editing in the grid with the unobtrusive validation. -```cshtml -@using Syncfusion.Blazor.Buttons +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns - - - + + + + - @ButtonText - Cancel +
+ @if (CurrentTab != 0) + { + Previous + } +
+
+ Save + @if (CurrentTab != 2) + { + Next + } +
- - - - - + + + + + + -@code{ - SfGrid Grid { get; set; } - public List Orders { get; set; } - public string Header { get; set; } - public string ButtonText { get; set; } - public string GetHeader(Order Value) +@code { + private SfGrid Grid; + private Boolean Check = false; + private OrderDetails CurrentEditingRecord { get; set; } + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private bool IsCurrentTabValid() + { + if (CurrentEditingRecord == null) return false; + if (CurrentTab == 0) + { + return CurrentEditingRecord.OrderID != 0 && !string.IsNullOrWhiteSpace(CurrentEditingRecord.CustomerID); + } + else if (CurrentTab == 1) + { + return CurrentEditingRecord.Freight > 0; + } + return true; + } + private int CurrentTab { get; set; } = 0; + public void PreviousDialog() { - if (Value.OrderID == null) + if (IsCurrentTabValid() && CurrentTab > 0) { - ButtonText = "Insert"; - return "Insert New Order"; + CurrentTab--; + Grid.PreventRender(false); } - else + } + public void NextDialog() + { + if (IsCurrentTabValid() && CurrentTab < 2) { - ButtonText = "Save Changes"; - return "Edit Record Details of " + Value.OrderID.ToString(); + CurrentTab++; + Grid.PreventRender(false); } } - public async Task Cancel() + public void SaveDialog() + { + Grid.EndEditAsync(); + } + public void RowCreating(RowCreatingEventArgs args) { - await Grid.CloseEdit(); //Cancel editing action + Check = true; + CurrentTab = 0; + CurrentEditingRecord = args.Data; } - public async Task Save() + public void OnBeginEdit(BeginEditArgs args) { - await Grid.EndEdit(); //Save the edited/added data to Grid + Check = false; + CurrentTab = 0; + CurrentEditingRecord = args.RowData; } - protected override void OnInitialized() + public class City + { + public string ShipCity { get; set; } + } + 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; } + } + List CountryName = new List { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + 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 ShipCity, bool Verified) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + this.ShipCity = ShipCity; + this.Verified = Verified; + } + 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", "Reims", true)); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany", "Münster", false)); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil", "Rio de Janeiro", true)); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France", "Lyon", true)); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium", "Charleroi", true)); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil", "Rio de Janeiro", true)); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland", "Bern", false)); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland", "Genève", true)); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil", "Resende", false)); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela", "San Cristóbal", true)); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria", "Graz", true)); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico", "México D.F.", false)); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany", "Köln", true)); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil", "Rio de Janeiro", false)); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA", "Albuquerque", true)); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } + public string ShipCity { get; set; } + public bool Verified { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyZMjvJXWZYAiP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize add/edit dialog footer + +The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) property of the Grid component. + +In the following sample, the action for the custom button can be customized using the `FooterTemplate` property of the `GridEditSettings`. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids - public class Order + + + + Discard + Submit + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List OrderData { 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; } + OrderData = OrderDetails.GetAllRecords(); + } + public async Task CancelEdit() + { + await Grid.CloseEditAsync(); + } + public async Task SaveEdit() + { + await Grid.EndEditAsync(); } } -``` +{% 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 %} -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrIDWZdLWqNBqts?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Implement calculated column inside grid dialog editing -You can perform calculations based on the field values available in the grid's dialog edit form and display the results in another field. +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. -In the following sample, the `SfNumericTextBox` component is rendered inside the dialog edit form. We have updated the **Total** column value based on the **Price** and **Quantity** columns using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxEvents-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxEvents_1_ValueChange) event of the `SfNumericTextBox` and the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid. +In the following sample, the `SfNumericTextBox` component is rendered inside the dialog edit form. We have updated the **Total** column value based on the **Price** and **Quantity** columns using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxEvents-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxEvents_1_ValueChange) event. This is achieved in combination with the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating), [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating), and [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using Action = Syncfusion.Blazor.Grids.Action @using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns - - + + - - - - + + + + + -@code{ - public List Orders { get; set; } - SfNumericTextBox PriceRef; - SfNumericTextBox QuantityRef; +@code { + private SfGrid Grid; + SfNumericTextBox PriceReference; + SfNumericTextBox QuantityReference; + private Boolean Check = false; + public double TotalValue { get; set; } + public List ProductData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 8).Select(x => new Order() - { - CustomerID = (new string[] { "Chai", "Chang", "Aniseed Syrup", "Chef Anton's Cajun Seasoning", "Chef Anton's Gumbo Mix", "Coca-Cola", "Pepsi", "Nescafe" })[new Random().Next(8)], - Price = 2.1 * x, - Quantity = x, - Total = (2.1 * x) * x - }).ToList(); + ProductData = ProductDetails.GetAllRecords(); } - public double TotalValue { get; set; } - public void OnActionComplete(ActionEventArgs args) + public void UpdateHandler(RowUpdatingEventArgs args) { - if (args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit)) - { - // Based on Add or Edit action disable the PreventRender. - args.PreventRender = false; - } + args.Data.Total = TotalValue; } - public void OnActionBegin(ActionEventArgs args) + public void AddHandler(RowCreatingEventArgs args) { - if (args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit)) - { - TotalValue = args.Data.Total; - } - if (args.RequestType.Equals(Action.Save)) - { - args.Data.Total = TotalValue; - } + Check = true; + TotalValue = args.Data.Total; } - public void ValueChange() + public void EditHandler(RowEditedEventArgs args) { - TotalValue = Convert.ToDouble(PriceRef.Value * QuantityRef.Value); + Check = false; + TotalValue = args.Data.Total; } - - public class Order + private void ValueChangeHandler() { - public string? CustomerID { get; set; } - public double Price { get; set; } - public int? Quantity { get; set; } - public double Total { get; set; } + TotalValue = Convert.ToDouble(PriceReference.Value * QuantityReference.Value); + Grid.PreventRender(false); } + public class Product + { + public string ProductName { get; set; } + } + List ProductNameData = new List + { + new Product() { ProductName= "Chai" }, + new Product() { ProductName= "Chang"}, + new Product() { ProductName= "Aniseed Syrup"}, + new Product() { ProductName= "Chef Anton's Cajun Seasoning" }, + new Product() { ProductName= "Chef Anton's Gumbo Mix" }, + new Product() { ProductName= "Chef Anton's Gumbo" }, + new Product() { ProductName= "Chef Anton's Mix" }, + new Product() { ProductName= "Coca-Cola"}, + }; } +{% endhighlight %} +{% highlight c# tabtitle="ProductDetails.cs" %} +public class ProductDetails +{ + public static List Products = new List(); + public ProductDetails(int productID, string productName, double price, int quantity, double total) + { + this.ProductID = productID; + this.ProductName = productName; + this.Price = price; + this.Quantity = quantity; + this.Total = total; + } + 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, 22, 469.7)); + Products.Add(new ProductDetails(6, "Chef Anton's Gumbo", 23.35, 5, 116.75)); + Products.Add(new ProductDetails(7, "Chef Anton's Mix", 25.35, 47, 1191.45)); + Products.Add(new ProductDetails(8, "Coca-Cola", 27.39, 0, 0)); + } + return Products; + } + public int ProductID { get; set; } + public string ProductName { get; set; } + public double Price { get; set; } + public int Quantity { get; set; } + public double Total { get; set; } +} +{% endhighlight %} +{% endtabs %} -``` - -N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-calculated-columns-inside-dialog-editing). \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLyXsZxfZTvqDJz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/images/blazor-datagrid-dialog-editing.png b/blazor/datagrid/images/blazor-datagrid-dialog-editing.png deleted file mode 100644 index 3a65a55092..0000000000 Binary files a/blazor/datagrid/images/blazor-datagrid-dialog-editing.png and /dev/null differ