From ec12401d3a4d64a4fa245fbe4dad69d57cb9dde1 Mon Sep 17 00:00:00 2001 From: SanjayKumarSuresh Date: Thu, 10 Sep 2026 20:21:44 +0530 Subject: [PATCH] 1052019: Dialog Editing file --- grid-sdk/blazor/data-grid/dialog-editing.md | 517 ++++++++++---------- 1 file changed, 260 insertions(+), 257 deletions(-) diff --git a/grid-sdk/blazor/data-grid/dialog-editing.md b/grid-sdk/blazor/data-grid/dialog-editing.md index 58cb22475..c9ad38ab7 100644 --- a/grid-sdk/blazor/data-grid/dialog-editing.md +++ b/grid-sdk/blazor/data-grid/dialog-editing.md @@ -1,106 +1,24 @@ --- layout: post -title: Dialog Editing in Blazor DataGrid | Syncfusion® -description: Checkout and learn here all the features about Dialog Editing in Blazor DataGrid and much more details. +title: Blazor Grid Dialog Editing | Syncfusion +description: Learn how to use dialog editing in Blazor Data Grid for add, edit, validation, custom edit forms, dialog templates, and CRUD operations. platform: grid-sdk control: DataGrid documentation: ug --- -# Dialog editing in Blazor DataGrid +# Dialog Editing in Blazor Data Grid -Dialog editing in the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables editing of data in the selected row using a dialog window. This feature facilitates quick modification of cell values and updates the data source without navigating to a separate page or view. Dialog editing is particularly effective for scenarios requiring streamlined editing of multiple cells. +Dialog editing in the [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables editing the data of a selected row in a dialog window. This feature facilitates quick modification of cell values and updates the data source without navigating to a separate page or view. Dialog editing is particularly effective for scenarios requiring streamlined editing of multiple cells. -To enable dialog editing, 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 defines the editing mode for the DataGrid. +To enable dialog editing, 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 defines the editing mode for the Data 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) - { - 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 Blazor DataGrid supports customization of its appearance and behavior based on the action being performed, such as editing or adding a record. Properties such as header text, close icon visibility, and dialog height can be modified to align with specific application requirements. - -To customize the edit dialog, use the [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) properties of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons - - - - - @{ - var DialogHeader = GetHeader((context as OrderDetails)); - @DialogHeader - } - - - Submit - Discard - - + @@ -109,27 +27,11 @@ To customize the edit dialog, use the [HeaderTemplate](https://help.syncfusion.c @code { - public SfGrid Grid { get; set; } public List OrderData { get; set; } protected override void OnInitialized() { 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" %} @@ -173,151 +75,12 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyZWjvKbTMIaIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * The DataGrid add or edit dialog element includes a max-height property, which is calculated based on the available window height. In a standard window size of **1920×1080** pixels, the dialog height can be set up to **658px**. -> * Refer to the Blazor DataGrid feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. - -## Show or hide columns in dialog editing - -The Blazor DataGrid provides the ability to dynamically show or hide columns during dialog editing. This feature enables conditional column visibility based on the editing context, such as when adding a new record or modifying an existing one. -To implement this behavior, use the following Grid events: - -1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before a new record is added. -2. [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing): Triggered before an existing record is edited. -3. [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating): Triggered before the update operation is finalized. -4. [EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling): Triggered before the cancel operation is executed. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVxtwDhBqPcsjMi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -Within the `RowCreating` and `RowEditing` event handlers, column visibility can be modified 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 is displayed or hidden during dialog editing. -To restore the original visibility state, use the `Column.Visible` property in the `RowUpdating` and `EditCanceling` events. +## Wizard-like dialog editing -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - -@code { - public SfGrid Grid { get; set; } - public List OrderData { get; set; } - protected override void OnInitialized() - { - OrderData = OrderDetails.GetAllRecords(); - } - public void 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 %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrzWVLAqtMKVgod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Use wizard-like dialog editing - -The Blazor DataGrid supports wizard-like dialog editing, enabling structured, step-by-step form layouts. This approach facilitates segmented data entry by dividing complex forms into manageable sections. +The Blazor Data Grid supports wizard-like dialog editing, enabling structured, step-by-step form layouts. The wizard layout facilitates segmented data entry by dividing complex forms into manageable sections. To configure wizard-like dialog editing, enable the template feature by setting the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Dialog** and assigning a value to 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). The template defines the editors and layout for each step in the wizard. @@ -330,7 +93,7 @@ To configure wizard-like dialog editing, enable the template feature by setting - +