All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery TreeList - Focused Row

The focused row feature allows you to display master-detail relationships and improve navigation through records.

To allow users to focus rows, set the focusedRowEnabled property to true.

Users can control the focused row using the following mouse and keyboard commands:

CommandAction
Mouse ClickFocuses a row.
↑ / ↓ Focuses the next/previous row.
← / → Focuses the cell to the left/right.
Esc Removes highlighting from the focused cell.

You can specify the initially focused row using the focusedRowKey or focusedRowIndex property. The grid is scrolled down to it. If you also set the focusedColumnIndex property, a specific cell in this row is focused.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        focusedRowEnabled: true,
        focusedRowIndex: 0, // focus the first row
        // or
        // focusedRowKey: 100,
        focusedColumnIndex: 0 // focus the first cell
    });
});
Angular
HTML
TypeScript
<dx-tree-list ...
    [focusedRowEnabled]="true"
    [focusedRowIndex]="0" <!-- focus the first row -->
    [focusedColumnIndex]="0"> <!-- focus the first cell -->
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ...
        :focused-row-enabled="true"
        :focused-row-index="0" <!-- focus the first row -->
        :focused-column-index="0"> <!-- focus the first cell -->
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList ...
            focusedRowEnabled={true}
            focusedRowIndex={0} {/* focus the first row */}
            focusedColumnIndex={0}> {/* focus the first cell */}
        </TreeList>
    );
}

Change the same properties using the option(optionName, optionValue) method to focus a row or cell programmatically. You can also use the navigateToRow(key) method to focus a row. This approach is more typical of jQuery Controls. With JavaScript frameworks, use property binding.

JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.option("focusedRowKey", 100);
// or
treeList.navigateToRow(100);

The TreeList raises events before and after a row or cell is focused. Use the onFocusedRowChanging/onFocusedRowChanged and onFocusedCellChanging/onFocusedCellChanged functions to handle these events. You can perform custom actions in these functions, for instance, customize keyboard navigation, as shown in the onFocusedCellChanging example.