Grids

Los grids son el componente principal de AWE para mostrar las listas de datos. Se definen con grid y columns:

• El grid es el contenedor de la lista de datos. Tiene la consulta a cargar y un conjunto de atributos para definir el comportamiento del grid.
• Cada columna contiene la fuente de los datos de la lista de datos, la etiqueta de la columna y otros atributos para administrar cada celda de columna.

También hay una etiqueta group-header que se utiliza para mostrar una cabecera de segundo nivel sobre un grupo de encabezados de columnas.

Esqueleto de XML

Para definir un grid o un treegrid en AWE debe seguir la siguiente estructura:

<grid id="[grid-identifier]" ...>
  <column ... ></column>
  ...
  <group-header ...>
    <column ...></column>
    ...
  </group-header>
  ...
  <button ... > ... </button>
  ...
  <context-button ...> ... </context button>
  ...
  <row-detail> ... </row-detail>
</grid>

Estructura de grid

<grid id="[grid-id]" style="[grid-style]" 
      multiselect="[grid-is-multiselect]" checkbox-multiselect="[checkbox-multiselectable]" editable="[grid-is-editable]" send-operations="[grid-is-multioperation]" initial-load="[initial-load]" server-action="[server-action]" target-action="[target-action]" max="[elements-per-page] pagination-disabled="[pagination-disabled]"">
...
</grid>

Atributos generales

Atributo	Uso	Tipo	Descripción	Valores
id	Obligatorio	String	Grid identifier. Con fines de referencia
label	Opcional	String	Título de grid (sólo para imprimir)	Nota: Puedes usar literales i18n
style	Opcional	String	Clases CSS de Grid
initial-load	Opcional	String	Llamada de acción del servidor para cargar los datos del grid. Sólo soporta el valor de query
server-action	Opcional	String	Llamada de acción del servidor	Ver lista de acciones del servidor
target-action	Opcional	String	Destino para llamar al servidor
max	Opcional	Entero	Número máximo de elementos a recuperar por página
pagination-disabled	Opcional	Boolean	Deshabilitado el elemento de paginación del grid	Nota: Valor predeterminado false
pager-values	Opcional	String	Activar paginador de grid. Establecer la lista de valores con el número de filas por página	Ejemplo: pager-value="5,25,50,100"
load-all	Opcional	Boolean	Cargar todos los valores del grid y ordenar y paginar localmente	Nota: El valor predeterminado es false
send-all	Opcional	Boolean	Enviar todos los valores del grid al servidor en lugar de a los seleccionados. (Las seleccionadas se enviarán el parámetro .selected)	Nota: El valor predeterminado es false
help	Opcional	String	Texto de ayuda para el grid	Nota: Puedes usar literales i18n
help-image	Opcional	String	Imagen de ayuda para el grid	Esta debe ser una ruta de imagen
icon-loading	Opcional	String	Establecer el icono de carga	skeleton, skeleton-dim, spinner, square, circles, carpet, dots, folding, squarebar, circlebar, cubes, icon, custom, none. Por defecto: la propiedad awe.application.component.grid-icon-loading (skeleton). skeleton muestra filas de relleno con las columnas del grid en la primera carga y en cada recarga; indica otro valor para desactivarlo en este grid. skeleton-dim las muestra en la primera carga, y una recarga con filas visibles las mantiene, atenuadas y no clicables (aria-busy="true"), en lugar de sustituirlas; con cualquier otro icono el grid conserva su icono en la primera carga y en las recargas
row-numbers	Opcional	Boolean	Indica si se muestran los números de fila	El valor predeterminado es true
row-height	Opcional	Entero	Establece la altura de la fila en píxeles (mínima si hay columnas con varias líneas). Sin él, el motor AngularJS toma la altura de fila de la densidad (una línea de texto y el padding vertical de celda de la densidad) y la actualiza al cambiar la densidad
validate-on-save	Opcional	Boolean	Establezca false para evitar validar la fila seleccionada al pulsar el botón save	El valor predeterminado es true
empty-icon	Opcional	String	Icono del estado vacío del grid	El valor predeterminado es inbox. Consulte iconos
empty-title	Opcional	String	Título del estado vacío del grid	Nota: Puede usar archivos i18n (locales). Por defecto: un título traducido "No se han encontrado registros"
empty-text	Opcional	String	Texto del estado vacío del grid	Nota: Puede usar archivos i18n (locales). Por defecto: un texto explicativo traducido
empty-action	Opcional	String	Identificador de un botón del grid que se ofrece en el estado vacío	El estado vacío muestra un botón con la etiqueta y el icono de ese botón, que ejecuta sus acciones
show-toolbar	Opcional	Boolean	Muestra la barra de herramientas del grid, con el diálogo de columnas y el botón de maximizar	Por defecto true. Use false para desactivarla
columns-panel	Opcional	String	Cómo muestra la barra de herramientas las columnas: un popover anclado al botón de columnas, un diálogo modal o un panel lateral anclado al borde derecho	popover, dialog o side-panel. Por defecto: grid-columns-panel (popover)
move-rows	Opcional	Boolean	Añade una columna inicial con un asa para mover las filas arrastrándolas. No disponible en grids en árbol	El valor predeterminado es false

Barra de herramientas

Todos los grids muestran una barra de herramientas, tanto en el motor AngularJS como en el de React, con dos botones:

• Columnas abre un popover anclado al botón con la lista de columnas del grid. El usuario muestra u oculta cada columna y la sube o la baja (con las flechas o arrastrando su asa); la cabecera muestra cuántas columnas están visibles («N de M visibles»).
• Maximizar hace que el grid ocupe el área de contenido de la pantalla, como el botón de maximizar de una ventana o una pestaña: el grid crece con una animación, la cabecera y el menú de la aplicación siguen visibles y el resto de la pantalla se desvanece hasta que se restaura el grid.

El popover no tiene fondo: el grid sigue visible y cada cambio se aplica a él de inmediato. Su pie tiene tres acciones:

Acción	Efecto
Restaurar predeterminado	Vuelve a la definición del XML de la pantalla y elimina la disposición que guardó el usuario
Cancelar	Deshace los cambios hechos desde que se abrieron las columnas (o desde el último Restaurar predeterminado) y las cierra
Guardar	Guarda la disposición actual para el usuario y cierra las columnas. Mientras guarda, el botón muestra un indicador de carga y Guardando… y está deshabilitado. Si no se puede guardar, siguen abiertas

El botón de cierre (x), Esc y un clic fuera cierran el popover y conservan los cambios; el foco vuelve al botón Columnas. Ya no existe la acción Mostrar todas: marque cada columna oculta.

Los cambios solo se conservan para las siguientes visitas cuando el usuario elige Guardar. La disposición guardada pertenece al usuario, así que le acompaña en otros navegadores y dispositivos, y se almacena en la tabla AweUsrGrdCnf (una fila por usuario, pantalla y grid; la crea una migración de base de datos). Restaurar predeterminado la elimina. El usuario siempre se toma de la sesión. La disposición se aplica al generar la pantalla: el grid se envía con su columnModel original más un columnLayout (el orden de las columnas y las ocultas), de modo que el primer pintado ya está personalizado.

Algunas reglas mantienen válida una disposición guardada cuando cambia la pantalla:

• Las columnas ocultas en el XML (hidden="true", por ejemplo las claves) nunca aparecen en el diálogo.
• Los identificadores de columna que ya no existen se ignoran, y una columna añadida al XML aparece visible en su posición del XML.
• Una columna solo se puede reordenar dentro de su propio group-header, y las columnas sin grupo entre sí; una columna nunca sale de su grupo, aunque la disposición guardada lo indique. Los grupos no se reordenan como bloques.
• Las cabeceras de grupo se calculan a partir de las columnas visibles de cada grupo, de modo que ocultar cualquier columna de un grupo (también la primera) mantiene las cabeceras alineadas, y un grupo sin columnas visibles no se muestra.

Con columns-panel="dialog" las columnas se abren en un diálogo modal, y con columns-panel="side-panel" en un panel anclado al borde derecho de la pantalla, ambos con el mismo contenido que el popover. Mantienen el foco del teclado dentro, se cierran con Esc, con su botón de cierre (x) o con un clic fuera, y devuelven el foco al botón Columnas. Los grids que no definen columns-panel usan la propiedad de aplicación awe.application.component.grid-columns-panel (popover por defecto), de modo que una aplicación puede mostrar las columnas de todos sus grids en un diálogo modal o en un panel lateral.

<grid id="UserGrid" columns-panel="side-panel" server-action="data" target-action="UserList">
  <column label="USER" name="user" />
</grid>

Use show-toolbar="false" para que un grid no tenga barra de herramientas; entonces siempre usa la definición del XML.

<grid id="UserGrid" show-toolbar="false" server-action="data" target-action="UserList">
  <column label="USER" name="user" />
</grid>

Las exportaciones a Excel y PDF y la impresión usan las columnas del XML de la pantalla, no la disposición del usuario.

Estado vacío

Un grid sin filas muestra un estado vacío en lugar de una tabla vacía, tanto en el motor AngularJS como en el de React. Se compone de un icono, un título y un texto. Los textos por defecto están traducidos; utilice empty-icon, empty-title y empty-text para cambiarlos. Mientras el grid se está cargando, no se muestra el estado vacío.

El atributo opcional empty-action apunta a un botón del grid (un button declarado dentro del grid). El estado vacío ofrece un botón con la etiqueta y el icono del botón referenciado, y al hacer clic en él se ejecutan las acciones de ese botón, por lo que puede usarse, por ejemplo, para limpiar los criterios de búsqueda.

<grid id="UserGrid" server-action="data" target-action="UserList"
      empty-icon="search" empty-title="GRID_NO_USERS" empty-text="GRID_NO_USERS_HELP" empty-action="ClearSearch">
  <column label="USER" name="user" />
  <button id="ClearSearch" label="BUTTON_CLEAR" icon="eraser" button-type="reset" />
</grid>

Detalle de fila

Un grid puede mostrar un área de detalle bajo cada fila. Con un elemento <row-detail> dentro del grid, cada fila empieza con un botón que abre, bajo la fila y a lo ancho de todo el grid, un texto construido a partir de una plantilla con los datos de la fila o un grid anidado alimentado con los datos de la fila (ver Detalle con un grid anidado). Funciona en ambos motores de cliente, y un grid sin <row-detail> se muestra exactamente igual que antes.

<grid id="GrdThemes" style="expand" initial-load="query" server-action="data" target-action="ThemeList" max="10">
  <column label="PARAMETER_ID" name="id" align="center" charlength="10"/>
  <column label="COLUMN_THEME" name="name" align="left" charlength="30"/>
  <column label="COLUMN_CODE" name="code" hidden="true"/>
  <column label="COLUMN_ACTIVE" name="active" hidden="true"/>
  <row-detail style="row-detail-card"><![CDATA[Theme: {name}
Code: {code}
Active: {active}]]></row-detail>
</grid>

El texto del elemento es la plantilla:

• Cada marcador {name} se sustituye por el campo name de la fila. Se puede usar cualquier campo de la fila, también los de las columnas ocultas (hidden="true"), de modo que el detalle puede mostrar datos que el grid no muestra.
• Cuando el campo es un objeto de celda, se muestra su etiqueta; si no la tiene, su valor.
• Un campo que la fila no tiene no muestra nada. Un texto entre llaves que no es un nombre de campo válido se mantiene tal cual.
• El detalle es texto plano: el HTML de la plantilla o de los datos se muestra como texto y nunca se interpreta.
• Se conservan los saltos de línea (los espacios consecutivos se reducen a uno). Utilice una sección CDATA para las plantillas de varias líneas y no sangre sus líneas.
• Declare un único <row-detail> por grid. Si hay más, solo se usa el primero.

El elemento <row-detail> admite un atributo:

Atributo	Uso	Tipo	Descripción	Valores
style	Opcional	String	Clases CSS que se añaden al área de detalle de cada fila, junto a su propia clase grid-row-detail	Nombres de clase separados por espacios. Ej. row-detail-card

Las clases dan estilo a toda el área (fondo, borde, márgenes, tipografía); la plantilla sigue siendo texto plano, por lo que no se puede dar estilo a sus partes por separado. Defina las clases en los estilos de su aplicación, por ejemplo:

.grid-row-detail.row-detail-card {
  padding: 0.75rem 1rem;
  line-height: 1.7;
  border-left: 4px solid currentColor;
}

Detalle con un grid anidado

En lugar de una plantilla, el <row-detail> puede contener un grid de solo lectura, por ejemplo los pedidos del producto de la fila abierta. Declárelo dentro del <row-detail>:

<grid id="GrdProducts" style="expand" initial-load="query" server-action="data" target-action="ProductList" max="10">
  <column label="COLUMN_PRODUCT" name="name" align="left" charlength="30"/>
  <column label="COLUMN_PRODUCT_ID" name="product" hidden="true"/>
  <row-detail style="row-detail-card">
    <grid id="GrdOrders" server-action="data" target-action="OrdersOfProduct" max="10">
      <column label="COLUMN_ORDER" name="order" align="left" charlength="15"/>
      <column label="COLUMN_STATUS" name="status" align="center" charlength="10"/>
      <button id="ButOrdersHelp" label="BUTTON_HELP" icon="info-circle">
        <button-action type="confirm" target="OrdersHelpMsg"/>
      </button>
    </grid>
  </row-detail>
</grid>

o tráigalo de otra pantalla con un include cuyo origen contenga solo ese grid:

<row-detail style="row-detail-card">
  <include target-screen="ProductOrders" target-source="orders"/>
</row-detail>

El grid anidado es una definición de grid normal: las columnas, los componentes y estilos de columna, la ordenación, la paginación y los botones (de la barra y columnas de botón) funcionan como en cualquier grid.

Datos de la fila padre. Cada petición de un grid anidado (sus cargas, ordenaciones y cambios de página, y las acciones de sus botones) envía cada campo de la fila padre como un valor único con el nombre <ParentGridId>.row.<column>, también los campos de las columnas ocultas. Su consulta los lee con una <variable> cuyo name es ese parámetro:

<query id="OrdersOfProduct">
  <table id="Orders"/>
  <field id="OrderId" alias="id"/>
  <field id="OrderCode" alias="order"/>
  <field id="Status" alias="status"/>
  <where>
    <and>
      <filter left-field="ProductId" condition="eq" right-variable="product"/>
    </and>
  </where>
  <variable id="product" type="INTEGER" name="GrdProducts.row.product"/>
</query>

Un objeto de celda de la fila padre se envía como su valor. Solo las peticiones de ese grid anidado llevan estos valores.

Comportamiento del grid anidado.

• Cada fila abierta tiene su propia instancia del grid anidado, con sus propios datos, página y orden: ordenar o paginar el grid anidado de una fila no cambia los demás.
• No es un componente de la pantalla: no se carga con la pantalla, se carga al abrir su fila y sus valores no forman parte de los valores del formulario de la pantalla (los demás botones y grids de la pantalla no los envían).
• El identificador de una instancia es <nestedGridId>-<rowId> (por ejemplo GrdOrders-7), y el de sus botones <buttonId>-<rowId>.
• La instancia se elimina al cerrar su fila y cuando el grid padre recarga sus datos (una nueva búsqueda, una recarga, o un cambio de página u orden que resuelve el servidor), de modo que no queda ningún estado anidado.
• El grid anidado tiene una altura fija de 18rem en ambos motores; sus filas se desplazan dentro de él.

Comportamiento:

• Puede haber varias filas abiertas a la vez. El botón no selecciona la fila, y seleccionar una fila no abre su detalle.
• El botón es un botón nativo: se llega a él con la tecla Tab y funciona con Enter y Espacio. Expone aria-expanded (true mientras el detalle está abierto), aria-controls (el identificador del detalle) y una etiqueta traducida (Mostrar el detalle de la fila / Ocultar el detalle de la fila).
• Una recarga de los datos cierra todos los detalles: una nueva búsqueda, una recarga, o un cambio de página u orden que resuelve el servidor. En un grid que carga todas sus filas (load-all="true"), cambiar de página u ordenar en el cliente mantiene las filas abiertas.

Límites

• El detalle es una plantilla o un grid anidado, nunca ambos: un <row-detail> con texto y un grid hace que la pantalla no se cargue y muestre un error.
• Los componentes de un detalle de fila se limitan a un grid de solo lectura, directamente o mediante un include. Cualquier otro componente, un grid editable o con send-operations, o una <dependency> dentro del <row-detail> hacen que la pantalla no se cargue y muestre un error. Los componentes fuera del detalle no pueden apuntar al grid anidado ni a sus botones (target).
• Los nombres de columna del grid anidado deben ser distintos de los de los demás grids de la pantalla, como en cualquier grid (el esquema de pantalla exige nombres de columna únicos).
• En el motor AngularJS la página de un grid anidado no debe superar las 50 filas (max); no se admiten páginas mayores.
• Los grids en árbol (treegrid="true") no muestran el detalle de fila en ningún motor.
• En el motor AngularJS, cuando el grid tiene columnas congeladas (frozen), el detalle se muestra solo en la parte con desplazamiento; las filas de la parte congelada no crecen.
• El motor AngularJS coloca las filas de un grid con una altura fija, así que un grid con detalle de fila dibuja todas las filas de su página en lugar de virtualizarlas (el tamaño de página del grid, ver max, acota el coste).

Las aplicaciones de prueba incluyen las pantallas Row detail y Row detail with a grid (países con los clientes de cada país, directamente y mediante un include) en el menú de pruebas de la matriz.

Estructura de columna

<column label="[column-label]" name="[column-name]" sort-field="[sort-field]" align="[text-align]" 
        charlength="[column-width-chars]" component="[column-component]" >
  <dependency ...> ... </dependency>
  ...
</column>

Atributos de columna

Atributo	Uso	Tipo	Descripción	Valores
name	Obligatorio	String	Identificador de columna. Con fines de referencia
sort-field	Opcional	String	Ordenar por campo (si no treegrid)
type	Opcional	String	Tipo de campo (para fines de impresión)	string, integer, float o date
hidden	Opcional	Boolean	La columna no es visible en pantalla. Aun así puede imprimirse, véase columnas de impresión	El valor predeterminado es false
printable	Opcional	String	Indica si la columna se incluye en el informe impreso. Véase columnas de impresión	true (por defecto) o false
align	Opcional	String	La columna no es visible	left, center o right
width	Opcional	Entero	Ancho de la columna en píxeles o en porcentaje.	Ej.: width = "10" o width = "20%" Nota: Puede usar el valor '*' para ajuste automático.
sortable	Opcional	Boolean	El campo es ordenable (si no es treegrid)	El valor predeterminado es true
movable	Opcional	Boolean	Permite mover la posición de la columna en el grid	El valor predeterminado es true
sendable	Opcional	Boolean	Los datos de columna deben ser enviados al servidor	El valor predeterminado es true
charlength	Opcional	Entero	Ancho de columna en caracteres
label	Opcional	String	Etiqueta de columna	Nota: Puedes usar literales i18n
style	Opcional	String	Columna clase css	Clase bruta a aplicar a la columna
component	Opcional	String	Tipo de columna (si editable)	Ver componentes
max	Opcional	Entero	Número máximo de registros a recuperar cuando la columna se inicializa con acción de destino	El valor predeterminado es 30
visibility	Opcional	Boolean	Visibilidad inicial del componente de columna	El valor predeterminado es true
frozen	Opcional	Boolean	Mantenga la columna fijada fuera del desplazamiento horizontal. ADVERTENCIA: No uses este atributo si el encabezado tiene más de una línea de alto. En el motor React las columnas congeladas se mueven a la izquierda y un grid con columnas congeladas mantiene sus filas de una línea (wrap y max-lines se ignoran); un encabezado agrupado o un grid de árbol todavía no congelan columnas en React	El valor predeterminado es false
wrap	Opcional	Booleano	El texto de las celdas se divide en varias líneas y la fila crece para ajustarse. Ver texto en varias líneas	El valor por defecto es false
max-lines	Opcional	Entero	Número máximo de líneas de una celda con texto en varias líneas; implica wrap. Ver texto en varias líneas	Un número mayor que 0
secondary-field	Opcional	String	Campo de la fila que se muestra bajo el valor principal, más pequeño y atenuado. Ver segunda línea, estado y etiquetas	Nombre de otro campo de la fila
export-secondary	Opcional	Booleano	La exportación y la impresión del grid añaden una columna con el campo secundario justo después de esta	El valor por defecto es false
secondary-label	Opcional	String	Título de la columna secundaria exportada	Por defecto: la etiqueta de la columna. Nota: Puede usar archivos i18n (locales)
status-field	Opcional	String	Campo de la fila con el tono de un estado: el valor se muestra como un punto del tono más el texto	success, warning, danger, info, neutral
chips	Opcional	Booleano	El valor es una lista que se muestra como etiquetas (chips)	El valor por defecto es false
chip-separator	Opcional	String	Separador de los elementos de una columna chips	El valor por defecto es ,
max-chips	Opcional	Entero	Número de etiquetas que se muestran; el resto se agrupan en una etiqueta "+n"	Un número mayor que 0

Nota: Cuando una columna es editable (tiene un componente) todos los atributos de criterios pueden ser usados en la columna. Ver criterios atributos para más referencias.

Texto en varias líneas

Por defecto el texto de una celda ocupa una sola línea y se corta con puntos suspensivos cuando no cabe en el ancho de la columna. Una columna puede declarar que su texto se divide en varias líneas, y la fila crece para ajustarse a la celda más alta. Funciona en ambos motores de cliente y un grid sin estos atributos se muestra exactamente igual que antes.

<grid id="GrdComments" style="expand" initial-load="query" server-action="data" target-action="CommentList">
  <column label="Code" name="code" align="left" charlength="8"/>
  <column label="Title" name="title" align="left" charlength="16" wrap="true"/>
  <column label="Description" name="description" align="left" charlength="30" max-lines="3"/>
</grid>

• wrap="true" muestra el texto completo en tantas líneas como necesite.
• max-lines="N" limita el texto a N líneas. Si el texto es más largo, la línea N termina en puntos suspensivos y el texto completo se muestra en un tooltip al pasar el ratón y al recibir el foco del teclado (se puede llegar a las celdas cortadas con la tecla Tab y Esc cierra el tooltip). max-lines implica wrap, salvo que la columna declare wrap="false".
• El resto de columnas mantienen su única línea. La selección, la ordenación, la edición en línea y los atajos de teclado del grid funcionan como siempre con filas más altas.
• row-height es la altura mínima de las filas de un grid, tenga o no columnas de varias líneas, en ambos motores. Los grids en árbol lo ignoran.

Un texto que no se divide y no cabe en el ancho de su columna siempre expone su valor completo: en el motor React, las celdas de texto y las cabeceras lo muestran como tooltip (el motor AngularJS ya lo hacía en las celdas).

Límites

• Solo se divide el texto de las celdas estándar. Las celdas de columnas con component mantienen su propia disposición.
• El motor AngularJS coloca las filas de un grid con una altura fija, así que un grid con columnas de varias líneas dibuja todas las filas de su página en lugar de virtualizarlas (el tamaño de página del grid, ver max, acota el coste). Un grid con columnas congeladas (frozen) o un grid de árbol mantiene sus filas de una línea en ese motor.

Las aplicaciones de prueba incluyen las pantallas Wrapping cells y Single-line cells en el menú de pruebas de la matriz, con las mismas 100 filas con y sin varias líneas.

Segunda línea, estado y etiquetas

Una celda estándar puede mostrar más que su valor sin HTML en los datos: una segunda línea bajo el valor principal, un estado (un punto de un tono más el texto) o una lista de etiquetas (chips). Funciona en ambos motores de cliente, las filas crecen para ajustarse (también con texto en varias líneas) y un grid sin estos atributos se muestra exactamente igual que antes.

<grid id="GrdUsers" style="expand" initial-load="query" server-action="data" target-action="UserList">
  <column label="User" name="user" charlength="30" secondary-field="login" export-secondary="true" secondary-label="Login"/>
  <column label="Status" name="status" charlength="18" status-field="tone"/>
  <column label="Teams" name="teams" charlength="24" chips="true" max-chips="2"/>
  <column label="Login" name="login" hidden="true"/>
  <column label="Tone" name="tone" hidden="true"/>
</grid>

Atributo	JSON	Por defecto	Descripción
secondary-field	secondaryField		Nombre de otro campo de la fila, que se muestra bajo el valor principal, más pequeño y atenuado. Vacío: solo la línea principal
export-secondary	exportSecondary	false	La exportación y la impresión del grid añaden una columna con el campo secundario justo después de la principal
secondary-label	secondaryLabel	la etiqueta de la columna	Título (clave i18n) de la columna secundaria exportada
status-field	statusField		Nombre de un campo de la fila con el tono: success, warning, danger, info o neutral. El tono se recorta y se pasa a minúsculas; un tono desconocido o vacío es neutral
chips	chips	false	El valor se divide por chip-separator, cada elemento se recorta, los vacíos se descartan y cada uno se muestra como una etiqueta
chip-separator	chipSeparator	,	Separador de los elementos de una columna chips
max-chips	maxChips		Muestra las N primeras etiquetas y una etiqueta "+n" cuyo tooltip y etiqueta accesible listan los elementos ocultos

• chips y status-field son excluyentes: con chips="true" el estado se ignora. secondary-field se combina con texto plano y con un estado.
• Las columnas con component ignoran las tres funciones.
• El tono de un estado nunca se transmite solo con el color: el punto siempre va con el texto.
• Un estado más largo que su columna termina en puntos suspensivos y su tooltip (title) muestra el texto completo.
• Los valores se muestran siempre como texto, nunca como HTML: un valor como <b>bold</b> se muestra literalmente.
• La ordenación, el filtrado y la exportación usan el valor principal. La exportación escribe el valor principal y, con export-secondary="true", el valor secundario en su propia columna, titulada con secondary-label y con el ancho y la alineación de la columna principal.

Exportación de la columna secundaria

Los grids cargados por consulta leen el valor secundario de la fila en el servidor. Los grids cuyos datos de exportación envía el cliente (grids load-all, editables o multioperación) solo envían sus columnas, así que la columna secundaria se exporta vacía salvo que el campo secundario sea también una columna del grid (puede ser hidden="true", como login en el ejemplo).

Ejemplo: usuarios con su cuenta y su estado

La query devuelve los valores principales y los campos que leen las celdas: account para la segunda línea y tone para el estado (el texto del estado se puede traducir; el tono no).

<query id="UserStateList">
  <table id="ope" alias="ope"/>
  <field id="IdeOpe" table="ope" alias="id"/>
  <field id="OpeNam" table="ope" alias="name"/>
  <field id="l1_nom" table="ope" alias="login"/>
  <field id="EmlAdr" table="ope" alias="email"/>
  <!-- Segunda línea: usuario y email en un solo campo -->
  <computed alias="account" format="[login] · [email]"/>
  <!-- Estado: el texto y su tono, calculados a partir del indicador de activo -->
  <case alias="state">
    <when left-field="l1_act" condition="eq">
      <right-operand><constant value="0" type="INTEGER"/></right-operand>
      <then><constant value="Inactive"/></then>
    </when>
    <else><constant value="Active"/></else>
  </case>
  <case alias="tone">
    <when left-field="l1_act" condition="eq">
      <right-operand><constant value="0" type="INTEGER"/></right-operand>
      <then><constant value="neutral"/></then>
    </when>
    <else><constant value="success"/></else>
  </case>
</query>

<grid id="GrdUserState" style="expand" initial-load="query" server-action="data" target-action="UserStateList">
  <column label="PARAMETER_USER" name="name" sort-field="name" charlength="30"
          secondary-field="account" export-secondary="true" secondary-label="PARAMETER_EMAIL"/>
  <column label="PARAMETER_STATUS" name="state" sort-field="state" charlength="16" status-field="tone"/>
  <!-- Los campos que leen las celdas, también como columnas ocultas (los necesita la exportación de los grids que envía el cliente) -->
  <column name="account" hidden="true"/>
  <column name="tone" hidden="true"/>
</grid>

Una lista en un solo campo (por ejemplo Sales;Finance;Support) se muestra como etiquetas; aquí con ; como separador y como mucho tres etiquetas más "+n":

<column label="PARAMETER_ROLES" name="roles" charlength="30" width="*" chips="true" chip-separator=";" max-chips="3"/>

Las aplicaciones de prueba incluyen la pantalla Secondary line, status and chips en el menú de pruebas de la matriz.

Columnas de impresión

Cuando se imprime una pantalla (véase la guía del motor de impresión), cada grid decide qué columnas van al informe mediante el atributo printable de la columna:

printable	Impreso en PDF, DOCX y TEXT	Impreso en XLSX y CSV
sin definir	Solo cuando la columna está en pantalla	Solo cuando la columna está en pantalla
true	Siempre, incluso si hidden="true"	Siempre, incluso si hidden="true"
excel	Nunca	Siempre, incluso si hidden="true"
false	Nunca	Nunca

«En pantalla» significa que la columna no es hidden="true" y que no se ha ocultado en tiempo de ejecución mediante una acción de dependencia hide-column. Declarar printable="true", printable="excel" o printable="false" tiene prioridad sobre el estado de la pantalla.

Esto permite mostrar un valor con estilo en pantalla y exportar el valor sin formato:

<grid id="GrdAmounts" server-action="data" target-action="QryAmounts" load-all="true">
  <!-- Shown on screen with HTML styling, excluded from the report -->
  <column label="AMOUNT" name="Amount" align="right" charlength="20" printable="false"/>
  <!-- Hidden on screen, printed as a numeric value in every format -->
  <column label="AMOUNT" name="AmountRaw" align="right" charlength="20" hidden="true" type="float" printable="true"/>
  <!-- Hidden on screen, exported to the spreadsheet only -->
  <column label="INTERNAL_CODE" name="Code" charlength="10" hidden="true" printable="excel"/>
</grid>

Tenga en cuenta lo siguiente:

• Una columna impresa necesita sus datos en el cliente, por lo que debe ser sendable (el valor por defecto). Una columna sendable="false" aparece en la cabecera del informe con celdas vacías.
• Use type (string, integer, float, date) en las columnas impresas para que las celdas de la hoja de cálculo tengan el formato correcto.
• Las columnas dentro de un group-header mantienen su agrupación en el informe. Las columnas del grupo que no se imprimen en un formato se omiten, y la cabecera del grupo desaparece cuando ninguna de sus columnas se imprime.
• Cuando una petición de impresión mezcla formatos de hoja de cálculo y de documento y alguna columna es printable="excel", AWE diseña el informe dos veces, una por cada tipo de salida. Los grids que se imprimen desde una consulta ejecutan esa consulta una vez por diseño.
• Los valores all y tab, admitidos por el esquema en versiones anteriores, se han eliminado. Sustituya all por true.

Componentes de columna

Componente	Descripción
text	Componente de columna de texto. Ver el criterio de texto
password	Componente de columna de contraseña. Ver el criterio de contraseña
textarea	Textarea column component. See textarea criterion
numeric	Componente numérico de columna. Ver el criterio numérico
date	Componente de columna de fecha. Ver el criterio de fecha
time	Componente de columna de tiempo. Ver el criterio de tiempo
filtered-date	Componente de columna de fecha filtrado. Ver el criterio de fecha filtrado
select	Seleccionar componente de columna. Ver seleccionar el criterio
suggest	Sugerir componente de columna. Ver criterio de sugerencia
select-multiple	Seleccione un componente de columna múltiple. See select multiple criterion
suggest-multiple	Sugerir el componente de múltiples columnas. See suggest multiple criterion
checkbox	Componente de columna Checkbox. See checkbox criterion
radio	Componente de columna Radio: las opciones de una lista como una fila de botones de opción. Ver componente de columna radio
button-radio	Componente de columna Radio: las opciones de una lista como una barra de botones unidos. Ver componente de columna radio
color	Componente de columna de color. Ver el criterio de color
uploader	Componente de columna del cargador. Ver el criterio de carga de archivos
text-view	Componente de columna de vista de texto. Ver el criterio de vista de texto
formatted-text	Componente de columna de texto HTML. Ver componente de texto formateado
icon	Componente de columna de icono. Muestra el icono cuyo nombre es el valor de la celda.
image	Componente de columna de imagen. Utilícelo para mostrar imágenes en una columna.
button	Componente que permite al usuario hacer clic en un botón que lanza un conjunto de button-action
progress	Componente de columna de progreso. Útil para mostrar una barra de progreso en una columna. Ver progreso
sparkline	Componente de columna sparkline: un pequeño gráfico de línea, barras o área de una serie de números. Ver componente de columna sparkline
link	Componente de enlace HTML. Abre una URL en una página nueva

Estilo específico de fila

Cuando necesite establecer un estilo específico para todas las celdas de una fila (p. ej.: cambiar el color de fondo), puede añadir un nuevo campo llamado _style_ con el nombre del estilo CSS.

<query id="MyQuery" >
    <field id="_style_" alias="_style_" variable="styleClass"/>
    <variable id="styleClass" type="STRING" value="red"/>
</query>

Clases de tema

AWE proporciona clases CSS listas para usar para dos aspectos habituales de un grid. Están disponibles en ambos motores de cliente y en todos los temas, claros u oscuros, por lo que una aplicación no necesita escribir su propio CSS.

Grid sin fila de cabecera

Añada la clase grid-no-header al style del grid. La fila de cabecera se oculta pero sigue participando en la disposición de las columnas, de modo que estas mantienen sus anchos (charlength y width). Es útil para listas compactas.

<grid id="GrdCompactList" style="expand grid-no-header" initial-load="query" server-action="data" target-action="CompactList">
  <column label="Name" name="name" align="left" charlength="30"/>
  <column label="Description" name="description" align="left" charlength="40"/>
</grid>

note

La cabecera no está disponible para los lectores de pantalla mientras está oculta, ni tampoco los controles de ordenación, filtro y menú de columna de la cabecera. Utilice la clase en grids que no los necesiten.

Celdas coloreadas por escala (mapas de calor)

La consulta asigna una de las siguientes clases a cada celda con el atributo style de una celda compuesta. Cada clase pinta toda la celda y establece su propio color de texto, de modo que el texto mantiene un contraste de al menos 4,5:1 (WCAG AA) en todos los temas.

Escala	Clases	Úsela para
Secuencial (azul)	scale-seq-1 (la más baja) a scale-seq-5 (la más alta)	Valores que van de bajos a altos
Divergente, positiva (verde)	scale-pos-1 (la más baja) a scale-pos-5 (la más alta)	Valores por encima de la referencia (p. ej. ganancias)
Divergente, negativa (roja)	scale-neg-1 (la más baja) a scale-neg-5 (la más alta)	Valores por debajo de la referencia (p. ej. pérdidas)

Por ejemplo, una consulta que colorea el importe en la escala positiva o negativa según su valor:

<query id="Results">
  <table id="Results"/>
  <field id="Name" alias="name"/>
  <field id="Amount" alias="amount" noprint="true"/>
  <compound alias="result">
    <computed alias="value" format="[amount]"/>
    <computed alias="label" format="[amount]"/>
    <computed alias="style" format="[amount] &lt; -50 ? 'scale-neg-5' : [amount] &lt; 0 ? 'scale-neg-2' : [amount] &lt; 50 ? 'scale-pos-2' : 'scale-pos-5'" eval="true"/>
  </compound>
</query>

Las aplicaciones de prueba incluyen las pantallas Grid without header y Colour scales en el menú de la matriz de pruebas, con un ejemplo de cada clase.

Componentes de columna específicos

Existen varios componentes desarrollados específicamente para ser utilizados en células de la red. Estos componentes necesitan una estructura especial en la consulta que los llene:

<compound alias="specialCell">
  <computed alias="value" format="xxx"/>  
  <computed alias="label" format="xxx" translate="EnumTranslate"/>
</compound>

Estas son las células que utilizan la estructura especial:

Celda estándar sin componentes

Cuando se envía una estructura compuesta a una celda estándar, se pueden utilizar los siguientes atributos:

Atributo	Descripción
value	Valor que se enviará al servidor
label	Texto que se mostrará. Puedes usar i18n archivos (locales)
title	Texto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
style	Clase CSS para formatear el contenido

Componente de columna de vista de texto

Este componente es muy útil para mostrar un texto con estilo dentro de un grid con un icono. Los atributos compuestos para rellenar este componente son los siguientes:

Atributo	Descripción
value	Valor que se enviará al servidor
label	Texto que se mostrará. Puedes usar i18n archivos (locales)
title	Texto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
icon	Clase de icono. Puedes consultar todos los conjuntos de iconos en la pantalla icons
unit	Etiqueta unitaria (se muestra en la derecha de la celda). Puedes usar i18n archivos (locales)
style	Clase CSS para formatear el contenido

Componente de columna de icono

Este componente es muy útil para mostrar un icono dentro de un grid. Los atributos compuestos para rellenar este componente son los siguientes:

Atributo	Descripción
value	Valor que se enviará al servidor
label	Texto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
title	Texto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
icon	Clase de icono. Puedes consultar todos los conjuntos de iconos en la pantalla icons
style	Clase CSS para formatear el contenido

Componente de columna de texto con formato

Este componente se utiliza para mostrar código HTML dentro de un grid. Funciona como una vista de texto (solo lectura, lanza un evento click y acepta icon, unit y style), pero su etiqueta se pinta como HTML en lugar de como texto plano. La etiqueta no se traduce.

El HTML se sanea antes de mostrarse, de modo que los scripts, los manejadores de eventos y el resto de contenido activo nunca llegan a la página. En el cliente React la etiqueta solo conserva las etiquetas de formato de texto (b, strong, i, em, u, s, small, mark, span, p, br, h1-h6, listas, code, pre, blockquote...), los enlaces y los atributos class, href, target y title. Se eliminan las imágenes, los marcos, los estilos en línea y los enlaces javascript:. Es la misma política que la del texto de cualquier otra celda del grid.

Componente de columna de imagen

Este componente se utiliza para mostrar una imagen dentro de un grid. Los atributos compuestos para rellenar este componente son los siguientes:

Atributo	Descripción
value	Valor que se enviará al servidor
label	Texto alternativo. Puedes usar i18n archivos (locales)
title	Texto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
image	Ruta de imagen
style	Clase CSS para formatear el contenido

Componente de columna del botón

Una columna de botón es un componente que permite lanzar un conjunto de button-action definido en columna.

Atributo	Descripción
value	Valor que se enviará al servidor
label	Texto a mostrar en el botón. Puedes usar i18n archivos (locales)
title	Texto a mostrar cuando mueve el ratón sobre el botón. Puedes usar i18n archivos (locales)
icon	Clase de icono para mostrar en el botón. Puedes consultar todos los conjuntos de iconos en la pantalla icons
style	Clase CSS para formatear el contenido

Componente de columna radio

Las columnas radio y button-radio muestran todas las opciones de una lista en cada celda y el usuario elige una de ellas. Las opciones salen de la columna igual que en una columna select: con initial-load y target-action (por ejemplo un enumerado, enum, o una consulta) y cada opción tiene un value y un label. El valor de la opción elegida es el valor de la celda.

<enumerated>
  <group id="LevelOptions">
    <option label="Low" value="L"/>
    <option label="Medium" value="M"/>
    <option label="High" value="H"/>
  </group>
</enumerated>

<grid id="GrdTheme" style="expand" initial-load="query" server-action="data" target-action="ThemeList" send-all="true">
  <column label="Theme" name="name" align="left" charlength="30"/>
  <column label="Level" name="level" component="radio" initial-load="enum" target-action="LevelOptions" align="center" charlength="30"/>
  <column label="Mode" name="mode" component="button-radio" initial-load="enum" target-action="ModeOptions" align="center" charlength="30"/>
</grid>

Atributo	Descripción
initial-load	Cómo se cargan las opciones: enum para un enumerado, query para una consulta
target-action	Grupo del enumerado o consulta que proporciona las opciones (value y label de cada una)
label	Cabecera de la columna. Es también el nombre accesible del grupo de opciones de cada celda
validation	required exige una elección en cada fila
readonly	Una columna o una celda de solo lectura no se puede cambiar

Para empezar con una elección, la consulta que rellena el grid devuelve el valor de la opción en un campo con el nombre de la columna (aquí level, con L, M o H). Una fila en la que ese campo está vacío o es nulo empieza sin elección.

La columna se comporta como cualquier otra columna del grid: se puede ordenar, validar, editar e imprimir.

Aspecto de radio

Cada opción es un botón de opción seguido de su etiqueta, y las opciones de una celda van en una línea. Cuando la columna es estrecha, el motor React las reparte en varias líneas, mientras que el motor AngularJS las mantiene en una y oculta lo que no cabe, así que da a la columna anchura suficiente (por ejemplo con charlength). El botón marcado tiene el color primario del tema.

Aspecto de button-radio

Las opciones de una celda son una barra de botones unidos (un control segmentado), como el criterio botón radio: los botones contiguos comparten sus bordes, solo los dos extremos de la barra son redondeados y la opción elegida aparece resaltada.

Teclado, validación y solo lectura

Comportamiento	Descripción
Teclado	Las flechas izquierda y derecha mueven la elección entre las opciones de la celda (también las de arriba y abajo) y dan la vuelta en los extremos; Tab abandona la celda
Accesibilidad	Las opciones de una celda son un radiogroup etiquetado con la etiqueta de la columna, y los radios de una fila comparten un nombre
Validación	Con validation="required" una fila sin elección no es válida
Solo lectura	Una columna o una celda de solo lectura no se puede cambiar

note

La opción elegida no se desmarca por sí sola, solo al elegir otra.

Datos enviados al servidor

El grid envía la columna igual que una columna select: una lista con un valor por fila (en el mismo orden que las demás columnas), la opción elegida de cada fila y null para una fila sin elección:

{
  "id": [12, 3, 7],
  "level": ["M", null, "H"],
  "level.selected": "H"
}

• <columna> contiene el valor elegido de cada fila enviada (todas las filas cuando el grid tiene send-all, las seleccionadas en caso contrario).
• <columna>.selected contiene el valor de las filas seleccionadas.
• <columna>.editing contiene el valor de las filas que se están editando, en los grids editables y de multioperación.

El objetivo de mantenimiento lee la lista como una variable con el nombre de la columna (<variable id="level" type="STRING" name="level"/>).

Componente de columna de progreso

El componente de progreso es muy útil para mostrar el estado de un trabajo, o una tarea.

Atributo	Descripción
value	Valor (en porcentaje (0-100) de la barra de progreso
label	Texto a mostrar en la barra de progreso (es decir, porcentaje)
title	Texto a mostrar cuando mueve el ratón sobre el botón. Puedes usar i18n archivos (locales)
style	Clase CSS para formatear el contenido

Componente de columna sparkline

Un sparkline dibuja un pequeño gráfico de una serie de números dentro de la celda, de modo que se puede ver una tendencia por fila (ventas por mes, carga por día) sin abrir un gráfico. El valor de la celda es un array JSON de números, por ejemplo [3, 5, -1, 8]. La consulta puede devolverlo como texto o como una lista ya interpretada.

<column label="LOAD" name="load" component="sparkline" sparkline-type="bar" sparkline-negative-color="#d64550" charlength="14"/>

Atributo	Descripción	Valores
sparkline-type	Dibujo de la serie: una línea continua, una barra por valor, o una línea con el área inferior rellena	line (por defecto), bar o area
sparkline-color	Color de la serie. Un valor que no sea un color simple se ignora	Cualquier color CSS, p. ej.: #3b82f6
sparkline-negative-color	Color de los valores negativos: las barras por debajo de cero, o los tramos de la línea y del área que pasan por debajo de cero. Sin él, los valores negativos usan el color de la serie	Cualquier color CSS
sparkline-last-point	Resalta el último punto de la serie: un punto en líneas y áreas, un contorno oscuro en barras	true o false (por defecto)
sparkline-min-max	Marca con un punto el valor más bajo (rojo) y el más alto (verde) de la serie	true o false (por defecto)

Cómo se dibuja la serie:

• El gráfico es un SVG de 100 por 24 píxeles, dibujado igual por los dos motores de cliente. Da a la columna anchura suficiente (charlength="14" o más); la alineación de la celda (align) coloca el gráfico dentro de ella.
• Barras y valores negativos: las barras parten de la línea de cero, así que las negativas cuelgan por debajo. Las líneas y las áreas se escalan entre el valor más bajo y el más alto; se dibuja una fina línea gris de cero siempre que la serie tenga algún valor negativo.
• Tooltip: al pasar el ratón sobre un punto se ve su valor. Cada punto tiene una zona sensible tan ancha como su parte del gráfico.
• Un solo valor: las líneas y las áreas dibujan un punto, las barras dibujan una barra.
• Serie vacía o no válida: la celda queda vacía, sin error. Es el caso de un valor vacío, [], un texto que no es JSON, un valor que no es una lista y una lista con algún elemento que no es un número.
• La celda es un componente de visualización: no es editable y no es una parada del tabulador (el gráfico no es enfocable), así que no interfiere con la navegación por teclado del grid.
• Se ha eliminado el antiguo plugin jQuery sparkline del cliente AngularJS; las aplicaciones que usaran sus clases CSS (jqstooltip, stats-sparklines) deben aportar las suyas.

Estructura de cabecera de grupo

<group-header label="[group-header-label]" name="[group-header-name]">
  <column...> ... </column>
  ...
</group-header>

Atributos de cabecera de grupo

Atributo	Uso	Tipo	Descripción	Valores
name	Obligatorio	String	Identificador de cabecera de grupo. Con fines de referencia
label	Opcional	String	Etiqueta de cabecera de grupo	Nota: Puedes usar literales i18n

Grid básico

El grid básico es el grid estándar sin una estructura de árbol. Se puede definir como grid de una sola selección, grid multiselectivo, grid editable o grid multiopcional y combinaciones entre ellas.

Atributos básicos específicos del grid

Atributo	Tipo	Descripción	Valores
show-totals	Boolean	Mostrar una línea con totalizadores	El valor predeterminado es false
row-numbers	Boolean	Mostrar los números de fila	El valor predeterminado es false

Multiselección de grid

Atributos específicos de grid de selección múltiple

Atributo	Tipo	Descripción	Valores
multiselect	Boolean	Permitir seleccionar más de una línea	El valor predeterminado es false
checkbox-multiselect	Boolean	Permitir seleccionar más de una línea, pero haciendo clic en solo en las casillas laterales	El valor predeterminado es false

Grid de árbol

El grid de árbol es un grid que se puede expandir como árbol. Se puede definir como árbol estándar, cargando árbol, árbol editable o árbol multiopción, y combinaciones entre ellos.

La estructura de datos necesita un identificador por fila, y también un identificador padre, sin valor si la fila es una fila raíz (sin padre). El campo identificador debe definirse en el atributo tree-id del grid y el padre debe definirse en el atributo tree-parent.

Atributos específicos del grid del árbol

Atributo	Tipo	Descripción	Valores
treegrid	Boolean	Establecer grid como treegrid	El valor predeterminado es false
tree-id	String	Definir campo identificador	El valor predeterminado es id
tree-parent	String	Definir campo padre	El valor predeterminado es parent
tree-leaf	String	Definir el campo 'is leaf'	El valor predeterminado es isLeaf
expand-column	String	Nombre de la columna a expandir	Debe ser un identificador de columna
initial-level	Entero	Nivel inicial para expandir	El valor predeterminado es 1
icon-expand	String	Icono de una rama sin expandir	Nota: Puedes consultar todos los conjuntos de iconos en la pantalla icons
icon-collapse	String	Icono de una rama expandida	Nota: Puedes consultar todos los conjuntos de iconos en la pantalla icons
icon-leaf	String	Icono de una rama de hoja	Nota: Puedes consultar todos los conjuntos de iconos en la pantalla icons

Grid editable

Atributos específicos del grid editable

Atributo	Tipo	Descripción	Valores
editable	Boolean	Permite editar las filas de grid	El valor predeterminado es false

Mover filas

Un grid editable puede reordenar sus filas con cuatro acciones de cliente que mueven la fila seleccionada: move-row-top, move-row-up, move-row-down y move-row-bottom. Consulta la página de acciones. Las filas conservan el nuevo orden en el modelo del grid, así que ese es el orden que el grid envía al servidor cuando se guarda (usa send-all="true" para enviar todas las filas y no solo las seleccionadas). El orden de las filas se guarda en la posición de los valores de cada lista de columna, y una aplicación que quiera conservarlo debe guardar esa posición (por ejemplo en una columna order).

<grid id="GrdSteps" editable="true" send-all="true" server-action="data" target-action="StepList">
  <column name="name" label="COLUMN_NAME" component="text"/>
  <button label="BUTTON_MOVE_ROW_UP" icon="angle-up" id="ButStepUp">
    <button-action type="move-row-up" target="GrdSteps" silent="true"/>
    <dependency target-type="enable" initial="true">
      <dependency-element id="GrdSteps" attribute="selectedRows" condition="eq" value="1"/>
    </dependency>
  </button>
</grid>

Con una fila seleccionada, ambos motores web también la mueven con el teclado mientras el grid tiene el foco:

Teclas	Acción
Alt+ArrowUp	move-row-up
Alt+ArrowDown	move-row-down
Alt+Home	move-row-top
Alt+End	move-row-bottom

Las acciones se ignoran cuando la fila ya está en esa posición, y los grids en árbol no las soportan. Los atajos funcionan cuando el grid es editable o tiene move-rows.

Arrastrar y soltar

Con move-rows="true" el grid añade una columna inicial estrecha con un asa en cada fila, en ambos motores web. El puntero muestra el cursor de mover sobre el asa. Arrastre una fila por su asa y una línea marca dónde caerá, antes o después de la fila que hay bajo el puntero; al soltarla, la fila se mueve a esa posición. Solo el asa inicia el arrastre, de modo que las celdas conservan la selección de texto y los clics. Los grids en árbol no muestran el asa.

<grid id="GrdSteps" move-rows="true" send-all="true" server-action="data" target-action="StepList">
  <column name="name" label="COLUMN_NAME" component="text"/>
</grid>

Al soltar, las filas se reordenan igual que con las acciones de mover fila: el modelo del grid conserva el nuevo orden en sus values y la fila movida queda seleccionada. El motor AngularJS además almacena el evento move-row, como hacen las acciones. El grid no necesita ser editable, y los atajos Alt+flecha anteriores siguen disponibles como alternativa de teclado: el asa tiene una etiqueta accesible que los menciona. Los grids sin move-rows se ven y se comportan como antes.

Multiopción de grid

Nota: El grid multiopción enviará una variable llamada [GridId]-RowTyp (donde [GridId] es el identificador del grid) que contiene la acción realizada en cada fila (INSERT, UPDATE o DELETE acciones)

Atributos específicos de grid de múltiples opciones

Atributo	Tipo	Descripción	Valores
send-operations	Boolean	Permite editar las filas de grid, pero enviando sólo las líneas modificadas	El valor predeterminado es false

Botones de grid

Puede añadir elementos de botón para realizar acciones sobre los grids. Por ejemplo, un par de botones para insertar y borrar filas.

<grid id="GrdKeyLst" style="expand" initial-load="query" server-action="data" target-action="AweKeyLst" send-operations="true" editable="true" max="40">
  <column label="COLUMN_NAM" name="KeyNam" sort-field="KeyNam" align="left" charlength="20" component="text" validation="required">
    <dependency source-type="query" server-action="unique" target-action="AweKeyUni">
      <dependency-element id="GrdKeyLst" column="KeyNam" attribute="currentRowValue" />
    </dependency>
  </column>
  ...
  <button label="BUTTON_NEW" icon="plus-circle" id="ButGrdKeyLstAdd">
    <button-action type="add-row" target="GrdKeyLst" silent="true" />
  </button>
  <button label="BUTTON_DELETE" icon="trash" id="ButGrdKeyLstDel">
    <button-action type="delete-row" target="GrdKeyLst" silent="true" />
    <dependency target-type="enable" initial="true">
      <dependency-element id="GrdKeyLst" attribute="selectedRows" condition="==" value="1" />
    </dependency>
  </button>
</grid>

Menú contextual

Puede definir un menú de contexto dentro del grid para ayudar al usuario a realizar acciones con las filas seleccionadas. Ver menú contextual.

Variables

El componente grid envía algunas variables específicas al servidor, dependiendo de su estado y atributos. Aquí está la lista de variables que pueden ser enviadas por el componente de grid:

Variable	Tipo	Condición	Descripción
[GridName]	Matriz	Siempre	Lista de identificadores de líneas seleccionadas
[GridName]-id	Matriz	Siempre	Lista de identificadores de fila para registros con operaciones
[ColumnName]	Matriz	send-all="false"	Lista de valores de columnas de líneas seleccionadas (para cada columna)
[ColumnName]	Matriz	send-all="true"	Lista de todos los valores de columna (para cada columna)
[ColumnName].selected	Valor/Matriz	Siempre	Lista de valores de columna de líneas seleccionadas (para cada columna). Si sólo hay una fila seleccionada, sólo enviará el valor en lugar de una matriz
[GridName].selectedRowAddress	JsonNode	Cuando sólo hay una línea seleccionada	Nodo Json con la dirección address de la fila seleccionada: vista, componente e id de fila
sort	Matriz	Al ordenar	Lista de JsonNodes con la información de ordenamiento de grid (id: id de columna, direction: dirección de ordenación)
[GridName].data	JsonNode	Siempre	Lista de información extra del grid (página, máximos registros, información de ordenación, etc.)

El grid multioperación envía las variables de una manera diferente a los otros grids:

Variable	Tipo	Condición	Descripción
[GridName]	Entero	multioperation="true"	Número de operaciones enviadas
[GridName].RowTyp	Matriz	multioperation="true"	Lista de operaciones requeridas para cada columna (sólo para las filas con operaciones)
[GridName]-id	Matriz	Siempre	Lista de identificadores de fila para registros con operaciones
[ColumnName]	Matriz	multioperation="true"	Lista de valores de columna para filas con operaciones (para cada columna)
[ColumnName].selected	Valor/Matriz	Siempre	Lista de valores de columna de líneas seleccionadas (para cada columna). Si sólo hay una fila seleccionada, sólo enviará el valor en lugar de una matriz
[GridName].selectedRowAddress	JsonNode	Cuando sólo hay una línea seleccionada	Nodo Json con la dirección address de la fila seleccionada: vista, componente e id de fila
sort	Matriz	Al ordenar	Lista de JsonNodes con la información de ordenamiento de grid (id: id de columna, direction: dirección de ordenación)
[GridName].data	JsonNode	Siempre	Lista de información extra del grid (página, máximos registros, información de ordenación, etc.)

Nota: Ver muestras de uso en Definición de servicio