01.Blogs :
mauriciogonzatto  
.NET, C#, Oracle, Web, tecnologia em geral e diversidades.

Congelando Header e Columns de Grid escrolável

Um cliente solicitou umas mudanças nas Grids de pesquisa do sistema, então estive pesquisando sobre congelar o header e columns do DataGrid, encontrei uma solução no site do Richard Xin's ( http://www.richardxin.com ). Bem interessante, mas ele pressupõe que tenha alguma noção de CSS, então resolvi colocar aqui e explicar tbm como fazer uma Grid Escrolável, com barra de rolagem já que, nem todos tem noção de CSS.

No ASPX, adicione um div, que será responsável pelo scroll do DataGrid:

<div id="scroll" style="width:500px; height:400px; overflow:scroll; ">
        <asp:DataGrid id="dataGrid1" runat="server">
             <headerstyle CssClass="Header" BackColor="#009933"></headerstyle>
        </asp:DataGrid>

</div>

Crie as classes CSS responsáveis pelo congelamento do Header e Column:

<style type="text/css">
 .Header
 {
     position:relative ;
     top:expression(this.offsetParent.scrollTop);
     z-index: 10;
     border-top:2px;
 }

 .Col
 {
    LEFT: expression(document.getElementById("scroll").scrollLeft);
    /*scroll é o Id do div que torna a grid escrolável */ 
    POSITION: relative;
    z-index: 1;
 } 
 </style>

A Classe Header, definida anteriormente no HeaderStyle da Grid, e a Coluna, pode ser definida em tempo de execução:

No evento OnItemCreated do Datagrid:

//Atribua a classe Col para as colunas que queira deixar "congelada"

e.Item.Cells[0].CssClass = "Col";
e.Item.Cells[1].CssClass = "Col";

 

Agora é só Preencher a Grid e mandar bala!


posted on Wednesday, October 19, 2005 2:07 AM by mauriciogonzatto


 
03.UPDATE CALENDAR :
<October 2005>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

05.MY LINKS :

07.Subscriptions :

Subscriptions


© Copyright 2005 Microsoft Corporation. All Rights Reserved.
Terms of Use | Privacy Statement | Code of Conduct | Hosted by MaximumASP for Microsoft
WHO-BAR