Angular Tree Grid Keyboard Navigation

    La navegación con el teclado en IgxTreeGrid proporciona una rica variedad de interacciones con el teclado para el usuario. Mejora la accesibilidad de IgxTreeGrid y permite navegar a través de cualquier tipo de elementos internos (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 sencilla.

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

    Actualmente, IgxTreeGrid introduce las siguientes tabulaciones:

    • Área GroupBy o Barra de herramientas (si está habilitada);
    • IgxTreeGrid header;
    • IgxTreeGrid body;
    • Resúmenes de columnas (si están habilitados);
    • IgxTreeGrid paginator (if enabled);
    Note

    Debido a este cambio, la navegación entre las celdas con tabulador y Shift + Tab ya no es compatible en IgxTreeGrid. Al presionar la tecla Tab ahora se pasa por las tabulaciones en el siguiente orden: GroupBy / Barra de herramientas-> Encabezados-> Cuerpo-> Resúmenes-> Pie de página/Paginador.

    Note

    Exponer cualquier elemento enfocable en el cuerpo de IgxTreeGrid a través de una plantilla puede introducir efectos secundarios en la navegación del teclado, ya que no se evita el comportamiento predeterminado del navegador. Es responsabilidad del desarrollador prevenirlo o modificarlo adecuadamente.

    Header Navigation

    Ahora se presenta soporte completo de navegación con teclado en el encabezado IgxTreeGrid. Los encabezados de las columnas 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 IgxTreeGrid está enfocado, las siguientes combinaciones de teclas están disponibles:

    Key Combinations

    • Flecha arriba navega una celda hacia arriba en los encabezados (sin bucles). Disponible solo cuando se definen el diseño de varias filas (MRL) o los encabezados de varias columnas (MCH)
    • Flecha hacia abajo navega una celda hacia abajo en los encabezados (sin ajuste). Disponible solo cuando se definen el diseño de varias filas (MRL) o los encabezados de varias columnas (MCH)
    • Flecha izquierda navega una celda hacia la izquierda (sin bucle)
    • Flecha derecha navega una celda hacia la derecha (sin ajuste entre líneas)
    • Ctrl + Flecha izquierda 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 + Flecha derecha 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 + Flecha arriba ordena el encabezado de la columna activa en orden ASC. Si la columna ya está ordenada en ASC, el estado de clasificación se borra
    • Ctrl + Flecha hacia abajo ordena el encabezado de la columna activa en orden DSC. Si la columna ya está ordenada en DSC, el estado de clasificación se borra
    • El espacio selecciona la columna; Si la columna ya está seleccionada, se borra la selección.

    Body navigation

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

    Key Combination

    • Flecha hacia arriba: navega una celda hacia arriba (sin ajuste)
    • Flecha hacia abajo navega una celda hacia abajo (sin ajuste)
    • La flecha izquierda navega una celda hacia la izquierda (sin ajuste entre líneas)
    • Flecha hacia la derecha: navega una celda hacia la derecha (sin ajuste entre líneas)
    • Ctrl + Flecha izquierda navega a la celda más a la izquierda de la fila
    • Ctrl + Flecha derecha navega a la celda más a la derecha de la fila
    • Ctrl + Flecha arriba navega a la primera celda de la columna
    • Ctrl + Flecha hacia abajo 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 a 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 se desplaza una página (puerto de visualización) hacia abajo
    • Enter ingresa al modo de edición
    • F2 ingresa al modo de edición
    • Esc sale del modo de edición
    • 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 filas está habilitada
    • Alt + Arrow Left or Alt + Arrow Up - collapses the current node
    • Alt + Arrow Right or Alt + Arrow Down - expands the current node

    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.

    Demo

    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. IGridKeydownEventArgs
    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. IActiveNodeChangeEventArgs
    navigateTo Navega a una posición en la cuadrícula, según lo proporcionadorowindex yvisibleColumnIndex. 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 parámetros 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 devolucionesICellPosition objeto, que define la siguiente celda porrowIndex yvisibileColumnIndex. Se puede pasar una función de devolución de llamada como tercer parámetro degetNextCell método. La función de devolución de llamada aceptaIgxColumnComponent como parámetro y devuelve unboolean indicación del valor si se cumple un criterio determinado:
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: número,currentVisibleColumnIndex: número,callback: (IgxColumnComponent) => booleano
    getPreviousCell devolucionesICellPosition objeto, que define la celda anterior porrowIndex yvisibileColumnIndex. Se puede pasar una función de devolución de llamada como tercer parámetro degetPreviousCell método. La función de devolución de llamada aceptaIgxColumnComponent como parámetro y devuelve unboolean indicación del valor si se cumple un criterio determinado:
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 currentRowIndex: número,currentVisibleColumnIndex: número,callback: (IgxColumnComponent) => booleano

    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:

    <igx-tree-grid #grid1 [data]="data" (gridKeydown)="customKeydown($event)">
</igx-tree-grid>

    public customKeydown(args: IGridKeydownEventArgs) {
    const target: IgxGridCell = args.target as IgxGridCell;
    const evt: KeyboardEvent = args.event as KeyboardEvent;
    const type = args.targetType;

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

    Según los valores de IGridKeydownEventArgs, 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 VALIDATON ON TAB
    if (target.column.dataType === 'number' && target.editValue < 18) {
        // alert the user that the input is invalid
        return;
    }
    // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    const nexRowIndex = target.row.expanded ? target.rowIndex + 2 : target.rowIndex + 1;
    grid.navigateTo(nexRowIndex, target.visibleColumnIndex,
        (obj) => { obj.target.nativeElement.focus(); });

    Nota: consulte el código de muestra para obtener detalles completos de la implementación.

    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 la columna Age, cambie el valor a 16 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.

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

    API References

    Additional Resources

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