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.

Backend API

​x
 
@(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>​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models;using DevExtreme.NETCore.Demos.Models.DataGrid;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class DataGridController : Controller {        public ActionResult FocusedRow() {            return View();        }    }}

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