Blazor DataGrid Example - Cell Editing
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Drag a column header here to group its column
Appointment ID Press Ctrl space to group. Press Alt Down to open filter Menu | Patient Name Press Alt Down to open filter Menu | Date & Time Press Alt Down to open filter Menu | Status Press Ctrl space to group. Press Alt Down to open filter Menu | Doctor Press Ctrl space to group. Press Alt Down to open filter Menu | Type Press Ctrl space to group. Press Alt Down to open filter Menu | Phone Press Alt Down to open filter Menu | Notes Press Alt Down to open filter Menu | Fee Press Alt Down to open filter Menu |
|---|
| 2001 | John Miller | 08/14/2026 08:30 AM | Booked | 
Dr. Martinez | Consultation | 5551234567 | Annual health checkup | $750.00 |
| 2002 | Emma Wilson | 08/14/2026 09:00 AM | Pending | 
Dr. Smith | FollowUp | 5552345678 | Post-surgical follow-up review | $600.00 |
| 2003 | Liam Davis | 08/14/2026 10:00 AM | Completed | 
Dr. Garcia | LabTest | 5553456789 | Comprehensive blood work analysis | $450.00 |
| 2004 | Olivia Brown | 08/14/2026 10:45 AM | Canceled | 
Dr. Brianna | RoutineCheck | 5554567890 | Rescheduling requested by patient | $250.00 |
| 2005 | Noah Taylor | 08/14/2026 11:30 AM | Booked | 
Dr. Davis | Emergency | 5555678901 | Pediatric acute respiratory assessment | $350.00 |
| 2006 | Ava Anderson | 08/14/2026 12:30 PM | Completed | 
Dr. Johnson | Consultation | 5556789012 | Cardiovascular risk assessment consultation | $850.00 |
| 2007 | James Thomas | 08/14/2026 01:00 PM | Pending | 
Dr. Williams | FollowUp | 5557890123 | Diabetes management follow-up visit | $700.00 |
| 2008 | Sophia Jackson | 08/14/2026 02:00 PM | Booked |
Dr. Martinez | LabTest | 5558901234 | Comprehensive allergy panel assessment | $420.00 |
| 2009 | Lucas White | 08/14/2026 02:30 PM | Completed |
Dr. Smith | RoutineCheck | 5559012345 | Preventive health screening program | $550.00 |
| 2010 | Mia Harris | 08/14/2026 03:00 PM | Canceled |
Dr. Garcia | Emergency | 5550123456 | Pediatric fever and cough evaluation | $280.00 |
| 2011 | Ethan Martin | 08/14/2026 03:30 PM | Pending |
Dr. Brianna | Consultation | 5551235674 | Dermatological skin condition consultation | $900.00 |
| 2012 | Amelia Thompson | 08/14/2026 04:00 PM | Booked |
Dr. Davis | FollowUp | 5552345679 | Post-treatment recovery evaluation session | $650.00 |
This sample demonstrates Cell Editing mode in the DataGrid, which provides an Excel-like editing experience by allowing users to edit cells directly within the grid for faster data entry and updates.
The Blazor DataGrid Cell Editing feature provides efficient data manipulation with the following key capabilities:
- Direct Cell Editing - Double-click an editable cell to start editing instantly.
- Keyboard Navigation - Use Tab, Shift+Tab, Enter, and Escape keys for efficient editing and navigation.
- Automatic Updates - Apply changes seamlessly without interrupting the editing workflow.
- Built-in Validation - Maintain data integrity by preventing invalid entries.
- Configurable Enter Navigation - Customize Enter key behavior using the
EnterKeyDirectionproperty. - Edit on Key Press - Enable
AllowEditOnKeyPressto start editing directly from keyboard input.
Cell Editing mode is configured through the GridEditSettings component with the Mode property set to EditMode.Cell.
In this sample, the EnterKeyDirection dropdown allows you to select navigation behavior, and the AllowEditOnKeyPress checkbox enables keystroke-initiated editing. The grid supports multiple editor types including text input, date/time picker, dropdown selectors, and checkbox toggle.
For more detailed information about cell editing, refer to the cell editing documentation.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit the Blazor DataGrid component page.