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 mais longo do que de cinco a seis palavras.

1. Adicione uma atividade Construir Tabela de Dados em seu fluxo de trabalho.
2. Abra o assistente de 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 propriedade.
3. Salve a tabela de dados em uma variável. Para este exemplo, você pode nomeá-lo dataTable.
   
   

   

   
   

1. Adicione uma Grade de Dados ao seu formulário e use o nome da variável da tabela de dados (dataTable) como o Nome de Propriedade do componente.
2. 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 esse exemplo, adicione três componentes do Campo de texto . Use os seguintes Nomes de Propriedade para os componentes: column1, column2e column3.
3. 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.
4. Edite o componente de Grade de dados . Na guia Exibição , em CSS personalizado, insira a classe CSS mygrid .
   Salve o componente e o formulário. Isso resulta em uma terceira coluna mais larga, na qual o conteúdo é mais longo do que aproximadamente cinco a seis palavras.