Web Components Tree Grid Keyboard Navigation

    La característica de navegación por teclado de Ignite UI for Web Components en la cuadrícula de árbol de Web Components proporciona una amplia variedad de interacciones de teclado para el usuario. Mejora la accesibilidad de la IgcTreeGridComponent y permite al usuario navegar a través de cualquier tipo de elementos dentro (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). Esta funcionalidad está habilitada de forma predeterminada y el desarrollador tiene la opción de anular cualquiera de los comportamientos predeterminados de una manera fácil.

    Las tabulaciones de la se han reducido para que la IgcTreeGridComponent navegación cumpla con los estándares de accesibilidad del W3C y sea cómoda de usar.

    Actualmente, se introducen IgcTreeGridComponent las siguientes tabulaciones:

    • Área GroupBy o Barra de herramientas (si está habilitada).
    • Tree Grid header.
    • Tree Grid body.
    • Column summaries (if enabled).
    • Paginador de cuadrícula de árbol (si está 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

    Ahora se introduce un soporte completo de navegación por teclado en el IgcTreeGridComponent encabezado. Los encabezados de columna se pueden recorrer fácilmente con las teclas de flecha. Además, hay una serie de combinaciones de teclas que desencadenan acciones en las columnas como filtrar, ordenar, agrupar, etc. Cuando el contenedor de encabezado está enfocado, están disponibles las siguientes combinaciones de IgcTreeGridComponent teclas:

    Key Combinations

    • ↑ navega una celda hacia arriba en los encabezados (sin bucles). Disponible solo cuando se definen Diseño de varias filas (MRL) o Encabezados de varias columnas (MCH).

    • ↓ navega una celda hacia abajo en los encabezados (sin ajuste). Disponible solo cuando se definen Diseño de varias filas (MRL) o Encabezados de varias columnas (MCH).

    • ← navega una celda hacia la izquierda (sin bucles).

    • → navega una celda hacia la derecha (sin ajustar entre líneas).

    • Ctrl + ← navega a la celda más a la izquierda de la fila; si MRL o MCH están habilitados, navega a la celda más a la izquierda en el mismo nivel.

    • Inicio navega hasta la celda más a la izquierda de la fila; si MRL o MCH están habilitados, navega a la celda más a la izquierda en el mismo nivel.

    • Ctrl + → navega a la celda más a la derecha de la fila; si MRL o MCH están habilitados, navega a la celda más a la derecha en el mismo nivel.

    • Fin navega a la celda más a la derecha de la fila; si MRL o MCH están habilitados, navega a la celda más a la derecha en el mismo nivel.

    • Alt + L abre el cuadro de diálogo Filtrado avanzado si el Filtrado avanzado está habilitado.

    • Ctrl + Shift + L abre el cuadro de diálogo Filtro de estilo de Excel o el filtro predeterminado (fila) si la columna se puede filtrar.

    • Ctrl + ↑ ordena el encabezado de la columna activa en orden ASC. Si la columna ya está ordenada en ASC, se borra el estado de clasificación.

    • Ctrl + ↓ ordena el encabezado de la columna activa en orden DSC. Si la columna ya está ordenada en DSC, se borra el estado de clasificación.

    • El espacio selecciona la columna. Si la columna ya está seleccionada, se borra la selección.

    • Shift + Alt + → desagrupa la columna, si la columna está marcada como agrupable.

    • Alt + ← o Alt + ↑ contrae el encabezado del grupo de columnas, si el encabezado aún no está contraído.

    • Alt + → o Alt + ↓ expande el encabezado del grupo de columnas, si el encabezado aún no está expandido.

    Body navigation

    Cuando el IgcTreeGridComponent cuerpo está enfocado, están disponibles las siguientes combinaciones de teclas:

    Key Combination

    • ↑- navega una celda hacia arriba.
    • ↓ navega una celda hacia abajo.
    • ← navega una celda hacia la izquierda (sin ajustar entre líneas).
    • →- navega una celda hacia la derecha (sin ajustar entre líneas).
    • Ctrl + ← navega a la celda más a la izquierda de la fila.
    • Ctrl + → navega a la celda más a la derecha de la fila.
    • Ctrl + ↑ navega a la primera celda de la columna.
    • Ctrl + ↓ navega hasta la última celda de la columna.
    • Inicio navega a la celda más a la izquierda de la fila.
    • Fin navega a la celda más a la derecha de la fila.
    • Ctrl + Inicio navega a la celda de datos superior izquierda de la cuadrícula.
    • Ctrl + Fin navega hasta la celda de datos inferior derecha de la cuadrícula.
    • Re Pág desplaza una página (puerto de visualización) hacia arriba.
    • Av Pág desplaza una página (puerto de visualización) hacia abajo.
    • Enter enters edit mode.
    • F2 enters edit mode.
    • Esc exits edit mode.
    • Pestaña disponible solo si hay una celda en modo de edición; mueve el foco a la siguiente celda editable de la fila; después de llegar a la última celda de la fila, mueve el foco a la primera celda editable de la siguiente fila. Cuando la edición de filas está habilitada, mueve el foco de la celda editable más a la derecha a los botones CANCELAR y LISTO, y del botón LISTO a la celda editable más a la izquierda de la fila.
    • Shift + Tab: disponible solo si hay una celda en modo de edición; mueve el foco a la celda editable anterior de la fila; después de llegar a la primera celda de la fila, mueve el foco a la última celda editable de la fila anterior. Cuando la edición de filas está habilitada, mueve el foco de la celda editable más a la derecha a los botones CANCELAR y LISTO, y del botón LISTO a la celda editable más a la derecha de la fila.
    • Espacio: selecciona la fila, si la Selección de fila está habilitada.
    • Alt + ← or Alt + ↑ -

    contrae el nodo actual.

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

    Expande el nodo actual.

    Practique todas las acciones mencionadas anteriormente en el ejemplo de demostración a continuación. Enfoque cualquier elemento de la cuadrícula navegable y se mostrará una lista con algunas de las acciones disponibles para el elemento para guiarlo.

    Manifestación

    Custom Keyboard Navigation

    Anular el comportamiento predeterminado para una determinada tecla o combinación de teclas es uno de los beneficios que ofrece la función de navegación por teclado. Por ejemplo: presione la tecla Intro o Tab para navegar a la siguiente celda o a la celda siguiente. Este o cualquier otro escenario de navegación se logra fácilmente mediante la API de navegación por teclado:

    API Descripción Argumentos
    GridKeydown Un evento que se emite cuando se realiza cualquiera de las combinaciones o pulsaciones de teclas descritas anteriormente. Se puede cancelar. Para cualquier otra pulsación/combinación de teclas, utilice el valor predeterminadoonkeydown evento. IgcGridKeydownEventArgs
    ActiveNodeChange Un evento que se emite cuando se cambia el nodo activo. Puede usarlo para determinar la posición del foco activo (encabezado, cuerpo, etc.), índice de columna, índice de fila o nivel anidado. IgcActiveNodeChangeEventArgs
    NavigateTo Navega a una posición en la cuadrícula, en función de la y proporcionadaRowindex​VisibleColumnIndex. También puede ejecutar una lógica personalizada sobre el elemento de destino, a través de una función de devolución de llamada que acepta el parámetro de 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 DevuelveICellPosition objeto, que define la siguiente celda medianteRowIndex yVisibleColumnIndex. Se puede pasar una función de devolución de llamada como un tercer parámetro deGetNextCell método. La función de devolución de llamada aceptaIgcColumnComponent como parámetro y devuelve unboolean Indicación de valor si se cumple un criterio determinado:
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean
    GetPreviousCell DevuelveICellPosition objeto, que define la celda anterior medianteRowIndex yVisibleColumnIndex. Se puede pasar una función de devolución de llamada como un tercer parámetro deGetPreviousCell método. La función de devolución de llamada aceptaIgcColumnComponent como parámetro y devuelve unboolean Indicación de valor si se cumple un criterio determinado:
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean

    Probemos la API para demostrar cómo lograr escenarios comunes como la validación de entradas del usuario y la navegación personalizada. Primero necesitamos registrar un controlador de eventos para el evento GridKeydown:

    <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);
	}

    Según los valores de los argumentos del evento, identificamos dos casos en los que proporcionar nuestra propia lógica (ver arriba). Ahora, usando los métodos de la API, realicemos lo deseado: si el usuario presiona la tecla Tab sobre una celda en modo de edición, realizaremos la validación de la entrada. Si el usuario presiona la tecla Intro sobre una celda, moveremos el foco a la celda en la siguiente fila:

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

    Utilice la demostración a continuación para probar los escenarios personalizados que acabamos de implementar:

    • Haga doble clic o presione la tecla F2 en una celda de una columna numérica, cambie el valor a 7 y presione la tecla Tab. Se mostrará un mensaje rápido.
    • Seleccione una celda y presione la tecla Enter un par de veces. Cada pulsación de tecla moverá el foco a una celda en la siguiente fila, debajo de la misma columna.

    Manifestación

    Known Limitations

    Limitación Descripción
    Navegando dentro de una cuadrícula con contenedor principal desplazable. Si la cuadrícula se coloca dentro de un contenedor principal desplazable y el usuario navega a una celda de la cuadrícula que está fuera de la vista, el contenedor principal no se desplazará.

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.