Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
Fixando Titulo e Colunas de uma GridView
Data:4/12/2011

Translate this page now :





Categories: ASP.NET , JQuery

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :
Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon

Veja Também


jquery-logoInspirado por uma pergunta que encontrei no MSDN Brasil, resolvi pesquisar mais sobre o assunto, achei até mesmo que fosse simples, pois tinha certeza de já ter escrito sobre isso anteriormente.

Realmente escrevi : Podem ver uma dica aqui

Resumindo : O objetivo é que em uma gridview com muito conteúdo em colunas e linhas possa ser utilizada uma barra de rolagem para visualizar o conteúdo, porém o título e algumas colunas iniciais possam ficar fixas durante a rolagem.

O problema é que essa dica, amplamente divulgada por toda a web, só funciona até o IE 7.0, outros browsers esta dica não funciona.

Já inspirado, resolvi solucionar o problema com JQuery. A solução não ficou tão simples, mas graças ao JQuery isso é fácil de resolver : Criei um um plugIn para o JQuery, facilitando assim a aplicação desta solução.

Passo a Passo

  • Crie uma nova ASP.NET Empty Web Application
  • Adicione um webform
  • Adicione um sqlDataSource no WebForm com a seguinte query : SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Country] FROM [Customers]
  • Adicione uma gridView com edição, exclusão e ordenação, mas sem paginação
  • No page_load, acrescente o código abaixo para gerar o THEAD e o TBODY – o plugIn foi criado para funcionar com estas tags
    Saiba mais sobre essas tags em TBODY, THEAD : JQuery e a Gridview e Melhorando a GridView : CoolGrid no CodePlex
  • Configure a propriedade clientIDMode da GridView para Static

SNAG-0028

Com essa configuração garantimos que a tag gerada pela gridview no client terá o mesmo ID que a GridView, facilitando a programação client
  • No source, em volta da GridView, adicione uma DIV de forma a limitar o espaço ocupado pela gridview, da seguinte forma :
   1: <div style="height:200px;width:500px;overflow:auto" id="divtabela">
   2:     <gridview ... />
   3: </div>
  • Teste a aplicação e observe a gridview com barras de rolagem

SNAG-0030

  • Crie uma pasta Scripts no projeto
  • Acrescente no projeto os scripts do JQuery
  • Acrescente no projeto o script do fixGrid, o plugIn criado (pegue-o em http://fixgrid.codeplex.com/)
  • Acrescente no webForm o script do JQuery e o script do PlugIn. O código no HEAD da página fica da seguinte forma :
   1: <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   1:  
   2: <script src="Scripts/fixGrid.js" type="text/javascript">
</script>
  • Programe em JQuery a colocação do título e colunas fixas na GridView, veja como fica :
   1: <script language="javascript" type="text/javascript">
   2:     $(function () {
   3:         $("#GridView1").fixarGrid(2);
   4:     })
   5: 
  • Teste a página para verificar o resultado

SNAG-0029

Código Fonte

Sem dúvida o código fonte ainda pode ser bastante melhorado, exatamente por isso disponibilizei o projeto deste plugIn no CodePlex em http://fixgrid.codeplex.com/

Idéias e desenvolvedores são muito bem vindos para a melhoria deste plugin.



Categories: ASP.NET , JQuery


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 1/31/2017 11:01:00 AM
nome: NbYsJsaBHSzPOh
email: derby451@hotmail.com
comentário:
XbSnsX http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 8:18:00 AM
nome: ECojNzTtKRKfd
email: jogcbfn@hotmail.com
comentário:
jmnw6f http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 8:12:00 AM
nome: rVhhJGxbeQVjerebGvr
email: derby451@hotmail.com
comentário:
QMUhWU http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/5/2017 5:34:00 PM
nome: iktMUsOdGqGCeHtgF
email: jfvynms4281rt@hotmail.com
comentário:
bWbS90 http://www.FyLitCl7Pf7ojQdDUOLQOuaxTXbj5iNG.com

data: 10/14/2016 11:56:00 PM
nome: neBaBCjIfYNJJsRD
email: jimos4581rzt@hotmail.com
comentário:
DsuKcp http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br