Blazor Tree Grid Keyboard Navigation

The Ignite UI for Blazor Keyboard Navigation feature in Blazor Tree Grid provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the IgbTreeGrid 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.

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

Actualmente, introduceIgbTreeGrid los siguientes paradas de pestaña:

Á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 IgbTreeGrid. 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 IgbTreeGrid 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.

Ahora se introduce un soporte completo para navegación con teclado en elIgbTreeGrid encabezado. Los encabezados de columna pueden recorrerse fácilmente con las teclas de flecha. Además, hay varias combinaciones de teclas que activan acciones en las columnas como filtrar, ordenar, agrupar, etc. Cuando elIgbTreeGrid contenedor del encabezado está enfocado, están disponibles las siguientes combinaciones de 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.
HOME 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.
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.
END 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 columna activo en orden ASC. Si la columna ya está ordenada en ASC, se borra el estado de ordenación.
CTRL + ↓ ordena el encabezado de columna activo en orden de DSC. Si la columna ya está ordenada en DSC, se borra el estado de ordenación.
SPACE selecciona la columna. Si la columna ya está seleccionada, la selección está desactivada.
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.

Cuando elIgbTreeGrid cuerpo está enfocado, están disponibles las siguientes combinaciones clave:

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 a la última celda de la columna.
HOME navega a la celda más a la izquierda de la fila.
END navega a la celda más a la derecha de la fila.
CTRL + HOME navega a la celda de datos superior izquierda de la cuadrícula.
CTRL + END navega a la celda de datos inferior derecha de la cuadrícula.
PAGE UP se desplaza una página (ventana gráfica) hacia arriba.
PAGE DOWN se desplaza una página (puerto de visualización) hacia abajo.
ENTER Entra en modo de edición.
F2 enters edit mode.
ESC sale del modo de edición.
TAB 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 TE 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.
SPACE- selecciona la fila, si la selección de filas está habilitada.
ALT + ← o 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.

Anular el comportamiento predeterminado para una determinada tecla o combinación de teclas es uno de los beneficios que proporciona la característica de navegación con teclado. Por ejemplo: presione la ENTER tecla o TAB para navegar a la siguiente celda o a la celda de abajo. 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 predeterminado`onkeydown` evento.	`IgbGridKeydownEventArgs`
`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.	`IgbActiveNodeChangeEventArgs`

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

<IgbTreeGrid Id="grid1" PrimaryKey="ProductID" GridKeydownScript="WebGridCustomKBNav">
</IgbTreeGrid>

// In JavaScript

igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
    const args = evtArgs.detail;
    const target = args.target;
    const evt = args.event;
    const type = args.targetType;
    const grid = document.getElementById("grid1");

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

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


// In JavaScript

igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
    const args = evtArgs.detail;
    const target = args.target;
    const evt = args.event;
    const type = args.targetType;
    const grid = document.getElementById("grid1");

    // 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
    grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => {
            obj.target.activate();
    });
}, false);

[!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 F2 tecla en una celda en una columna numérica, cambie el valor a 7 y presione TAB la tecla. Se mostrará un mensaje de aviso.
Seleccione una celda y presione ENTER la tecla un par de veces. Cada vez que se presiona una tecla, el foco se moverá 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.

Blazor Tree Grid Keyboard Navigation

Header Navigation

Key Combinations

Body navigation

Key Combination

Custom Keyboard Navigation

Manifestación

Known Limitations

Additional Resources