JavaScript/jQuery Data Grid - Focused Row

The JavaScript DataGrid component can highlight the focused row. To enable this feature, set the focusedRowEnabled property to true.

To focus a row programmatically, specify the focusedRowKey property. The JavaScript DataGrid automatically scrolls to the focused row if the autoNavigateToFocusedRow property is enabled. In the UI, users can click a row to focus it. The focused row is saved in the JavaScript DataGrid's state.

You can use the onFocusedRowChanging or onFocusedRowChanged property to specify a custom function that is executed before or after a row is focused.

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

$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ dataSource: { store: { type: 'odata', version: 2, key: 'Task_ID', url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks', }, expand: 'ResponsibleEmployee', select: [ 'Task_ID', 'Task_Subject', 'Task_Start_Date', 'Task_Status', 'Task_Description', 'Task_Completion', 'ResponsibleEmployee/Employee_Full_Name', ], }, columns: [ { dataField: 'Task_ID', width: 80, }, { dataField: 'Task_Start_Date', caption: 'Start Date', dataType: 'date', }, { dataField: 'ResponsibleEmployee.Employee_Full_Name', caption: 'Assigned To', allowSorting: false, }, { dataField: 'Task_Subject', caption: 'Subject', width: 350, }, { dataField: 'Task_Status', caption: 'Status', }, ], focusedRowEnabled: true, focusedRowKey: 117, showBorders: true, paging: { pageSize: 10, }, pager: { visible: true, }, onFocusedRowChanging(e) { const rowsCount = e.component.getVisibleRows().length; const pageCount = e.component.pageCount(); const pageIndex = e.component.pageIndex(); const key = e.event && e.event.key; if (key && e.prevRowIndex === e.newRowIndex) { if (e.newRowIndex === rowsCount - 1 && pageIndex < pageCount - 1) { e.component.pageIndex(pageIndex + 1).done(() => { e.component.option('focusedRowIndex', 0); }); } else if (e.newRowIndex === 0 && pageIndex > 0) { e.component.pageIndex(pageIndex - 1).done(() => { e.component.option('focusedRowIndex', rowsCount - 1); }); } } }, onFocusedRowChanged(e) { const taskItem = getTaskDataItem(e.row); const focusedRowKey = e.component.option('focusedRowKey'); $('#taskSubject').html(taskItem.subject); $('#taskDetails').html(taskItem.description); $('#taskStatus').html(taskItem.status); $('#taskProgress').text(taskItem.progress); $('#taskId').dxNumberBox('instance').option('value', focusedRowKey); }, }).dxDataGrid('instance'); $('#taskId').dxNumberBox({ min: 1, max: 183, step: 0, inputAttr: { 'aria-label': 'Focused Row Key' }, onValueChanged(e) { if (e.event && e.value > 0) { dataGrid.option('focusedRowKey', e.value); } }, }); $('#autoNavigateCheckboxId').dxCheckBox({ text: 'Auto Navigate To Focused Row', value: true, onValueChanged(e) { dataGrid.option('autoNavigateToFocusedRow', e.value); }, }); }); function getTaskDataItem(row) { const rowData = row && row.data; return { subject: rowData.Task_Subject, description: rowData.Task_Description, status: rowData.Task_Status, progress: rowData.Task_Completion ? `${rowData.Task_Completion}%` : '', }; }

<!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/25.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/dx.all.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> <div class="task-info"> <div class="info"> <div id="taskSubject"></div> <p id="taskDetails"></p> </div> <div class="progress"> <span id="taskStatus"></span> <span id="taskProgress"></span> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <span>Focused Row Key</span> <div id="taskId"></div> </div> <div class="option"> <div id="autoNavigateCheckboxId"></div> </div> </div> </div> </div> </body> </html>

.task-info { font-family: "Segoe UI"; min-height: 200px; display: flex; flex-wrap: nowrap; border: 2px solid rgba(0, 0, 0, 0.1); padding: 16px; box-sizing: border-box; align-items: baseline; justify-content: space-between; } #taskSubject { line-height: 29px; font-size: 18px; font-weight: bold; } #taskDetails { line-height: 22px; font-size: 14px; margin-top: 0; margin-bottom: 0; } .progress { display: flex; flex-direction: column; white-space: pre; min-width: 105px; } .info { margin-right: 40px; } #taskProgress { line-height: 42px; font-size: 40px; font-weight: bold; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: relative; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; margin-right: 40px; display: inline-block; } .option:last-child { margin-right: 0; } .option > .dx-numberbox { width: 200px; display: inline-block; vertical-align: middle; } .option > span { margin-right: 10px; } .options-container { display: flex; align-items: center; }

In this demo, the row with the 117 key is focused initially. You can specify the focusedRowKey and autoNavigateToFocusedRow properties via the input field and the checkbox below the JavaScript DataGrid.