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.

Copy to CodeSandBox
Apply
Reset
<p>Click this text and press <b>Tab</b></p> <dx-data-grid id="gridContainer" [dataSource]="employees" keyExpr="ID" [showBorders]="true" [focusedRowEnabled]="true"> <dxo-editing [allowUpdating]="true" [allowDeleting]="true" [selectTextOnEditStart]="true" [useIcons]="true"> </dxo-editing> <dxo-header-filter [visible]="true"> </dxo-header-filter> <dxo-filter-panel [visible]="true"> </dxo-filter-panel> <dxo-filter-row [visible]="true"> </dxo-filter-row> <dxo-paging [pageSize]="10"> </dxo-paging> <dxo-pager [allowedPageSizes]="[5, 10]" [showPageSizeSelector]="true" [showNavigationButtons]="true"> </dxo-pager> <dxi-column dataField="FirstName"> </dxi-column> <dxi-column dataField="LastName"> </dxi-column> <dxi-column dataField="Position"> </dxi-column> <dxi-column dataField="StateID" caption="State"> <dxo-lookup [dataSource]="states" valueExpr="ID" displayExpr="Name"> </dxo-lookup> </dxi-column> </dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule } from 'devextreme-angular'; import { Service, Employee, State } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: ['app/app.component.css'], selector: 'demo-app', templateUrl: 'app/app.component.html', providers: [Service] }) export class AppComponent { employees: Employee[]; states: State[]; constructor(service: Service) { this.employees = service.getEmployees(); this.states = service.getStates(); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
import { Injectable } from '@angular/core'; export class Employee { ID: number; FirstName: string; LastName: string; Prefix: string; Position: string; BirthDate: string; Address: string; StateID: number; }; export class State { ID: number; Name: string; } let employees: Employee[] = [ { "ID": 1, "FirstName": "John", "LastName": "Heart", "Prefix": "Mr.", "Position": "CEO", "BirthDate": "1964/03/16", "Address": "351 S Hill St.", "StateID": 5 }, { "ID": 2, "FirstName": "Olivia", "LastName": "Peyton", "Prefix": "Mrs.", "Position": "Sales Assistant", "BirthDate": "1981/06/03", "Address": "807 W Paseo Del Mar", "StateID": 5 }, { "ID": 3, "FirstName": "Robert", "LastName": "Reagan", "Prefix": "Mr.", "Position": "CMO", "BirthDate": "1974/09/07", "Address": "4 Westmoreland Pl.", "StateID": 4 }, { "ID": 4, "FirstName": "Greta", "LastName": "Sims", "Prefix": "Ms.", "Position": "HR Manager", "BirthDate": "1977/11/22", "Address": "1700 S Grandview Dr.", "StateID": 11 }, { "ID": 5, "FirstName": "Brett", "LastName": "Wade", "Prefix": "Mr.", "Position": "IT Manager", "BirthDate": "1968/12/01", "Address": "1120 Old Mill Rd.", "StateID": 13 }, { "ID": 6, "FirstName": "Sandra", "LastName": "Johnson", "Prefix": "Mrs.", "Position": "Controller", "BirthDate": "1974/11/15", "Address": "4600 N Virginia Rd.", "StateID": 44 }, { "ID": 7, "FirstName": "Kevin", "LastName": "Carter", "Prefix": "Mr.", "Position": "Shipping Manager", "BirthDate": "1978/01/09", "Address": "424 N Main St.", "StateID": 5 }, { "ID": 8, "FirstName": "Cynthia", "LastName": "Stanwick", "Prefix": "Ms.", "Position": "HR Assistant", "BirthDate": "1985/06/05", "Address": "2211 Bonita Dr.", "StateID": 4 }, { "ID": 9, "FirstName": "Kent", "LastName": "Samuelson", "Prefix": "Dr.", "Position": "Ombudsman", "BirthDate": "1972/09/11", "Address": "12100 Mora Dr", "StateID": 26 }, { "ID": 10, "FirstName": "Taylor", "LastName": "Riley", "Prefix": "Mr.", "Position": "Network Admin", "BirthDate": "1982/08/14", "Address": "7776 Torreyson Dr", "StateID": 5 }, { "ID": 11, "FirstName": "Sam", "LastName": "Hill", "Prefix": "Mr.", "Position": "Sales Assistant", "BirthDate": "1984/02/17", "Address": "645 Prospect Crescent", "StateID": 11 }, { "ID": 12, "FirstName": "Kelly", "LastName": "Rodriguez", "Prefix": "Ms.", "Position": "Support Assistant", "BirthDate": "1988/05/11", "Address": "1601 W Mountain St.", "StateID": 5 }, { "ID": 13, "FirstName": "Natalie", "LastName": "Maguirre", "Prefix": "Mrs.", "Position": "Trainer", "BirthDate": "1977/10/07", "Address": "6400 E Bixby Hill Rd", "StateID": 29 }, { "ID": 14, "FirstName": "Walter", "LastName": "Hobbs", "Prefix": "Mr.", "Position": "Programmer", "BirthDate": "1984/12/24", "Address": "10385 Shadow Oak Dr", "StateID": 13 } ]; let states: State[] = [ { "ID": 1, "Name": "Alabama" }, { "ID": 2, "Name": "Alaska" }, { "ID": 3, "Name": "Arizona" }, { "ID": 4, "Name": "Arkansas" }, { "ID": 5, "Name": "California" }, { "ID": 6, "Name": "Colorado" }, { "ID": 7, "Name": "Connecticut" }, { "ID": 8, "Name": "Delaware" }, { "ID": 9, "Name": "District of Columbia" }, { "ID": 10, "Name": "Florida" }, { "ID": 11, "Name": "Georgia" }, { "ID": 12, "Name": "Hawaii" }, { "ID": 13, "Name": "Idaho" }, { "ID": 14, "Name": "Illinois" }, { "ID": 15, "Name": "Indiana" }, { "ID": 16, "Name": "Iowa" }, { "ID": 17, "Name": "Kansas" }, { "ID": 18, "Name": "Kentucky" }, { "ID": 19, "Name": "Louisiana" }, { "ID": 20, "Name": "Maine" }, { "ID": 21, "Name": "Maryland" }, { "ID": 22, "Name": "Massachusetts" }, { "ID": 23, "Name": "Michigan" }, { "ID": 24, "Name": "Minnesota" }, { "ID": 25, "Name": "Mississippi" }, { "ID": 26, "Name": "Missouri" }, { "ID": 27, "Name": "Montana" }, { "ID": 28, "Name": "Nebraska" }, { "ID": 29, "Name": "Nevada" }, { "ID": 30, "Name": "New Hampshire" }, { "ID": 31, "Name": "New Jersey" }, { "ID": 32, "Name": "New Mexico" }, { "ID": 33, "Name": "New York" }, { "ID": 34, "Name": "North Carolina" }, { "ID": 35, "Name": "Ohio" }, { "ID": 36, "Name": "Oklahoma" }, { "ID": 37, "Name": "Oregon" }, { "ID": 38, "Name": "Pennsylvania" }, { "ID": 39, "Name": "Rhode Island" }, { "ID": 40, "Name": "South Carolina" }, { "ID": 41, "Name": "South Dakota" }, { "ID": 42, "Name": "Tennessee" }, { "ID": 43, "Name": "Texas" }, { "ID": 44, "Name": "Utah" }, { "ID": 45, "Name": "Vermont" }, { "ID": 46, "Name": "Virginia" }, { "ID": 47, "Name": "Washington" }, { "ID": 48, "Name": "West Virginia" }, { "ID": 49, "Name": "Wisconsin" }, { "ID": 50, "Name": "Wyoming" }, { "ID": 51, "Name": "North Dakota" }]; @Injectable() export class Service { getEmployees() { return employees; } getStates() { return states; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.1.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18', 'devextreme-angular': 'npm:devextreme-angular@20.2.5', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>