Mathieu Kempé
Comment ajouter une barre de défilement à un Datagrid.
Ajouter une « scrollbar » à un contrôle asp.net, et plus précisément à un Datagrid.
Par Mathieu Kempé publié le 17/10/2005 à 09:49, lu 17129 fois,
commentaire(s) 1 commentaire(s) tag(s)Tags: ASP.NET
Il peut être intéressant d'un point de vue ergonomique, de pouvoir dans certains cas afficher un contrôle et de pouvoir afficher une barre de défilement sur le contenu du contrôle sans avoir a scroller sur toute la page.

Le plus facile est d'utiliser la balise html DIV, qui avec le bon style affiche le contenu et s'il est trop grand ajoute des barres de défilement grâce à la propriété overflow.
<form id="Form1" method="post" runat="server">
    <div id="divGrid" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 250px">
        <asp:DataGrid id="DataGrid1" Width="100%">
        ...
    </div>
</form>
Ce qui donne :


Pour allez encore un peu plus loin, il serait bien de conserver la position de l'ascenseur entre chaque postback.
Pour cela il suffit d'utiliser un peu de JavaScript et un contrôle HTML hidden que l'on marque comme runat=server pour conserver dans le viewstate la position de l'ascenseur entre chaque postback.
<HTML>
   <HEAD>
      <title>WebForm2</title>
        <script type="text/javascript">

      window.onload = function(){
        var strPos = document.getElementById("scrollPosHidden").value;
          document.getElementById("divGrid").scrollTop = strPos;
      }
      function SaveDivPosition(){      
        var intY = document.getElementById("divGrid").scrollTop;        
        document.getElementById("scrollPosHidden").value = intY;
      }
      </script>
   </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <div id="divGrid" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 250px" onscroll="SaveDivPosition()">
                <asp:DataGrid id="DataGrid1" runat="server">
                ...
                </asp:DataGrid></div>
            <INPUT type="hidden" id="scrollPosHidden" runat=server>
        </form>
    </body>
</HTML>
Chaque fois que l'ascenseur est utilisé, la fonction JavaScript SaveDivPosition met à jour la position de la scrollbar. Puis à chaque chargement de la page une méthode JavaScript est appelée pour positionner l'ascenseur.
 
» Démarrer une discussion
 
 
Discussion démarée par michelle le 06/03/2008 à 09:19, 1 commentaire(s).