Data Grid - Focused Row

The 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 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 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

@(Html.DevExtreme().DataGrid() .DataSource(d => d.OData() .Version(2) .Url("https://js.devexpress.com/Demos/DevAV/odata/Tasks") .Key("Task_ID") .Expand("ResponsibleEmployee") ) .DataSourceOptions(d => d.Select(new[] { "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Status", "Task_Description", "Task_Completion", "ResponsibleEmployee/Employee_Full_Name" })) .Columns(columns => { columns.Add() .DataField("Task_ID") .Width(80); columns.Add() .DataField("Task_Start_Date") .Caption("Start Date") .DataType(GridColumnDataType.Date); columns.Add() .DataField("ResponsibleEmployee.Employee_Full_Name") .Caption("Assigned To") .AllowSorting(false); columns.Add() .DataField("Task_Subject") .Caption("Subject") .Width(350); columns.Add() .DataField("Task_Status") .Caption("Status"); }) .FocusedRowEnabled(true) .FocusedRowKey(117) .ShowBorders(true) .Paging(p => p.PageSize(10)) .Pager(p => p.Visible(true)) .OnInitialized("onDataGridInitialized") .OnFocusedRowChanging("onFocusedRowChanging") .OnFocusedRowChanged("onFocusedRowChanged") ) <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> @(Html.DevExtreme().NumberBox() .Min(1) .Max(183) .Step(0) .InputAttr("aria-label", "Focused Row Key") .OnInitialized("onTaskIdEditorInitialized") .OnValueChanged("onTaskIdEditorValueChanged") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Auto Navigate To Focused Row") .Value(true) .OnValueChanged("autoNavigateToFocusedRowChanged") ) </div> </div> </div> <script> var dataGrid, taskIdEditor; function onTaskIdEditorInitialized(e) { taskIdEditor = e.component; } function onTaskIdEditorValueChanged(e) { if (e.event && e.value > 0) { dataGrid.option("focusedRowKey", e.value); } } function autoNavigateToFocusedRowChanged(e) { dataGrid.option("autoNavigateToFocusedRow", e.value); } function onDataGridInitialized(e) { dataGrid = e.component; } function onFocusedRowChanging(e) { var rowsCount = e.component.getVisibleRows().length, pageCount = e.component.pageCount(), pageIndex = e.component.pageIndex(), 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(function() { e.component.option("focusedRowIndex", 0); }); } else if(e.newRowIndex === 0 && pageIndex > 0) { e.component.pageIndex(pageIndex - 1).done(function() { e.component.option("focusedRowIndex", rowsCount - 1); }); } } } function onFocusedRowChanged(e) { const rowData = e.row && e.row.data; $("#taskSubject").html(rowData && rowData.Task_Subject); $("#taskDetails").html(rowData && rowData.Task_Description); $("#taskStatus").html(rowData && rowData.Task_Status); var progress = rowData && rowData.Task_Completion ? rowData.Task_Completion + "%" : ""; $("#taskProgress").text(progress); taskIdEditor.option("value", e.component.option("focusedRowKey")); } </script>

using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult FocusedRow() { return View(); } } }

.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 DataGrid.