Datagrid con scroll verticale

Per ottenere in una web application una datagrid con scroll verticale basta un semplice div, ma procediamo per ordine.
Come primo passo bisogna creare l'header della datagrid.
Supponiamo che quest'ultima sia costituita da tre colonne, l'header diventa banalmente una tabella con tre celle:

<table cellSpacing="0" cellPadding="0" width="600" border="1">
<tr>
<td width="200">LastName</td>
<td width="200">Title</td>
<td width="200">City</td>
</tr>
</table>

Adesso possiamo disattivare l'header della datagrid deselezionando la proprietà "Mostra Intestazione".
Inoltre come si può notare le celle hanno una dimensione fissa di 200px, di conseguenza per ottenere un perfetto allineamento anche le colonne della datagrid devono avere la stessa caratteristica.
Ci sono due strade per ottenere questo allineamento, lavorare con le Template Column oppure se la proprietà "AutoGenerateColumns" è impostata su true, possiamo nell'evento ItemDataBound:

private void dgrScroll_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

{

foreach( TableCell cell in e.Item.Cells)

cell.Width = 200;

}

Come secondo ed ultimo passo incapsulare la datagrid in un div:

<DIV style="OVERFLOW: auto; WIDTH: 613px; HEIGHT: 300px; TEXT-ALIGN: left">

<asp:datagrid id="dgrScroll" runat="server" CellPadding="0" CellSpacing="0" BorderWidth="1px"

AutoGenerateColumns="true" Width="600px">

</asp:datagrid></DIV>

Il div presenta uno stile in linea con larghezza fissa impostata a 613, cioè 600 è la dimensione fissa dell'header e della datagrid e 13 sono i pixel della scrollbar laterale.
Inoltre lo stile presenta la proprietà OVERFLOW, il quale valore indicherà al browser come comportarsi nel renderizzare la datagrid nel caso in cui le impostazioni width ed height non consentono la totale visualizzazione. In questo modo nel momento in cui la nostra datagrid supera l'altezza di 300 px allora apparirà la scrollbar verticale.
Questo è il risultato finale: