Skip to content

1020553: Added UG Sample under dialog editing#8110

Open
sanjaykumar-suresh wants to merge 4 commits intohotfix/hotfix-v33.1.44from
1020553-UGSampleAdded
Open

1020553: Added UG Sample under dialog editing#8110
sanjaykumar-suresh wants to merge 4 commits intohotfix/hotfix-v33.1.44from
1020553-UGSampleAdded

Conversation

@sanjaykumar-suresh
Copy link
Copy Markdown
Contributor

Description

Added a sample to apply animation to the grid edit dialog.

Code Studio usage(Mandatory)

  • Code Studio used in this PR/MR?

    • Yes
    • No
  • If Yes: Primary use (choose one)

    • Generate new content
    • Refactor/improve existing content
    • Review assistance (explanations/summaries)
    • Other:
  • Outcome

    • Saved time
    • Neutral
    • Cost time
  • If “Cost time” explain in short (1 or 2 lines):

Type of Change

  • New documentation page
  • Update to existing documentation
  • Bug fix (broken links, typos, formatting issues)
  • Structural change (folders, navigation, index)
  • Content improvement (clarity, examples, screenshots)
  • Other (please describe): A sub topic has been added not a sepearte page.

Reviewer Checklist (Mandatory)

  • Reviewed the provided Code Studio usages related information
  • Content changes follow UG/Documentation guidelines
  • All provided information reviewed and verified
  • Links and previews checked

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

Build Status: INPROGRESS 🔃
Build Location: 1020553-UGSampleAdded

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1020553-UGSampleAdded
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

Comment thread blazor/datagrid/dialog-editing.md Outdated
@sanjaykumar-suresh sanjaykumar-suresh changed the title 1020553: Added UG Sample 1020553: Added UG Sample under dialog editing Apr 10, 2026
@SyncfusionBuild
Copy link
Copy Markdown
Contributor

Build Status: INPROGRESS 🔃
Build Location: 1020553-UGSampleAdded

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1020553-UGSampleAdded
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

Build Status: INPROGRESS 🔃
Build Location: 1020553-UGSampleAdded

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1020553-UGSampleAdded
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

Copy link
Copy Markdown
Collaborator

@Venkat-Ayothi Venkat-Ayothi left a comment

Choose a reason for hiding this comment

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

Comments added

Comment thread blazor/datagrid/dialog-editing.md Outdated
@@ -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

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

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.

Comment thread blazor/datagrid/dialog-editing.md Outdated
@@ -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

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

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

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.

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

Build Status: INPROGRESS 🔃
Build Location: 1020553-UGSampleAdded

@SyncfusionBuild
Copy link
Copy Markdown
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1020553-UGSampleAdded
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants