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.
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 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:
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. |
Related API
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:
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. |
Related API
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.
<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>