Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

DevExpress-Examples/blazor-grid-popup-edit-form-customization

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blazor Grid - Use an External Popup as an Edit Form

This example uses a DevExpress Blazor Popup as a custom edit form for the DevExpress Blazor Grid component. In this example, the edit form is resizable/draggable, and does not close on Escape.

Customizable Popup Edit Form

Implementation Details

  1. Add a DxPopup component and populate it with required edit form content. This example uses DxFormLayout to arrange editors and an EditForm to validate user input.
  2. Add a command column to your Grid markup.
  3. Use HeaderTemplate and CellDisplayTemplate to add custom New and Edit buttons.
  4. Implement a method that creates an edit model for a new or existing record (ShowPopup in our implementation).
  5. When a user submits the form and validation is successful (EditForm.OnValidSubmit), update the data source. Create a new record, if necessary, and post new values.

Files to Review

Documentation

More Examples

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)

About

Use a DevExpress Blazor Popup dialog alongside our Blazor Grid to customize a pop-up edit form.

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.