Leer valores de celda de un componente de cuadrícula de datos

You can read the cell values from a Data Grid component. For example, you will learn how to dynamically sum all values in a Data Grid column. For any new item, the Total Quantity field displays the new total value.

1. Crea un nuevo formulario y añade un componente Cuadrícula de datos .

2. Dentro de la cuadrícula de datos, arrastra y suelta un componente Campo de texto y un componente Número . Nómbralos Artículo y Cantidad.

   Para que la lógica adicional funcione, asegúrate de que los nombres de propiedad de los dos componentes sean exactamente como los siguientes:

   • Campo de texto : textField
   • Número : number

3. Añade otro componente de campo de texto en el formulario, pero fuera de la cuadrícula de datos. Nómbralo como Cantidad total y establece el Nombre de la propiedad como lastNumber.

4. En la pestaña Visualización del campo de texto Cantidad total , selecciona Deshabilitado. Esto hace que el componente sea de solo lectura.

5. En la pestaña Lógica del campo de texto Cantidad total , configura una lógica para resumir las celdas numéricas de la cuadrícula de datos en este campo.

   1. Selecciona Añadir lógica para configurar el desencadenador y la acción para sumar los valores.

   2. En la sección Desencadenador y en el campo Nombre de la lógica , introduce un nombre para tu lógica.

   3. Selecciona el Tipo de desencadenador como Simple. Deja el resto de los campos vacíos para que la lógica se desencadene ante cualquier cambio en la cuadrícula de datos.

   4. En la sección Acciones y en el campo Nombre de la acción , introduce un nombre para tu acción. En este caso, la acción desencadenada es actualizar el valor total, por lo que utilizamos updateValue como nombre de la acción.

   5. Selecciona el tipo de acción Valor y luego introduce el siguiente script en la sección Valor (Javascript) :

      var result = 0;
      for (var i = 0; i < data.dataGrid.length; i++) {
        result += +(data.dataGrid[i].number);
      }
      return result;
      

      El fragmento de código anterior itera a través de los valores existentes en la cuadrícula de datos y los resume. Cualquier valor nuevo reinicia la iteración, actualizando así el valor total.

   6. Guarde las Actions y la lógica, y luego el componente.

En tiempo de ejecución, cuando añades un nuevo elemento a la cuadrícula, el valor de Cantidad total se actualiza.

Ejemplo de flujo de trabajo

Para comprobar el flujo de trabajo completo y probar el tutorial tú mismo, descarga el flujo de trabajo de muestra.