Leitura de valores de célula de um componente de Grade de Dados

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. Crie um novo formulário e adicione um componente de Grade de dados .

2. Dentro da Grade de dados, arraste e solte um componente Campo de texto e um componente Número . Nomeie-os Item e Quantidade.

   Para que a lógica adicional funcione, certifique-se de que os Nomes de propriedades para os dois componentes sejam exatamente como estes abaixo:

   • Campo de Texto — textField
   • Número — number

3. Adicione outro componente Campo de texto no formulário, mas fora da Grade de dados. Nomeie-a como Quantidade total e defina o Nome da propriedade como lastNumber.

4. Na aba Exibição do campo de texto Quantidade total , selecione Desabilitado. Isso torna o componente somente leitura.

5. Na aba Lógica do campo de texto Quantidade total , configure uma lógica para somar as células do número da grade de dados neste campo.

   1. Selecione Adicionar lógica para configurar o gatilho e a ação para somar os valores.

   2. Na seção Disparador e no campo Nome da Lógica , insira um nome para sua lógica.

   3. Selecione o gatilho Tipo como Simples. Deixe o resto dos campos vazios para que a lógica seja acionada para qualquer alteração na Grade de dados.

   4. Na seção Ações e no campo Nome da ação , insira um nome para sua ação. Nesse caso, a ação disparada é atualizar o valor total, então usamos updateValue como o nome da ação.

   5. Selecione o tipo de ação Valor e, em seguida, insira o seguinte script na seção Valor (Javascript) :

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

      O fragmento de código acima itera pelos valores existentes na Grade de dados e os resume. Qualquer novo valor reinicia a iteração, atualizando assim o valor total.

   6. Salve as Actions e a Lógica e, depois, o componente.

No runtime, quando você adiciona um novo item à grade, o valor da Quantidade total é atualizado.

Exemplo de fluxo de trabalho

Para verificar o fluxo de trabalho completo e experimentar o tutorial você mesmo, baixe o fluxo de trabalho de amostra.