Web Components Tree Grid Keyboard Navigation

    O recurso Navegação Ignite UI for Web Components Teclado em Web Components Grade de Árvore fornece uma grande variedade de interações de teclado para o usuário. Melhora a acessibilidade do IgcTreeGridComponent e permite ao usuário navegar por qualquer tipo de elemento interno (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). Essa funcionalidade é habilitada por padrão e o desenvolvedor tem a opção de substituir qualquer um dos comportamentos padrão de maneira fácil.

    As tabulações do IgcTreeGridComponent foram reduzidas para que a navegação esteja em conformidade com os padrões de acessibilidade do W3C e seja conveniente de usar.

    Atualmente, o IgcTreeGridComponent introduz as seguintes paradas de tabulação:

    • GroupBy ou Área da barra de ferramentas (se habilitado).
    • Tree Grid header.
    • Tree Grid body.
    • Column summaries (if enabled).
    • Paginador de grade de árvore (se habilitado).

    [!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

    Um suporte completo de navegação por teclado no IgcTreeGridComponent cabeçalho agora é introduzido. Os cabeçalhos das colunas podem ser facilmente percorridos com as teclas de seta. Além disso, há uma série de combinações de teclas que acionam ações nas colunas, como filtragem, classificação, agrupamento e etc. Quando o IgcTreeGridComponent contêiner de cabeçalho está focado, as seguintes combinações de teclas estão disponíveis:

    Key Combinations

    • ↑ navega uma célula para cima nos cabeçalhos (sem looping). Disponível somente quando o Layout de Várias Linhas (MRL) ou Cabeçalhos de Várias Colunas (MCH) são definidos.

    • ↓ navega uma célula para baixo nos cabeçalhos (sem quebra). Disponível somente quando o Layout de Várias Linhas (MRL) ou Cabeçalhos de Várias Colunas (MCH) são definidos.

    • ← navega uma célula restante (sem looping).

    • → navega uma célula para a direita (sem quebra entre as linhas).

    • Ctrl + ← navega até a célula mais à esquerda da linha; se o MRL ou o MCH estiverem ativados, navega até a célula mais à esquerda no mesmo nível.

    • Home navega até a célula mais à esquerda da linha; se MRL ou MCH estiverem ativados, navega até a célula mais à esquerda no mesmo nível.

    • Ctrl + → navega até a célula mais à direita na linha; se o MRL ou o MCH estiverem ativados, navega até a célula mais à direita no mesmo nível.

    • End navega até a célula mais à direita na linha; se o MRL ou o MCH estiverem ativados, navega até a célula mais à direita no mesmo nível.

    • Alt + L abre a caixa de diálogo Filtragem Avançada se a Filtragem Avançada estiver ativada.

    • Ctrl + Shift + L abre a caixa de diálogo Filtro de Estilo do Excel ou o filtro padrão (linha) se a coluna for filtrável.

    • Ctrl + ↑ classifica o cabeçalho da coluna ativa na ordem ASC. Se a coluna já estiver classificada no ASC, o estado de classificação será limpo.

    • Ctrl + ↓ classifica o cabeçalho da coluna ativa na ordem DSC. Se a coluna já estiver classificada no DSC, o estado de classificação será limpo.

    • Space seleciona a coluna. Se a coluna já estiver selecionada, a seleção será desmarcada.

    • Shift + Alt + → desagrupa a coluna, se a coluna estiver marcada como agrupável.

    • Alt + ← ou Alt + ↑ recolhe o cabeçalho do grupo de colunas, se o cabeçalho ainda não estiver recolhido.

    • Alt + → ou Alt + ↓ expande o cabeçalho do grupo de colunas, se o cabeçalho ainda não estiver expandido.

    Body navigation

    Quando o IgcTreeGridComponent corpo está focado, as seguintes combinações de teclas estão disponíveis:

    Key Combination

    • ↑- navega uma célula para cima.
    • ↓ navega uma célula para baixo.
    • ← navega uma célula à esquerda (sem quebra entre as linhas).
    • →- navega uma célula para a direita (sem quebra entre as linhas).
    • Ctrl + ← navega até a célula mais à esquerda da linha.
    • Ctrl + → navega até a célula mais à direita da linha.
    • Ctrl + ↑ navega até a primeira célula da coluna.
    • Ctrl + ↓ navega até a última célula da coluna.
    • Home Navega até a célula mais à esquerda da linha.
    • End navega até a célula mais à direita da linha.
    • Ctrl + Home navega até a célula de dados superior esquerda na grade.
    • Ctrl + End navega até a célula de dados inferior direita na grade.
    • Page Up rola uma página (porta de exibição) para cima.
    • Page Down rola uma página (porta de exibição) para baixo.
    • Enter enters edit mode.
    • F2 enters edit mode.
    • Esc exits edit mode.
    • Tab disponível apenas se houver uma célula no modo de edição; move o foco para a próxima célula editável na linha; Depois de chegar à última célula da linha, move o foco para a primeira célula editável na próxima linha. Quando a Edição de Linha está ativada, move o foco da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO e do botão CONCLUÍDO para a célula editável mais à esquerda na linha.
    • Shift + Tab- disponível somente se houver uma célula no modo de edição; move o foco para a célula editável anterior na linha; depois de atingir a primeira célula na linha, move o foco para a última célula editável na linha anterior. Quando a Edição de Linha está ativada, move o foco da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO e do botão CONCLUÍDO para a célula editável mais à direita na linha.
    • Space- seleciona a linha, se a Seleção de linha estiver ativada.
    • Alt + ← or Alt + ↑ -

    recolhe o nó atual.

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

    expande o nó atual.

    Pratique todas as ações mencionadas acima no exemplo de demonstração abaixo. Concentre qualquer elemento de grade navegável e uma lista com algumas das ações disponíveis para o elemento será mostrada para guiá-lo.

    Demo

    Custom Keyboard Navigation

    Substituir o comportamento padrão de uma determinada tecla ou combinação de teclas é um dos benefícios que o recurso de navegação por teclado oferece. Por exemplo: pressione a Enter tecla ou Tab para navegar até a próxima célula ou a célula abaixo. Esse ou qualquer outro cenário de navegação é facilmente obtido pela API de navegação por teclado:

    API Descrição Argumentos
    GridKeydown Um evento que é emitido quando qualquer uma das combinações de teclas descritas acima é executada. Pode ser cancelado. Para qualquer outra tecla pressionada/combinada, use o evento padrãoonkeydown. IgcGridKeydownEventArgs
    ActiveNodeChange Um evento que é emitido quando o nó ativo é alterado. Você pode usá-lo para determinar a posição do foco ativo (cabeçalho, tbody etc.), índice de coluna, índice de linha ou nível aninhado. IgcActiveNodeChangeEventArgs
    NavigateTo Navega para uma posição na grade, com base no fornecidoRowindex eVisibleColumnIndex. Ele também pode executar uma lógica personalizada sobre o elemento de destino, por meio de uma função de retorno de chamada que aceita o parâmetro do tipo{ targetType: GridKeydownTargetType, target: Object }. Uso:
    grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });    		 RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }) => {}
    GetNextCell retornaICellPosition objeto, que define a próxima célula porRowIndex eVisibleColumnIndex. Uma função de retorno de chamada pode ser passada como um terceiro parâmetro doGetNextCell método. A função de retorno de chamada aceitaIgcColumnComponent como um parâmetro e retorna uma indicação deboolean valor se um determinado critério for atendido:
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean
    GetPreviousCell retornaICellPosition objeto, que define a célula anterior porRowIndex eVisibleColumnIndex. Uma função de retorno de chamada pode ser passada como um terceiro parâmetro doGetPreviousCell método. A função de retorno de chamada aceitaIgcColumnComponent como um parâmetro e retorna uma indicação deboolean valor se um determinado critério for atendido:
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean

    Vamos experimentar a API para demonstrar como obter cenários comuns, como validação de entrada do usuário e navegação personalizada. Primeiro, precisamos registrar um manipulador de eventos para o GridKeydown evento:

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

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

    Com base nos valores de argumento do evento, identificamos dois casos, onde fornecer nossa própria lógica (veja acima). Agora, usando os métodos da API, vamos realizar o desejado - se o usuário estiver pressionando Tab a tecla sobre uma célula no modo de edição, realizaremos a validação na entrada. Se o usuário estiver pressionando Enter a tecla sobre uma célula, moveremos o foco para a célula na próxima linha:

        // 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.

    Use a demonstração abaixo para experimentar os cenários personalizados que acabamos de implementar:

    • Clique duas vezes ou pressione F2 a tecla em uma célula em uma coluna numérica, altere o valor para 7 e pressione Tab a tecla . A mensagem de prompt será exibida.
    • Selecione uma célula e pressione Enter a tecla algumas vezes. Cada pressionamento de tecla moverá o foco para uma célula na próxima linha, na mesma coluna.

    Demo

    Known Limitations

    Limitação Descrição
    Navegando dentro de uma grade com contêiner pai rolável. Se a grade estiver posicionada dentro de um contêiner pai rolável e o usuário navegar até uma célula de grade que está fora de exibição, o contêiner pai não será rolado.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.