DataGrid sem borda no ASP.NET


Olá Pessoa,

No ASP.Net quando precisamos utilizar o componente padrão de grid (asp:datagrid), notamos que ele gera uma tabela como resultado no HTML. Por um lado isto é bom, pois segue as normas do W3C para este tipo de dado. Porém, por padrão, ele acrescenta alguns atributos na tabela, creio que para facilitar no desenvolvimento. Um destes atributo é uma borda em cada linha.

Para remover esta borde e fazer com que a nossa tabela html de resultado venha com a borda zerada “border=0”, temos que modificar uma propriedade do componente chamada GridLines para None.

Veja abaixo o código asp.net do grid antes da alteração:

<asp:DataGrid ID="grdListagem" runat="server" AutoGenerateColumns="false">
<Columns>
     <asp:BoundColumn DataField="procedimento" HeaderText="Código"></asp:BoundColumn>
     <asp:BoundColumn DataField="descricao" HeaderText="Descrição">
          <ItemStyle Width="350px" />
     </asp:BoundColumn>
</Columns>                    
<HeaderStyle CssClass="cabecalho" />
</asp:DataGrid>

E agora depois da alteração:

<asp:DataGrid ID="grdListagem" runat="server" AutoGenerateColumns="false" GridLines="None">
<Columns>
     <asp:BoundColumn DataField="procedimento" HeaderText="Código"></asp:BoundColumn>
     <asp:BoundColumn DataField="descricao" HeaderText="Descrição">
          <ItemStyle Width="350px" />
     </asp:BoundColumn>
</Columns>                    
<HeaderStyle CssClass="cabecalho" />
</asp:DataGrid>

Note que no resultado do HTML temos uma simples tabela com o atributo “border=0”.

<table rules="all" border="0" id="ctl00_grdListagem">...

Pronto. Agora podemos definir da forma que desejarmos a borda pelo CSS.

Espero que tenham gostado da dica.

Até a próxima!

Abraços, Alex.

Publicado em 20 de dezembro de 2008, em ASP.NET e marcado como . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: