Edit Forms

 
Company Name Contact Name Contact Title Phone Country City
Exotic LiquidsCharlotte CooperPurchasing Manager(171) 555-2222UKLondon
New Orleans Cajun DelightsShelley BurkeOrder Administrator(100) 555-4822USANew Orleans
Grandma Kelly's HomesteadRegina MurphySales Representative(313) 555-5735USAAnn Arbor
Tokyo TradersYoshi NagaseMarketing Manager(03) 3555-5011JapanTokyo
Cooperativa de Quesos 'Las Cabras'Antonio del Valle SaavedraExport Administrator(98) 598 76 54SpainOviedo
Mayumi'sMayumi OhnoMarketing Representative(06) 431-7877JapanOsaka
Pavlova, Ltd.Ian DevlingMarketing Manager(03) 444-2343AustraliaMelbourne
Specialty Biscuits, Ltd.Peter WilsonSales Representative(161) 555-4448UKManchester
PB Knäckebröd ABLars PetersonSales Agent031-987 65 43SwedenGöteborg
Refrescos Americanas LTDACarlos DiazMarketing Manager(11) 555 4640BrazilSao Paulo
Heli Süßwaren GmbH & Co. KGPetra WinklerSales Manager(010) 9984510GermanyBerlin
Plutzer Lebensmittelgroßmärkte AGMartin BeinInternational Marketing Mgr.(069) 992755GermanyFrankfurt
Nord-Ost-Fisch Handelsgesellschaft mbHSven PetersenCoordinator Foreign Markets(04721) 8713GermanyCuxhaven
Formaggi Fortini s.r.l.Elio RossiSales Representative(0544) 60323ItalyRavenna
Norske MeierierBeate VileidMarketing Manager(0)2-953010NorwaySandvika
Bigfoot BreweriesCheryl SaylorRegional Account Rep.(503) 555-9931USABend
Svensk Sjöföda ABMichael BjörnSales Representative08-123 45 67SwedenStockholm
Aux joyeux ecclésiastiquesGuylène NodierSales Manager(1) 03.83.00.68FranceParis
New England Seafood CanneryRobb MerchantWholesale Account Agent(617) 555-3267USABoston
Leka TradingChandra LekaOwner555-8787SingaporeSingapore
LyngbysildNiels PetersenSales Manager43844108DenmarkLyngby
Zaanse SnoepfabriekDirk LuchteAccounting Manager(12345) 1212NetherlandsZaandam
Karkki OyAnne HeikkonenProduct Manager(953) 10956FinlandLappeenranta
G'day, MateWendy MackenzieSales Representative(02) 555-5914AustraliaSydney
Ma MaisonJean-Guy LauzonMarketing Manager(514) 555-9022CanadaMontréal
Pasta Buttini s.r.l.Giovanni GiudiciOrder Administrator(089) 6547665ItalySalerno
Escargots NouveauxMarie DelamareSales Manager85.57.00.07FranceMontceau
Gai pâturageEliane NozSales Representative38.76.98.06FranceAnnecy
Forêts d'érablesChantal GouletAccounting Manager(514) 555-2955CanadaSte-Hyacinthe
Data grid with 29 rows and 7 columns
0 rows are selected

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.