|
|
|
|
|
|
|
---|---|---|---|---|---|---|
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 using an edit form within the DevExpress Blazor Grid:
- Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, and Delete command buttons.
- Use the EditFormTemplate to define Grid edit form content. The edit form displays predefined Save and Cancel buttons.
- 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.
- 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.
- (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.
Our Blazor Grid supports different edit modes. In EditForm
mode (default), the Grid displays the edit form instead of the edited data row. Check the Use Popup Edit Form option above to switch to the PopupEditForm
mode. In this mode, the Grid displays the edit form in a pop-up window.
For detailed information on how to enable data editing and use edit-related option, refer to the following help topic: Edit Data and Validate Input.
|
|
|
|
|
|
|
---|---|---|---|---|---|---|
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, you can use any of the following approaches to display validation messages:
- Use the template context's
EditContext
property to access the validation message(s) and display it manually. - Use Blazor's standard ValidationMessage component to display messages for individual data editors.
- Use 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
.
|
|
|
|
|
|
|
---|---|---|---|---|---|---|
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 |
The DevExpress Blazor Grid allows users to edit its data in the inline edit row. To enable this functionality, follow the steps below:
Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, Save, Cancel, and Delete command buttons.
Set the EditMode property to
GridEditMode.EditRow
.Specify the
CellEditTemplate
for each column to define Grid edit row content.Handle the following events to validate user input, access permissions, and post changes to an underlying data source:
- EditModelSaving - Fires when a user saves the edited row 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.
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.
(Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.
For more information on how to enable data editing and use edit-related options, refer to the following help topic: Edit Data and Validate Input.
|
|
|
|
|
|
|
---|---|---|---|---|---|---|
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 save an edited row, editors are marked with colored outlines: green indicates valid values, red - invalid values.
When you define the CellEditTemplate
, you can use any of the following approaches to display validation messages for individual data editors:
- Use the template context's
EditContext
property to access the validation message's text and display it manually. - Use Blazor's standard ValidationMessage component.
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
.
|
|
|
|
|
|
|
---|---|---|---|---|---|---|
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.