Focus and Navigation

• Nov 15, 2024
• 6 minutes to read

This topic explains how to do the following:

• Switch between navigation styles: row, cell, or no input focus.
• Focus rows in code or determine the currently focused row.
• Focus cells in code or determine the cell focused by the end user.

Navigation

Use the DataViewBase.NavigationStyle property to control how users can move focus in the GridControl:

Property Value	Description
GridViewNavigationStyle.Row	A View allows you to focus and navigate through rows only.
GridViewNavigationStyle.Cell (Default)	A View displays the focused row and allows you to focus, navigate and edit cells.
GridViewNavigationStyle.None	A View does not allow you to focus rows and cells.

Note

Use the following techniques to implement full keyboard navigation support when you use a custom CellTemplate:

• If the template contains a BaseEdit class descendant, use the solution from the following topic: Custom In-Place Cell Editors.
• If the template does not include a BaseEdit class descendant, you should Process User Actions manually.

Refer to the Navigate Through Rows and Cells topic for information about end-user navigation.

Focus Rows, Nodes, and Cards

Availability

Users can focus rows, nodes, and cards if the DataViewBase.NavigationStyle property is not set to GridViewNavigationStyle.None.

You can handle the DataViewBase.FocusedRowHandleChanging event to prevent users from focusing rows based on a specific condition.

In Code

To identify the focused row, node, or card, use the DataControlBase.CurrentItem / DataViewBase.FocusedRowHandle properties. In addition you can use the TreeListView.FocusedNode property to get or set the focused node.

The following code sample shows how to focus a row that contains the specified cell value:

C#

void Button_Click(object sender, RoutedEventArgs e) {
    FocusRowInGrid();
}

public void FocusRowInGrid() {
    view.FocusedRowHandle = 2;
}

VB.NET

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    FocusRowInGrid()
End Sub

Public Sub FocusRowInGrid()
    view.FocusedRowHandle = 2
End Sub

The GridControl provides the following methods to move the row/card focus:

Method	Description
DataViewBase.MoveFirstRow	Moves focus to the first visible row or card within a View.
DataViewBase.MovePrevPage	Moves focus backward by the number of rows or cards displayed onscreen within a View.
DataViewBase.MovePrevRow	Moves focus to the row or card that precedes the one currently focused.
DataViewBase.MoveNextRow	Moves focus to the row or card that follows the one currently focused.
DataViewBase.MoveNextPage	Moves focus forward by the number of rows or cards displayed onscreen within a View.
DataViewBase.MoveLastRow	Moves focus to the last visible row or card within a View.
DataViewBase.MoveFocusedRow	Moves focus to the specified row.
GridViewBase.MoveParentGroupRow	Moves focus to the group row that owns the currently focused row.

You cannot use this methods to focus hidden rows or rows from collapsed groups/details. The DataControlBase.VisibleRowCount property returns the number of visible rows.

The following table lists events that GridControl raises when a focused row is changed:

Event	Description
DataControlBase.CurrentItemChanged	Occurs after the focused row/card changes. Provides the information about the previous and current focused data item.
DataViewBase.FocusedRowHandleChanged	Occurs after the focused row/card’s handle changes. Provides the information about the previous and current focused row handle.

Related API

When the GridControl is loaded, it focuses the first row/card. To load the GridControl without a focused row/card, set the DataControlBase.AllowInitiallyFocusedRow property to false.

The GridControl scrolls its View to the focused row/card. To disable this behavior, set the DataViewBase.AllowScrollToFocusedRow property to false.

Focus Cells

Availability

To allow users to focus cells, check that the DataViewBase.NavigationStyle property is set to GridViewNavigationStyle.Cell (default value).

In Code

To identify the focused cell, use a combination of the DataControlBase.CurrentItem / DataViewBase.FocusedRowHandle and DataControlBase.CurrentColumn properties.

The following code sample shows how to focus a cell with the specified value:

View Example: Focus a Cell with the Specified Value

C#

void Button_Click(object sender, RoutedEventArgs e) {
    FocusCellInGrid();
}

public void FocusCellInGrid() {
    grid.CurrentColumn = view.VisibleColumns[2];
    view.FocusedRowHandle = 0;
}

VB.NET

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    FocusCellInGrid()
End Sub

Public Sub FocusCellInGrid()
    grid.CurrentColumn = view.VisibleColumns(2)
    view.FocusedRowHandle = 0
End Sub

Use the following methods to move the cell focus within a row:

Method	Description
DataViewBase.MoveNextCell	Focuses the next cell after the focused cell.
DataViewBase.MovePrevCell	Focuses the previous cell before the focused cell.

Related API

Set the column’s ColumnBase.AllowFocus property to false to prohibit end users from focusing this column.

End users can press the Tab key to move focus to the next cell. To exclude a column from the tab order, set its ColumnBase.TabStop property to false.

Column Keyboard Actions

Users can use the keyboard to focus Data Grid’s column headers and trigger actions related to the focused column. To enable this functionality, set the TableView.AllowHeaderNavigation property to true. After that, you can navigate to the header panel with the Tab and Shift+ Tab keys, the arrow keys, or the Ctrl + Shift + Tab shortcut that focuses the current cell’s header. To return to the data row, press Ctrl + Tab. Once a header is focused, you can trigger the following actions:

Action	Keyboard hotkey
Sort the column	Enter
Add the column to multi-column sorting	Shift + Enter
Remove the column from multi-column sorting	Ctrl + Enter
Invoke the drop-down filter popup	Alt + ↓ or F4
Reorder the column	Ctrl + ← and Ctrl + →
Invoke the context menu	Shift + F10 or Context Menu ≣
Change the column’s width	Shift + ← and Shift + →

Customize Appearance

The following table lists properties that allow you to customize the appearance of focused rows and cells:

Property	Description
DataViewBase.ShowFocusedRectangle	Gets or sets whether a focus rectangle is painted around the focused cell or row. This is a dependency property.
DataViewBase.FocusedCellBorderTemplate	Gets or sets the template that defines the presentation of a focused cell’s border. This is a dependency property.
TableView.FocusedRowBorderTemplate / TreeListView.FocusedRowBorderTemplate	Gets or sets the template that defines the presentation of a focused row’s border. This is a dependency property.
GridViewBase.FocusedGroupRowBorderTemplate	Gets or sets a template that defines the presentation of the focused group row’s border. This is a dependency property.
CardView.FocusedCardBorderTemplate	Gets or sets the template that defines the presentation of a focused card’s border. This is a dependency property.
CardView.FocusedCellBorderCardViewTemplate	Gets or sets the template that defines the presentation of a focused cell’s border in a Card View. This is a dependency property.
CardView.VerticalFocusedGroupRowBorderTemplate	Gets or sets the border template of the focused group row. This is a dependency property.

Example

This example demonstrates how to use the View’s RowStyle and CellStyle properties to apply custom styles to the focused row and cell. To identify whether the row and cell are focused, the attached IsFocusedRow and IsFocusedCell properties are used.

View Example: Change the Appearance of Focused Rows and Cells

XAML

<Window.Resources>
    <Style x:Key="FocusedCellStyle" TargetType="dxg:LightweightCellEditor">
        <Style.Triggers>
            <Trigger Property="dxg:DataViewBase.IsFocusedCell" Value="True">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="Yellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="FocusedRowStyle" TargetType="dxg:RowControl">
        <Style.Triggers>
            <Trigger Property="dxg:DataViewBase.IsFocusedRow" Value="True">
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew">
        <dxg:GridControl.View>
            <dxg:TableView AutoWidth="True"
                           CellStyle="{StaticResource FocusedCellStyle}" 
                           RowStyle="{StaticResource FocusedRowStyle}"/>
        </dxg:GridControl.View>
    </dxg:GridControl>
</Grid>