Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
Activación de la celda de la rejilla Web Components
La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite una función de activación de celdas que permitirá la navegación con el teclado a través de las celdas de la cuadrícula. Esto se activa estableciendo la activationMode propiedad de la cuadrícula en Cell.
Ejemplo de activación de celda de cuadrícula de Web Components
<!DOCTYPE html><html><head><title>DataGridCellActivation</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options"><labelclass="options-item">Enter Key Mode: </label><selectclass="options-select"id="enterModeDropBox"><option>Edit</option><option>MoveUp</option><option>MoveDown</option><option>MoveLeft</option><option>MoveRight</option><option>None</option>
</select class="options-select">
<labelclass="options-label">Enter Key After Edit Mode: </label><selectclass="options-select"id="enterAfterEditMode"><option>MoveDown</option><option>MoveUp</option><option>MoveLeft</option><option>MoveRight</option>
</select class="options-select">
</div><igc-data-gridid="grid"height="100%"width="100%"default-column-min-width="150"is-column-options-enabled="true"auto-generate-columns="false"selection-mode="None"activation-mode="Cell"><igc-text-columnfield="Name"></igc-text-column><igc-text-columnfield="Street"header-text="Address"></igc-text-column><igc-text-columnfield="City"></igc-text-column><igc-numeric-columnfield="Salary"positive-prefix="$"show-grouping-separator="true"></igc-numeric-column><igc-date-time-columnfield="Birthday" ></igc-date-time-column></igc-data-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Navegación estilo Excel
La propiedad enterBehaviorAfterEdit configurará la cuadrícula para navegar a la siguiente celda arriba, abajo, izquierda o derecha después de presionar la tecla Intro en el modo de edición. De lo contrario, la propiedad enterBehavior de la cuadrícula se puede usar para navegar a otras celdas, mientras no esté en modo de edición, arriba, abajo, izquierda o derecha.
Navegación por teclado
Después de configurar la propiedad activationMode de la cuadrícula en Cell, esto habilitará una variedad de opciones de navegación con el teclado en la cuadrícula de datos. A continuación se muestra una descripción de cada una de las pulsaciones/combinaciones de teclas y el efecto que tendrán en relación con la celda actualmente activada:
↑: Navega una celda hacia arriba.
↓: Navega una celda hacia abajo.
←: navega una celda hacia la izquierda solo en la fila actual.
→: Navega una celda hacia la derecha solo en la fila actual.
Re Pág: desplaza la cuadrícula una página hacia arriba en la ventana gráfica.
Página abajo: desplaza la cuadrícula una página de la ventana gráfica hacia abajo.
Tabulador: mueve la celda activa a la siguiente celda a la derecha, o a la celda más a la izquierda de la siguiente fila si se llega a la última celda de esa fila.
Mayús + Tabulador: mueve la celda activa a la siguiente celda a la izquierda, o a la celda más a la derecha de la fila anterior si se llega a la primera celda de esa fila.
Ctrl + ↑: ir a la celda superior de la columna.
Ctrl + ↓: Ir a la celda inferior de la columna.
Ctrl + ←: moverse a la celda más a la izquierda de la fila.
Ctrl + →: Moverse a la celda más a la derecha de la fila.
Ctrl + Inicio: ir a la celda superior izquierda de la cuadrícula.
Ctrl + Fin: ir a la celda inferior derecha de la cuadrícula.