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.

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

• Index.razor

Documentation

• Pop-Up and Inline Edit Forms in Blazor Grid
• DxPopup

More Examples

• Grid for Blazor - How to edit a row on a separate page
• Grid for Blazor - Create a custom record deletion confirmation dialog

Does this example address your development requirements/objectives?

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