Web Components Tree Grid Keyboard Navigation

    Web Components Tree Grid의 Ignite UI for Web Components 키보드 탐색 기능은 사용자에게 다양한 키보드 상호 작용을 제공합니다. IgcTreeGridComponent의 접근성을 향상시키고 사용자가 내부의 모든 유형의 요소(셀, 행, 열 머리글, 도구 모음, 바닥글 등)를 탐색할 수 있도록 합니다. 이 기능은 기본적으로 활성화되어 있으며 개발자는 모든 기본 동작을 쉽게 재정의할 수 있습니다.

    탐색이 W3C 접근성 표준을 준수하고 사용하기 편리하도록 표 IgcTreeGridComponent가 축소되었습니다.

    현재 다음과 같은 탭 정지가 IgcTreeGridComponent 도입되었습니다.

    • GroupBy 또는 도구 모음 영역 (활성화된 경우)
    • Tree Grid header.
    • Tree Grid body.
    • Column summaries (if enabled).
    • Tree Grid paginator (활성화된 경우).

    [!Note] Due to this change, navigating between the cells with TAB and SHIFT + TAB is no longer supported in the IgcTreeGridComponent. 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 IgcTreeGridComponent 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.

    Header Navigation

    전체 키보드 탐색에서 지원 IgcTreeGridComponent 이제 헤더가 도입되었습니다. 열 머리글은 화살표 키를 사용하여 쉽게 탐색할 수 있습니다. 또한 다음과 같은 열에서 작업을 트리거하는 여러 키 조합이 있습니다. 필터링, 정렬, 그룹화 그리고 등등. 때 IgcTreeGridComponent 헤더 컨테이너에 초점이 맞춰져 있는 경우 다음 키 조합을 사용할 수 있습니다.

    Key Combinations

    • ↑ 헤더에서 한 셀 위로 이동합니다(반복 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.

    • ↓ 헤더에서 한 셀 아래로 이동합니다(줄 바꿈 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.

    • ← 한 셀을 왼쪽으로 이동합니다(반복 없음).

    • → 한 셀 오른쪽으로 이동합니다(줄 사이에 줄 바꿈 없음).

    • CTRL + ← navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level.

    • HOME navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level.

    • CTRL + → navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level.

    • END navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level.

    • ALT + L opens Advanced Filtering dialog if Advanced Filtering is enabled.

    • CTRL + SHIFT + L opens the Excel Style Filter dialog or the default (row) filter if the column is filterable.

    • CTRL + ↑ sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared.

    • CTRL + ↓ sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared.

    • SPACE selects the column. If the column is already selected, selection is cleared.

    • SHIFT + ALT + → ungroups the column, if the column is marked as groupable.

    • ALT + ← or ALT + ↑ collapses the column group header, if the header is not already collapsed.

    • ALT + → or ALT + ↓ expands the column group header, if the header is not already expanded.

    Body navigation

    몸에 초점이 IgcTreeGridComponent 맞춰지면 다음과 같은 키 조합을 사용할 수 있습니다.

    Key Combination

    • ↑- 한 셀 위로 이동합니다.
    • ↓ 한 셀 아래로 이동합니다.
    • ← 한 셀 왼쪽으로 이동합니다(줄 바꿈 없음).
    • →- 한 셀 오른쪽으로 이동합니다(줄 바꿈 없음).
    • CTRL + ← navigates to the leftmost cell in the row.
    • CTRL + → navigates to the rightmost cell in the row.
    • CTRL + ↑ navigates to the first cell in the column.
    • CTRL + ↓ navigates to the last cell in the column.
    • HOME navigates to the leftmost cell in the row.
    • END navigates to the rightmost cell in the row.
    • CTRL + HOME navigates to the top leftmost data cell in the grid.
    • CTRL + END navigates to the bottom rightmost data cell in the grid.
    • PAGE UP scrolls one page (view port) up.
    • PAGE DOWN scrolls one page (view port) down.
    • ENTER enters edit mode.
    • F2 enters edit mode.
    • ESC exits edit mode.
    • TAB available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When Row Editing is enabled, moves the focus from the right-most editable cell to the CANCEL and DONE buttons, and from DONE button to the left-most editable cell in the row.
    • SHIFT + TAB - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When Row Editing is enabled, moves the focus from the right-most editable cell to CANCEL and DONE buttons, and from DONE button to the right-most editable cell in the row.
    • SPACE - selects the row, if Row Selection is enabled.
    • ALT + ← or ALT + ↑ -

    현재 노드를 축소합니다.

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

    현재 노드를 확장합니다.

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

    데모

    Custom Keyboard Navigation

    Overriding the default behavior for a certain key or keys combination is one of the benefits that the Keyboard Navigation feature provides. For example: press the ENTER or TAB key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the Keyboard Navigation API:

    API 설명 인수
    GridKeydown 위에서 설명한 키 누름/조합이 수행될 때 발생하는 이벤트입니다. 취소될 수 있습니다. 다른 키 누르기/조합의 경우 기본값을 사용하십시오.onkeydown 이벤트. IgcGridKeydownEventArgs
    ActiveNodeChange 활성 노드가 변경될 때 발생하는 이벤트입니다. 이를 사용하여 활성 포커스 위치(헤더, tbody 등), 열 인덱스, 행 인덱스 또는 중첩 수준을 결정할 수 있습니다. IgcActiveNodeChangeEventArgs
    navigateTo 제공된Rowindex andVisibleColumnIndex를 기반으로 그리드의 위치로 이동합니다. 또한 type{ targetType: GridKeydownTargetType, target: Object }의 param을 허용하는 콜백 함수를 통해 대상 요소에 대해 사용자 지정 논리를 실행할 수 있습니다. 사용법:
    grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });    		 RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }) => {}
    getNextCell 다음 셀을 ANDICellPosition로 정의하는 객체를 반환RowIndex 합니다.VisibleColumnIndex 콜백 함수는 메서드의getNextCell 세 번째 매개 변수로 전달될 수 있습니다. 콜백 함수는 매개변수로 수락IgcColumnComponent 하고 주어진 기준이 충족되면 값 표시를 반환boolean 합니다.
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean
    getPreviousCell ​ICellPosition반환 객체, 이전 셀을 ANDRowIndex로 정의합니다.VisibleColumnIndex 콜백 함수는 메서드의getPreviousCell 세 번째 매개 변수로 전달될 수 있습니다. 콜백 함수는 매개변수로 수락IgcColumnComponent 하고 주어진 기준이 충족되면 값 표시를 반환boolean 합니다.
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean

    사용자 입력 유효성 검사 및 사용자 지정 탐색과 같은 일반적인 시나리오를 달성하는 방법을 보여주기 위해 API를 사용해 보겠습니다. 먼저 GridKeydown 이벤트에 대한 이벤트 핸들러를 등록해야 합니다.

    <igc-tree-grid id="grid1" primary-key="ProductID">
</igc-tree-grid>

    constructor() {
        const grid = this.grid = document.getElementById('grid1') as IgcTreeGridComponent;
		grid.data = this.data
		grid.addEventListener("gridKeydown", this.customKeydown);
	}

    public customKeydown(args: : CustomEvent<IgcGridKeydownEventArgs>) {
    const evt = args.detail;
    const target = evt.target as IgcCellType;
    const evt: KeyboardEvent = evt.event as KeyboardEvent;
    const type = evt.targetType;

    if (type === 'dataCell' && target.inEditMode && evt.key.toLowerCase() === 'tab') {
        // 1. USER INPUT VALIDATION ON TAB
    }
    if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
        // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    }
}

    Based on the event arg values we identified two cases, where to provide our own logic (see above). Now, using the methods from the API, let's perform the desired - if the user is pressing TAB key over a cell in edit mode, we will perform validation on the input. If the user is pressing ENTER key over a cell, we will move focus to cell in the next row:

        // 1. USER INPUT VALIDATION ON TAB
    if (target.column.dataType === 'number' && target.editValue < 10) {
        // alert the user that the input is invalid
        return;
    }
    // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    this.grid1.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => {
            obj.target.activate();
        });

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

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

    • Double click or press F2 key on a cell in a numeric column, change the value to 7 and press TAB key. Prompt message will be shown.
    • Select a cell and press ENTER key a couple of times. Every key press will move the focus to a cell in the next row, under the same column.

    데모

    Known Limitations

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

    Additional Resources

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