Skip to content

1020553: Added UG Sample under dialog editing #8110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanjaykumar-suresh wants to merge 4 commits into
base: hotfix/hotfix-v33.1.44
Choose a base branch
from
Open

1020553: Added UG Sample under dialog editing #8110

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ee8947
1020553: Added UG Sample
sanjaykumar-suresh Apr 7, 2026
fd55773
1020553: Modified the tittle name
sanjaykumar-suresh Apr 10, 2026
dc630a9
1020553: Modified
sanjaykumar-suresh Apr 10, 2026
7dd5800
1020553: Made Suggested Changes
sanjaykumar-suresh Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 85 additions & 1 deletion blazor/datagrid/dialog-editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,90 @@ public class OrderDetails
> * 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](https://www.syncfusion.com/blazor-components/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.

### Applying animations to the add/edit dialog
Copy link
Copy Markdown
Collaborator

@Venkat-Ayothi Venkat-Ayothi Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add and Edit Dialog Animation Support for Modern UI Experience --> use this titlle

Copy link
Copy Markdown
Contributor Author

@sanjaykumar-suresh sanjaykumar-suresh Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Venkat-Ayothi ,
Changes made as suggested, please check.


The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding animation effects to the edit dialog to enhance visual interaction during add and edit operations. By configuring the DialogSettings through the [Dialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Dialog) property of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html), animation effects can be applied when the dialog is displayed. Properties such as dialog height, width, animation effect and much more can be customized to achieve smooth transitions, improving the overall user experience without affecting data operations or validation behavior. The animation is automatically applied whenever the edit dialog is opened in dialog edit mode.
Copy link
Copy Markdown
Collaborator

@Venkat-Ayothi Venkat-Ayothi Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use this content

Syncfusion® Blazor DataGrid provides built-in support for animation effects in dialog edit mode, creating a smooth and modern editing experience. Animation effects can be applied to the edit dialog during add and edit operations by using GridEditSettings with the Dialog property.
The DialogSettings configuration allows full control over dialog behavior and appearance. Options include dialog height, dialog width, animation effect, and layout customization. These settings enhance visual interaction while maintaining consistent data handling and validation behavior.

Animation effects are automatically applied whenever the edit dialog opens in dialog edit mode. The feature improves user experience without affecting performance, data integrity, or validation logic.
Key Benefits

  • Smooth animation effects for add and edit dialogs
  • Easy configuration through GridEditSettings and DialogSettings
  • Customizable dialog size and animation style
  • Improved visual appeal for enterprise Blazor applications
  • No impact on data operations or validation workflow

Copy link
Copy Markdown
Contributor Author

@sanjaykumar-suresh sanjaykumar-suresh Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Venkat-Ayothi ,
Changes made as suggested, please check.


{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups

<SfGrid @ref="Grid" DataSource="@OrderData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Dialog="@EditDialogParams" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog">
</GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true })" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true, MinLength = 5 })" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true, Min = 1, Max = 1000 })" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType="Syncfusion.Blazor.Grids.EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>

@code
{
public SfGrid<OrderDetails> Grid { get; set; }
public List<OrderDetails> OrderData { get; set; }

private DialogSettings EditDialogParams = new DialogSettings
{
Height = "700px",
Width = "600px",
AnimationEffect = DialogEffect.Zoom
};

protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
}

{% endhighlight %}
{% highlight c# tabtitle="OrderDetails.cs" %}
public class OrderDetails
{
public static List<OrderDetails> Order = new List<OrderDetails>();
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<OrderDetails> 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/rtVRZzjQeDxvEcnI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Show or hide columns in dialog editing

The Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
Expand Down Expand Up @@ -776,4 +860,4 @@ public class ProductDetails

{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLyXsZxfZTvqDJz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

> For details about events triggered during **Dialog editing**, refer to the supported events [documentation](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing#supported-events-for-inline-and-dialog-editing).
> For details about events triggered during **Dialog editing**, refer to the supported events [documentation](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing#supported-events-for-inline-and-dialog-editing).