DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.

Backend API
$(() => { $('#gridContainer').dxDataGrid({ 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" lang="en"> <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=5.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/24.1.3/css/dx.light.css" /> <script src="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"> <p>Click this text and press <b>Tab</b></p> <div id="gridContainer"></div> </div> </body> </html>
const employees = [ { 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, }, ]; const 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', }];