Edit Modes

The Grid is currently available as a community technology preview (CTP).
 
First Name Last Name Title Title Of Courtesy Birth Date Hire Date
Nancy Davolio Sales Representative Ms. 12/8/1978 5/1/2005
Andrew Fuller Vice President, Sales Dr. 2/19/1965 8/14/1992
Janet Leverling Sales Representative Ms. 8/30/1985 4/1/2002
Margaret Peacock Sales Representative Mrs. 9/19/1973 5/3/1993
Steven Buchanan Sales Manager Mr. 3/4/1955 10/17/1993
Michael Suyama Sales Representative Mr. 7/2/1981 10/17/1999
Robert King Sales Representative Mr. 5/29/1960 1/2/1994
Laura Callahan Inside Sales Coordinator Ms. 1/9/1985 3/5/2004
Anne Dodsworth Sales Representative Ms. 1/27/1980 11/15/2004

To enable data editing within the DevExpress Blazor Grid:

  1. Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, and Delete command buttons.

  2. Use the EditFormTemplate to define Grid edit form content. The edit form displays predefined Save and Cancel buttons.

  3. Handle the following events to validate user input, access permissions, and post changes to an underlying data source:

    • 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.

    Note that Grid data must be reloaded once you save information to the data source.

  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.

Our Blazor Grid supports different edit modes. Use the Edit Mode option above to switch between available modes.

Input Validation

The Grid is currently available as a community technology preview (CTP).
 
First Name Last Name Title Title Of Courtesy Birth Date Hire Date
Nancy Davolio Sales Representative Ms. 12/8/1978 5/1/2005
Andrew Fuller Vice President, Sales Dr. 2/19/1965 8/14/1992
Janet Leverling Sales Representative Ms. 8/30/1985 4/1/2002
Margaret Peacock Sales Representative Mrs. 9/19/1973 5/3/1993
Steven Buchanan Sales Manager Mr. 3/4/1955 10/17/1993
Michael Suyama Sales Representative Mr. 7/2/1981 10/17/1999
Robert King Sales Representative Mr. 5/29/1960 1/2/1994
Laura Callahan Inside Sales Coordinator Ms. 1/9/1985 3/5/2004
Anne Dodsworth Sales Representative Ms. 1/27/1980 11/15/2004

Our Blazor Grid uses the standard DataAnnotationsValidator to validate user input (based on data annotation attributes defined in an edit model). Once a user removes focus from data editors or attempts to submit the edit form, editors are marked with colored outlines: green indicates valid values, red - invalid values.

When you define the EditFormTemplate, use Blazor’s standard ValidationMessage component to display messages for individual data editors or the ValidationSummary component to summarize validation messages.

You can also implement your custom validator components and declare them in the CustomValidators template. To disable input validation, set the ValidationEnabled option to false.

Cascading Editors

The Grid is currently available as a community technology preview (CTP).
 
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

In this demo, the DevExpress Blazor Grid’s edit form contains two cascading Comboboxes: Country and City. The City combobox is dynamically populated with items based on the value selected within the Country combobox. Use the Value property to access the selected item. To respond to changes made, handle the ValueChanged event.