Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Data Grid

Keyboard Navigation

Documentation

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

  • Tab
    Navigate between grid elements.

  • Ctrl + or Ctrl +
    Navigate between header, filter panel, filter row, data area, and pager.

  • Enter or Space
    Execute an action on a focused element.

<div id="data-grid-demo"> <p>Click this text and press <b>Tab</b></p> @(Html.DevExtreme().DataGrid<DevExtreme.NETCore.Demos.Models.DataGrid.EmployeeByState>() .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.Mvc().Controller("DataGridStatesLookup").LoadAction("Get").Key("ID")) .DisplayExpr("Name") .ValueExpr("ID") ); }) .DataSource(d => d.Mvc() .Controller("DataGridEmployees") .LoadAction("Get") .Key("ID") ) ) </div>
using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class DataGridController : Controller { public ActionResult KeyboardNavigation() { return View(); } } }