Personalização da largura da coluna em Grades de Dados

Este tutorial mostra como modificar a largura da última coluna em uma Grade de dados.

Pré-requisitos: para seguir as etapas neste tutorial, crie uma tabela de dados. Certifique-se de que a última coluna da tabela tenha conteúdo maior do que cinco a seis palavras.

1. Adicione uma atividade Construir tabela de dados em seu fluxo de trabalho.

2. Abra o assistente Construir tabela de dados e adicione as colunas desejadas para sua tabela.

   Observação:

   Certifique-se de que as colunas não tenham espaços ou caracteres especiais, porque você usará esses nomes posteriormente para vincular as colunas no formulário por meio de Nomes de propriedades.

3. Salve a tabela de dados em uma variável. Para este exemplo, você pode nomeá-lo dataTable.

   

4. Adicione uma Grade de dados ao seu formulário e use o nome da variável da tabela de dados (dataTable) como o Nome da Propriedade do componente.

5. Adicione componentes na Grade de dados, de acordo com as colunas e seus valores na tabela de dados. Os Nomes de Propriedade desses componentes são os nomes exatos das colunas na tabela de dados.

   Para este exemplo, adicione três componentes do Campo de texto . Use os seguintes Nomes de Propriedade para os componentes: column1, column2, e column3.

6. No painel Propriedades do formulário, insira o seguinte código no campo CSS personalizado :

   .mygrid tbody>tr>:nth-child(1){ 
   width: 25%;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

   Observação:

   O elemento nth-child representa uma coluna no componente de grade.

7. Edite o componente de Grade de dados . Na guia Exibir , em CSS personalizado,insira a classe CSS mygrid . Salve o componente e o formulário. Isso resulta em uma terceira coluna mais ampla, na qual o conteúdo é mais longo do que aproximadamente cinco a seis palavras.