Olá! Quinta Feira, 28 de Agosto de 2008.



Dicas CódigoFonte.net
Sexta Feira, 20 de Junho de 2008

DataGrid sem borda no ASP.NET

Olá Pessoa, tudo jóia?

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:

  1. <asp:DataGrid ID="grdListagem" runat="server" AutoGenerateColumns="false">
  2. <Columns>
  3.      <asp:BoundColumn DataField="procedimento" HeaderText="Código"></asp:BoundColumn>
  4.      <asp:BoundColumn DataField="descricao" HeaderText="Descrição">
  5.           <ItemStyle Width="350px" />
  6.      </asp:BoundColumn>
  7. </Columns>                    
  8. <HeaderStyle CssClass="cabecalho" />
  9. </asp:DataGrid>


E agora depois da alteração:

  1. <asp:DataGrid ID="grdListagem" runat="server" AutoGenerateColumns="false" GridLines="None">
  2. <Columns>
  3.      <asp:BoundColumn DataField="procedimento" HeaderText="Código"></asp:BoundColumn>
  4.      <asp:BoundColumn DataField="descricao" HeaderText="Descrição">
  5.           <ItemStyle Width="350px" />
  6.      </asp:BoundColumn>
  7. </Columns>                    
  8. <HeaderStyle CssClass="cabecalho" />
  9. </asp:DataGrid>


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

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


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

=D

Espero que tenham gostado da dica.

Até a próxima.

[]s

Comentários do artigo [Novo comentário]

Nenhum comentário, seja o primeiro a comentar.
Para adicionar um comentário você deve efetuar o login

Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:



Melhor Visualizado com
800x600 de Resolução
CodigoFonte.net » CodigoFonte.eti.br » CompreDeTudo.com » MeuMural.com.br » Todos os Direitos Reservados © 2002/2008