Blazor Tree Grid Example - Dialog Editing
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Employee ID | Full Name | Designation | Joined Date | Country | Availability | Email |
|---|
| EMP001 | Sophia Turner | Chief Executive Officer | 02/02/1991 | London, UK | Yes | |
| EMP002 | Lucas Walker | VP Engineering | 16/02/2010 | Chicago, IL | Yes | |
| EMP003 | Charlotte Harris | VP Marketing | 17/03/2011 | San Francisco, CA | Yes | |
| EMP004 | Amelia Martin | VP Sales | 18/04/2012 | New York, USA | No | |
| EMP005 | Ethan Lewis | Chief of Staff | 19/05/2013 | London, UK | Yes | |
| EMP006 | William Brown | Chief Technology Officer | 03/03/1992 | Seattle, WA | Yes | |
| EMP007 | Isabella Moore | Lead Developer | 26/12/2002 | Seattle, WA | No | |
| EMP008 | Liam Taylor | Senior Architect | 27/01/2003 | Los Angeles, CA | Yes | |
| EMP009 | Ava Anderson | DevOps Manager | 01/02/2004 | Chicago, IL | Yes | |
| EMP010 | Noah Thomas | QA Lead | 02/03/2005 | San Francisco, CA | Yes |
This sample demonstrates dialog editing in the Tree Grid. While editing or adding a record, a dialog pop-up opens with an edit form.
Enable dialog editing by setting TreeGridEditSettings.Mode to EditMode.Dialog. In this demo, double-click a row or click the Edit toolbar button to open the dialog and save changes to the data source.
More information on dialog editing can be found in the documentation section.