Edit Forms

Company Name Contact Name Contact Title Phone Country City
Exotic Liquids Charlotte Cooper Purchasing Manager (171) 555-2222 UK London
New Orleans Cajun Delights Shelley Burke Order Administrator (100) 555-4822 USA New Orleans
Grandma Kelly's Homestead Regina Murphy Sales Representative (313) 555-5735 USA Ann Arbor
Tokyo Traders Yoshi Nagase Marketing Manager (03) 3555-5011 Japan Tokyo
Cooperativa de Quesos 'Las Cabras' Antonio del Valle Saavedra Export Administrator (98) 598 76 54 Spain Oviedo
Mayumi's Mayumi Ohno Marketing Representative (06) 431-7877 Japan Osaka
Pavlova, Ltd. Ian Devling Marketing Manager (03) 444-2343 Australia Melbourne
Specialty Biscuits, Ltd. Peter Wilson Sales Representative (161) 555-4448 UK Manchester
PB Knäckebröd AB Lars Peterson Sales Agent 031-987 65 43 Sweden Göteborg
Refrescos Americanas LTDA Carlos Diaz Marketing Manager (11) 555 4640 Brazil Sao Paulo
Heli Süßwaren GmbH & Co. KG Petra Winkler Sales Manager (010) 9984510 Germany Berlin
Plutzer Lebensmittelgroßmärkte AG Martin Bein International Marketing Mgr. (069) 992755 Germany Frankfurt
Nord-Ost-Fisch Handelsgesellschaft mbH Sven Petersen Coordinator Foreign Markets (04721) 8713 Germany Cuxhaven
Formaggi Fortini s.r.l. Elio Rossi Sales Representative (0544) 60323 Italy Ravenna
Norske Meierier Beate Vileid Marketing Manager (0)2-953010 Norway Sandvika
Bigfoot Breweries Cheryl Saylor Regional Account Rep. (503) 555-9931 USA Bend
Svensk Sjöföda AB Michael Björn Sales Representative 08-123 45 67 Sweden Stockholm
Aux joyeux ecclésiastiques Guylène Nodier Sales Manager (1) France Paris
New England Seafood Cannery Robb Merchant Wholesale Account Agent (617) 555-3267 USA Boston
Leka Trading Chandra Leka Owner 555-8787 Singapore Singapore
Lyngbysild Niels Petersen Sales Manager 43844108 Denmark Lyngby
Zaanse Snoepfabriek Dirk Luchte Accounting Manager (12345) 1212 Netherlands Zaandam
Karkki Oy Anne Heikkonen Product Manager (953) 10956 Finland Lappeenranta
G'day, Mate Wendy Mackenzie Sales Representative (02) 555-5914 Australia Sydney
Ma Maison Jean-Guy Lauzon Marketing Manager (514) 555-9022 Canada Montréal
Pasta Buttini s.r.l. Giovanni Giudici Order Administrator (089) 6547665 Italy Salerno
Escargots Nouveaux Marie Delamare Sales Manager France Montceau
Gai pâturage Eliane Noz Sales Representative France Annecy
Forêts d'érables Chantal Goulet Accounting Manager (514) 555-2955 Canada Ste-Hyacinthe
Data grid with 29 rows and 7 columns

Our DevExpress Blazor Grid supports different edit modes. In EditForm mode (default), the Grid displays the edit form instead of the edited data row. In PopupEditForm mode, the Grid displays the edit form in a pop-up window.

Follow the steps below to enable data editing using an edit form:

  1. Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, and Delete command buttons.
  2. The default edit form displays only Save and Cancel buttons. Use the EditFormTemplate to populate edit form with editors. You can add custom editors or call the GetEditor method to get column editors automatically generated by the grid control.
  3. Handle the following events to make any final data changes, check access permissions, post changes to the underlying data source, and reload Grid data:
    • EditModelSaving — Fires when a user submits the edit form and validation passes.
    • DataItemDeleting — Fires when a user confirms the delete operation in the delete confirmation dialog.
  4. If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property. The Grid uses field values to compare and identify data items. If you do not specify these properties, the Grid uses standard .NET value equality comparison to identify data items.
  5. (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.

In this demo, the checkbox above the Grid allows you to switch to the PopupEditForm mode. The edit form contains two cascading Comboboxes: Country and City. The City combo box is dynamically populated with items based on the value selected within the Country combo box.

For detailed information on how to enable data editing and use edit-related options, refer to the following help topic: Edit Forms in Blazor Grid.