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 widget:

  • 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 CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.dataGridOptions = { dataSource: employees, keyExpr: "ID", showBorders: true, editing: { allowUpdating: true, allowDeleting: true, selectTextOnEditStart: true, useIcons: true }, headerFilter: { visible: true }, filterPanel: { visible: true }, filterRow: { visible: true }, pager: { allowedPageSizes: [5, 10], showPageSizeSelector: true, showNavigationButtons: true }, paging: { pageSize: 10, }, focusedRowEnabled: true, columns: [ "FirstName", "LastName", "Position", { dataField: "StateID", caption: "State", dataType: "number", lookup: { dataSource: states, valueExpr: "ID", displayExpr: "Name" } } ] }; });
<!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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-sanitize.min.js"></script> <script> (function () { try { window.angular.module('ngSanitize'); } catch (e) { return false; } return true; })() || document.write(decodeURIComponent('%3Cscript src="js/angular-sanitize.min.js"%3E%3C\/script%3E')) </script> <script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <p>Click this text and press <b>Tab</b></p> <div id="gridContainer" dx-data-grid="dataGridOptions"></div> </div> </body> </html>
var employees = [ { "ID": 1, "FirstName": "John", "LastName": "Heart", "Prefix": "Mr.", "Position": "CEO", "BirthDate": "1964/03/16", "Bool": true, "Address": "351 S Hill St.", "StateID": 5 }, { "ID": 2, "FirstName": "Olivia", "LastName": "Peyton", "Prefix": "Mrs.", "Position": "Sales Assistant", "BirthDate": "1981/06/03", "Bool": false, "Address": "807 W Paseo Del Mar", "StateID": 5 }, { "ID": 3, "FirstName": "Robert", "LastName": "Reagan", "Prefix": "Mr.", "Position": "CMO", "BirthDate": "1974/09/07", "Bool": false, "Address": "4 Westmoreland Pl.", "StateID": 4 }, { "ID": 4, "FirstName": "Greta", "LastName": "Sims", "Prefix": "Ms.", "Position": "HR Manager", "BirthDate": "1977/11/22", "Bool": true, "Address": "1700 S Grandview Dr.", "StateID": 11 }, { "ID": 5, "FirstName": "Brett", "LastName": "Wade", "Prefix": "Mr.", "Position": "IT Manager", "BirthDate": "1968/12/01", "Bool": false, "Address": "1120 Old Mill Rd.", "StateID": 13 }, { "ID": 6, "FirstName": "Sandra", "LastName": "Johnson", "Prefix": "Mrs.", "Position": "Controller", "BirthDate": "1974/11/15", "Bool": false, "Address": "4600 N Virginia Rd.", "StateID": 44 }, { "ID": 7, "FirstName": "Kevin", "LastName": "Carter", "Prefix": "Mr.", "Position": "Shipping Manager", "BirthDate": "1978/01/09", "Bool": false, "Address": "424 N Main St.", "StateID": 5 }, { "ID": 8, "FirstName": "Cynthia", "LastName": "Stanwick", "Prefix": "Ms.", "Position": "HR Assistant", "BirthDate": "1985/06/05", "Bool": false, "Address": "2211 Bonita Dr.", "StateID": 4 }, { "ID": 9, "FirstName": "Kent", "LastName": "Samuelson", "Prefix": "Dr.", "Position": "Ombudsman", "BirthDate": "1972/09/11", "Bool": false, "Address": "12100 Mora Dr", "StateID": 26 }, { "ID": 10, "FirstName": "Taylor", "LastName": "Riley", "Prefix": "Mr.", "Position": "Network Admin", "BirthDate": "1982/08/14", "Bool": false, "Address": "7776 Torreyson Dr", "StateID": 5 }, { "ID": 11, "FirstName": "Sam", "LastName": "Hill", "Prefix": "Mr.", "Position": "Sales Assistant", "BirthDate": "1984/02/17", "Bool": false, "Address": "645 Prospect Crescent", "StateID": 11 }, { "ID": 12, "FirstName": "Kelly", "LastName": "Rodriguez", "Prefix": "Ms.", "Position": "Support Assistant", "BirthDate": "1988/05/11", "Bool": false, "Address": "1601 W Mountain St.", "StateID": 5 }, { "ID": 13, "FirstName": "Natalie", "LastName": "Maguirre", "Prefix": "Mrs.", "Position": "Trainer", "BirthDate": "1977/10/07", "Bool": false, "Address": "6400 E Bixby Hill Rd", "StateID": 29 }, { "ID": 14, "FirstName": "Walter", "LastName": "Hobbs", "Prefix": "Mr.", "Position": "Programmer", "BirthDate": "1984/12/24", "Bool": false, "Address": "10385 Shadow Oak Dr", "StateID": 13 } ]; var states = [ { "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" }];