DevTrain Startseite Advanced Developers Conference vom 14.-15. Februar 2011  
  
  
SUCHEN:  
ARTIKEL ONLINE: 525   

Kategorien
.NET
Datenbanken
Web
XML

Allgemein
Camp
Foren
Events
Persönliche Einstellungen
Registrieren
Prämien Shop
Kontakt
Impressum
Über DevTrain

Autoren


   Autor: Hannes Preishuber Artikel Drucken
        
Datagrid scrollt, Titel bleibt

Websites sind weniger benutzerfreundlich als Windows Anwendungen. Leider sind die meisten Websites so, weil der Komfort für den Entwickler weniger ist. Nehmen wir mal als Beispiel das Datagrid. Im Web fehlt die Möglichkeit das Grid zu scrollen und dabei die Titelzeile stehen zu lassen. Bei etwas längeren Datentabellen kann dies eine brauchbare Alternative zum Paging sein.

Im Design View des Datagrids sucht man das Proberty allerdings vergeblich. Also muss man wieder mal per Hand dafür sorgen.
Der Trick ist, das Datagrid nachdem es an den Browser geschickt wurde, am Client vom Browser per JScript umbauen zu lassen.
Dabei wird eine Tabelle mit 2 Zeilen erzeugt. In die erste Zeile kommt später der Header und in die zweite die Daten. Um dann noch Scrollen zu können muss man den Grid Body darum in ein DIV packen.



Das ganze besorgt für uns ein umfangreiches Jscript. Per HTC wird das Script an das Event Documentready gebunden. Das Script muss natürlich in einer eigenen Datei (hier scroll.htc) gespeichert werden. Im wesentlichen wird damit das DOM der HTML Seite zerpflückt, geändert und wieder zusammengesetzt. Details dazu sollten eher in Jscript Artikeln besprochen werden.

<PUBLIC:ATTACH event="ondocumentready" handler="hdlDR" />
<SCRIPT language="JScript">
function hdlDR()
{
   // Elemente erstellen
   var tableHeader = this.cloneNode(false);
   var tableBody  = this.cloneNode(false);
   var divCntr   = document.createElement("DIV");
   // aktuelle Spaltenbreite merken
   var tdWidths = new Array();
   for (var i = 0; i < this.rows[0].cells.length; i++)
   {
      tdWidths[i] = this.rows[0].cells[i].offsetWidth;
   }
   // Header Anhaengen
   var tbdyHeader = document.createElement("TBODY");
   tableHeader.appendChild(tbdyHeader);
   tbdyHeader.appendChild(this.rows[0].cloneNode(true));
   // Body Reihen anhaengen
   var tbdyBody = document.createElement("TBODY");
   tableBody.appendChild(tbdyBody);
   for (var i = 1; i < this.rows.length; i++)
   {
      var oRow = this.rows[i].cloneNode(true);
      tbdyBody.appendChild(oRow);
   }
   // scrollbar visible | hidden | scroll | auto
   divCntr.style.overflow = "auto";
   if (this.bodyHeight) divCntr.style.height = this.bodyHeight;
   divCntr.appendChild(tableBody);
   // alte Spalten entfernen
   for (var i = this.rows.length; i > 0; i--)
   {
      this.rows[i-1].removeNode(true);
   }
   var tr1 = this.insertRow();
   var td1 = tr1.insertCell();
   var tr2 = this.insertRow();
   var td2 = tr2.insertCell();
   //Ueberschrift Zelle Laden & Hintergund angleichen
   td1.appendChild(tableHeader);
   td1.className=this.headerCSS;
   td2.appendChild(divCntr);
   // Spaltenbreite setzen
   for (var i = 0; i < tdWidths.length - 1; i++)
   {
      tableHeader.rows[0].cells[i].width = tdWidths[i];  
      tableBody.rows[0].cells[i].width   = tdWidths[i];
   }
   tableHeader.style.fontSize    = "100%";
   tableHeader.width             = "100%";
   tableHeader.style.tableLayout = "fixed";
   tableHeader.className         = this.headerCSS ? this.headerCSS : "";
   tableHeader.border = 0;
   tableBody.style.fontSize      = "100%";
   tableBody.width               = "100%";
   tableBody.style.tableLayout   = "fixed";
   tableBody.className           = this.bodyCSS ? this.bodyCSS : "";
   tableBody.border = 0;
   this.cellSpacing = 0;
   this.cellPadding = 0;
}
</SCRIPT> 

Um das Script auch in die ASPX Seite einzubinden, muss eine Style Klasse erzeugt werden die per Behavior zur URL der Script Datei verweist

  <STYLE>
.tableMain { FONT-SIZE: 0.8em; BEHAVIOR: url(scroll.htc); FONT-FAMILY: Verdana }
.tableHeader { BACKGROUND-COLOR: skyBlue }
.tableBody { COLOR: darkblue; BACKGROUND-COLOR:#EEEEEE }
  </STYLE>


Der letzte wesentliche Punkt behinhaltet das Einfügen von Attributen in das Datagrid. Diese Attribute wie headerCSS oder BodyCSS haben für ASP.NET keine Bedeutung. Erst das clientseite Script kann damit was anfangen.

<asp:DataGrid id="DataGrid1" bodyHeight="50" bodyCSS="tableBody" headerCSS="tableHeader" cssclass="tableMain"
    runat="server" AutoGenerateColumns="False"


Am Schluss steht dann das Scrollbare Datagrid.

Und wieder sind wir unserem Browserbasierten Excel einen Schritt näher gekommen. Allerdings funktioniert dieser Code nur im Internet Explorer ab Version 5. Eine portierung für andere Browser ist denkbar.

Die Idee und wesentliche Teile des Codes stammen von einem Englisch sprachigen Artikel eines Paschal L.  


DevTrain Camp - Schneller zum .NET 3.5 Developer
 
Verwandte Artikel      Verlinkte Dokumente
    Keine verknüpften Dokumente
    Keine Links vorhanden

  Erfasst am: 01.10.2003
  Gültig bis: 30.12.2003
35 Ratings
Bewertung: 64,6%
schlecht    sehr gut  

 
© Copyright 2007 ppedv AG