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.