JavaScript/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.
Use the following mouse and keyboard commands to control the focused row:
| Command | Action |
|---|---|
| Mouse Click | Focuses a row. |
| ↑ / ↓ | Focuses the next/previous row. |
| ← / → | Focuses the cell to the left/right. |
| Esc | Removes highlighting from the focused cell. |
You can use the focusedRowKey or focusedRowIndex property to specify the initially focused row. The grid is scrolled down to it. If you also specify the focusedColumnIndex property, a specific cell in this row is focused.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
// ...
focusedRowEnabled: true,
focusedRowIndex: 0, // focus the first row
// or
// focusedRowKey: 100,
focusedColumnIndex: 0 // focus the first cell
});
});Angular
<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
<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
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>
);
}jQuery
Use the option(optionName, optionValue) method to focus a row or cell programmatically. You can also use the navigateToRow(key) method to focus a row.
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.
You can implement the onFocusedRowChanged event handler to get the focused row key.