Data Grid - Keyboard Navigation

In this demo, you can use the following keys and key combinations to interact with the DataGrid:

Enter
Execute an action on a focused element.
Tab
Navigate within DataGrid elements.
Ctrl + ↑ or Ctrl + ↓
Navigate between a column header, filter row, data area, filter panel, and pager.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div id="data-grid-demo"> <p>Click this text and press <b>Tab</b></p> @(Html.DevExtreme().DataGrid<DevExtreme.MVC.Demos.Models.DataGrid.Employee>() .ID("gridContainer") .ShowBorders(true) .Editing(editing => { editing.AllowUpdating(true); editing.AllowDeleting(true); editing.SelectTextOnEditStart(true); editing.UseIcons(true); }) .HeaderFilter(headerFilter => headerFilter.Visible(true)) .FilterPanel(filterPanel => filterPanel.Visible(true)) .FilterRow(filterRow => filterRow.Visible(true)) .Paging(paging => { paging.Enabled(true); paging.PageSize(10); }) .Pager(pager => { pager.Visible(true); pager.AllowedPageSizes(new[] {5, 10}); pager.ShowPageSizeSelector(true); pager.ShowNavigationButtons(true); }) .FocusedRowEnabled(true) .Columns(columns => { columns.AddFor(m => m.FirstName); columns.AddFor(m => m.LastName); columns.AddFor(m => m.Position); columns.AddFor(m => m.StateID) .Lookup(lookup => lookup .DataSource(d => d.WebApi().Controller("DataGridStatesLookup").Key("ID")) .DisplayExpr("Name") .ValueExpr("ID") ); }) .DataSource(d => d.WebApi().Controller("DataGridEmployees").UpdateAction(true).DeleteAction(true).Key("ID")) ) </div>

using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult KeyboardNavigation() { return View(); } } }