React Grid Keyboard Navigation - Ignite UI for React

The Ignite UI for React Keyboard Navigation feature in React Grid provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the IgrGrid and allows the user to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way.

The tabulations of the IgrGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use.

Currently, the IgrGrid introduces the following tab stops:

GroupBy 또는 도구 모음 영역 (활성화된 경우)
Grid header.
Grid body.
Column summaries (if enabled).
그리드 페이지네이터 (활성화된 경우).

[!Note] Due to this change, navigating between the cells with TAB and SHIFT + TAB is no longer supported in the IgrGrid. Pressing the TAB key now goes through the tab stops in the following order: GroupBy / Toolbar -> Headers -> Body -> Summaries -> Footer / Paginator.

[!Note] Exposing any focusable element into the IgrGrid body via template may introduce side effects in the keyboard navigation, since the default browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately.

A full keyboard navigation support in the IgrGrid header is now introduced. Column headers can be easily traversed with the arrow keys. Additionally, there are a number of key combinations that trigger actions on the columns like filtering, sorting, grouping and etc. When the IgrGrid header container is focused, the following key combinations are available:

Key Combinations

↑ 헤더에서 한 셀 위로 이동합니다(반복 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.
↓ 헤더에서 한 셀 아래로 이동합니다(줄 바꿈 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.
← 한 셀을 왼쪽으로 이동합니다(반복 없음).
→ 한 셀 오른쪽으로 이동합니다(줄 사이에 줄 바꿈 없음).
CTRL + ←는 행의 가장 왼쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 맨 왼쪽 셀로 이동합니다.
HOME 행의 가장 왼쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준에서 가장 왼쪽 셀로 이동합니다.
CTRL + → 행의 맨 오른쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 맨 오른쪽 셀로 이동합니다.
END 행에서 가장 오른쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준에서 가장 오른쪽 셀로 이동합니다.
ALT +고급 L 필터링이 활성화된 경우 고급 필터링 대화 상자를 엽니다.
CTRL + SHIFT + L는 Excel 스타일 필터 대화 상자를 열거나 열을 필터링할 수 있는 경우 기본(행) 필터를 엽니다.
CTRL + ↑는 활성 열 헤더를 ASC 순서로 정렬합니다. 열이 이미 ASC로 정렬된 경우 정렬 상태가 지워집니다.
CTRL + ↓는 활성 열 헤더를 DSC 순서로 정렬합니다. 열이 DSC에서 이미 정렬된 경우 정렬 상태가 지워집니다.
SPACE 열을 선택합니다. 열이 이미 선택되어 있으면 선택이 선택 취소됩니다.

SHIFT 열이 그룹화 가능으로 표시된 경우 + ALT + ← 컬럼을 그룹화합니다.

SHIFT + ALT + → 열이 그룹화 가능으로 표시된 경우 열의 그룹을 해제합니다.
ALT + ← 또는 ALT ++ ↑는 열 그룹 머리글이 아직 축소되지 않은 경우 축소합니다.
ALT + → 또는 ALT +는 ↓ 열 그룹 머리글을 확장합니다(머리글이 아직 확장되지 않은 경우).

When the IgrGrid body is focused, the following key combinations are available:

Key Combination

↑- 한 셀 위로 이동합니다.
↓ 한 셀 아래로 이동합니다.

← 한 셀 왼쪽으로 이동합니다(줄 바꿈 없음).
→- 한 셀 오른쪽으로 이동합니다(줄 바꿈 없음).
CTRL + ← 행의 맨 왼쪽 셀로 이동합니다.
CTRL + → 행의 맨 오른쪽 셀로 이동합니다.
CTRL + ↑ 열의 첫 번째 셀로 이동합니다.
CTRL + ↓ 열의 마지막 셀로 이동합니다.
HOME 행의 가장 왼쪽 셀로 이동합니다.
END 행의 가장 오른쪽 셀로 이동합니다.
CTRL + HOME 그리드의 가장 왼쪽 위 데이터 셀로 이동합니다.
CTRL + END 그리드의 오른쪽 하단 데이터 셀로 이동합니다.
PAGE UP 한 페이지(뷰 포트)를 위로 스크롤합니다.
PAGE DOWN 한 페이지(뷰 포트)를 아래로 스크롤합니다.
ENTER 편집 모드로 들어갑니다.
F2 enters edit mode.
ESC 편집 모드를 종료합니다.
TAB 편집 모드에 있는 셀이 있는 경우에만 사용할 수 있습니다. 포커스를 행의 다음 편집 가능한 셀로 이동합니다. 행의 마지막 셀에 도달한 후 다음 행의 첫 번째 편집 가능한 셀로 포커스를 이동합니다. 행 편집이 활성화되면 포커스를 가장 오른쪽에 있는 편집 가능한 셀에서 취소 및 완료 버튼으로, 완료 버튼에서 행의 가장 왼쪽에 있는 편집 가능한 셀로 이동합니다.
SHIFT + TAB- 편집 모드의 셀이 있는 경우에만 사용할 수 있습니다. 포커스를 행의 이전 편집 가능한 셀로 이동하고 행의 첫 번째 셀에 도달한 후 포커스를 이전 행의 마지막 편집 가능한 셀로 이동합니다. 행 편집이 활성화되면 포커스를 가장 오른쪽에 있는 편집 가능한 셀에서 취소 및 완료 버튼으로, 완료 버튼에서 행의 가장 오른쪽에 있는 편집 가능한 셀로 이동합니다.
SPACE-행 선택이 사용 가능한 경우 행을 선택합니다.
ALT + ← 또는 ALT + ↑-

그룹 행 위에 - 그룹을 축소합니다.

ALT + → or ALT + ↓ - over Group Row - expands the group.

ALT 마스터 세부 정보 행 위에 + ← 또는 ALT + ↑- 세부 정보 보기를 축소합니다.
ALT 마스터 세부 정보 행 위에 + → 또는 ALT + ↓- 세부 정보 보기를 확장합니다.
SPACE - over Group Row - selects all rows in the group, if rowSelection property is set to multiple.

아래 데모 샘플에서 위에 언급된 모든 작업을 연습해 보세요. 탐색 가능한 그리드 요소에 초점을 맞추면 해당 요소에 사용 가능한 일부 작업이 포함된 목록이 표시되어 안내됩니다.

데모

특정 키 또는 키 조합에 대한 기본 동작을 재정의하는 것은 키보드 탐색 기능이 제공하는 이점 중 하나입니다. 예를 들어, 또는 TAB 키를 ENTER 눌러 다음 셀 또는 아래 셀로 이동합니다. 이 탐색 시나리오 또는 다른 탐색 시나리오는 키보드 탐색 API를 통해 쉽게 수행할 수 있습니다.

Let's try the API to demonstrate how to achieve common scenarios like user input validation and custom navigation. First we need to register an event handler for the GridKeydown event:

<IgrGrid id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
</IgrGrid>

const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
  const args = eventArgs.detail;
  const target= args.target;
  const evt = args.event;
  const type = args.targetType;

  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
      // 1. USER INPUT VALIDATION ON TAB

  }
  if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
      // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
  }
}

이벤트 인수 값을 기반으로 자체 논리를 제공할 두 가지 경우를 식별했습니다(위 참조). 이제 API의 메서드를 사용하여 원하는 작업을 수행해 보겠습니다 - 사용자가 편집 모드에서 셀 위로 키를 누르 TAB는 경우 입력에 대한 유효성 검사를 수행합니다.

    // 1. USER INPUT VALIDATION ON TAB
    if (target.column.dataType === 'number' && target.editValue < 10) {
        // alert the user that the input is invalid
        return;
    }

[!Note] Please refer to the sample code for full implementation details.

아래 데모를 사용하여 방금 구현한 사용자 지정 시나리오를 시험해 보세요.

숫자 열의 셀에서 키를 두 번 클릭하거나 누르 F2 고 값을 7로 변경한 다음 키를 누릅니다 TAB. 프롬프트 메시지가 표시됩니다.
셀을 선택하고 키를 몇 번 누릅니다 ENTER. 키를 누를 때마다 포커스가 같은 열 아래의 다음 행의 셀로 이동합니다.

데모

Known Limitations

한정	설명
스크롤 가능한 상위 컨테이너를 사용하여 그리드 내부를 탐색합니다.	그리드가 스크롤 가능한 상위 컨테이너 내부에 배치되고 사용자가 보이지 않는 그리드 셀로 이동하는 경우 상위 컨테이너는 스크롤되지 않습니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

React Grid 키보드 탐색

Header Navigation

Key Combinations

Body navigation

Key Combination

데모

Custom Keyboard Navigation

데모

Known Limitations

Additional Resources