Aggiungere lo scrolling al DataGrid di ASP.NET
Il trucco è banalissimo e legato all'inserimento del datagrid stesso all'interno di un tag di cui width ed height specificano ovviamente le dimensioni, che nell'esempio sono in pixels, ma che possono anche essere in percentuale.
Così facendo, il datagrid scorre tutto quanto nella div, intestazioni comprese: questo può non essere sempre gradevole, per cui risulta necessariocreare una intestazione di riga fissa.
Ciò è facilmente realizzabile, creando, con una tabella in puro HTML, una grafica simile all'intestazione del datagrid (con colonne cioè di pari larghezza a quella delle colonne del grid) e ponendola prima del div al cui interno si trova il datagrid stesso.
A questo, ovviamente, sarà stata pertanto impostato l'attributo di ShowHeader="False", per evitare la doppia visualizzazione dell'intestazione.
<form method="post" runat="server">
<table style="WIDTH: 800px; BORDER-COLLAPSE: collapse" cellspacing="0" border="1">
<tbody>
<tr class="tableHeader" bordercolor="black" bgcolor="#aaaadd">
<td style="WIDTH: 300px">Company Name</td>
<td style="WIDTH: 300px">Contact Name</td>
<td style="WIDTH: 200px">Address</td>
</tr>
</tbody>
</table>
<div style="OVERFLOW: auto; WIDTH: 50%; HEIGHT: 250px">
<asp:DataGrid id="DataGrid1" runat="server" ShowHeader="False" SelectedItemStyle-BackColor="#99ccff" ItemStyle-CssClass="tableItem" HeaderStyle-CssClass="tableHeader" HeaderStyle-BackColor="#aaaadd" BorderColor="Black" AutoGenerateColumns="False" DataKeyField="idcliente">
<HeaderStyle cssclass="tableHeader" backcolor="#AAAADD"></HeaderStyle>
<PagerStyle position="TopAndBottom" mode="NumericPages"></PagerStyle>
<SelectedItemStyle backcolor="#99CCFF"></SelectedItemStyle>
<ItemStyle cssclass="tableItem"></ItemStyle>
<Columns>
<asp:BoundColumn DataField="nomesocietà">
<ItemStyle width="300px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="contatto">
<ItemStyle width="300px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="indirizzo">
<ItemStyle width="200px"></ItemStyle>
</asp:BoundColumn>
</Columns>
</asp:DataGrid>
</div>
</form>In questo modo, pur apparentemente mantenendo una intestazione, il datagrid scorre solo con le varie righe. Rimane però il problema legato alla eventuale presenza delle barre di scorrimento che sfasano, per così dire, l'allineamento tra le colonne del datagrid e l'intestazione: per eliminare il problema è sufficiente attribuire al datagrid una larghezza (width) maggiore di 13 pixels rispetto alla tabella, spazio cioè richiesto dalla barra stessa.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
