Back to Devexpress

DxTreeList.EnterKeyDirection Property

blazor-devexpress-dot-blazor-dot-dxtreelist-73f72098.md

latest3.0 KB
Original Source

DxTreeList.EnterKeyDirection Property

In EditCell mode, specifies where focus moves after a user presses Enter.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(TreeListEnterKeyDirection.None)]
[Parameter]
public TreeListEnterKeyDirection EnterKeyDirection { get; set; }

Property Value

TypeDefaultDescription
TreeListEnterKeyDirectionNone

An enumeration value.

|

Available values:

NameDescription
None

Validate the cell value and close the in-place editor. The current cell remains focused.

| | Column |

Enter and Shift+Enter move focus one cell down or up in the same column.

| | Row |

Enter and Shift+Enter move focus one cell right or left in the same row. Focus can move to the next/previous row if the current cell is last/first.

|

Remarks

The TreeList component supports a number of keyboard shortcuts that speed up navigation and editing. When a cell has input focus and a user presses Enter, an in-place editor opens, where the user can modify cell content.

If an in-place editor is already open, Enter applies changes and closes the editor. The EnterKeyDirection property specifies where cell focus moves afterward.

Note

To use the Enter key in TreeList, set EditMode to TreeListEditMode.EditCell.

The following code snippet implements Excel-like behavior, where Enter moves focus to the cell below.

razor
<DxTreeList @ref="TreeList"
            Data="DataSource"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            HasChildrenFieldName="HasChildren"
            EditMode="TreeListEditMode.EditCell"
            EnterKeyDirection="TreeListEnterKeyDirection.Column"
            EditOnKeyPress="true">
    <Columns>
        *@* ... *@
    </Columns>
</DxTreeList>

Run Demo: Edit Cell

Tip

Shift+Enter moves focus in the opposite direction.

For a smoother and faster data entry experience, enable the EditOnKeyPress property. This allows users to activate edit mode by typing in a focused cell, without an extra click or key press.

Implements

EnterKeyDirection

See Also

DxTreeList Class

DxTreeList Members

DevExpress.Blazor Namespace