Skip to main content

Focus and Navigation

  • 6 minutes to read

This topic explains 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 a user.

DevExpress WPF Grid - Focused cell

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:

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 a focused row, node, or card, use DataControlBase.CurrentItem / DataViewBase.FocusedRowHandle properties. You can also use the TreeListView.FocusedNode property to get or set the focused node.

The following code sample focuses a row that contains the specified cell value:

DevExpress WPF Grid - Example - Focus a row that contains the specified cell value

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

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

The GridControl provides access to 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 methods mentioned above 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 access to the information about the previous and current focused data item.
DataViewBase.FocusedRowHandleChanged Occurs after the focused row/card’s handle changes. Provides access to the information about the previous and current focused row handle.

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

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

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 the combination of DataControlBase.CurrentItem / DataViewBase.FocusedRowHandle and DataControlBase.CurrentColumn properties.

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

WPF Grid - Focus Cell Example

View Example: Focus a Cell with the Specified Value

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

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

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.

Set the column’s ColumnBase.AllowFocus property to true 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 true.

Column Keyboard Actions

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 Tab and Shift + Tab keys, 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 uses the View’s RowStyle and CellStyle properties to apply custom styles to focused row and cell. To identify whether the row and cell are focused, use attached IsFocusedRow and IsFocusedCell properties.

Custom Focused Row and Cell Appearance

View Example: Change the Appearance of Focused Rows and Cells

<Window ...
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <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>
</Window>
See Also