I controlli relativi all'associazione dei dati (Repeater, DataList e DataGrid) sono controlli dalle funzionalità molto complesse. Hanno la funzione di contenitori per gli altri controlli che visualizzano realmente i dati, come le etichette. Sono molto funzionali e potenti e risparmiano molte operazioni manuali agli sviluppatori. D'altra parte sono però più complessi da utilizzare.
In questo articolo vedremo il controllo DataGrid. Esso si serve delle colonne per visualizzare i dati in una griglia ed è, tra i controlli legati ai dati, quello più complesso e funzionale. Supporta la selezione, l'ordinamento, il paging e la modifica dei dati.
Ecco come appare graficamente il nostro esempio (figura 1). Potete anche sperimentare direttamente utilizzando la demo. Il codice completo è quello contenuto in questo listato.
Il controllo DataGrid
Analizziamo, prima di tutto, il codice HTML del controllo DataGrid:
<asp:datagrid id="DataGrid1" runat="server"
HeaderStyle-BackColor="#ccffff"
BorderColor="Black"
CellPadding="4"
Width="550px"
Font-Names="Verdana"
Font-Size="8pt"
OnItemCommand="DataGrid1_Delete"
OnUpdateCommand="DataGrid1_Update"
OnCancelCommand="DataGrid1_Cancel"
onEditCommand="DataGrid1_Edit"
AutoGenerateColumns="false">
<Columns>
<asp:BoundColumn DataField="ID"
HeaderText="Codice" readonly="true" />
<asp:BoundColumn DataField="Nome"
HeaderText="Nome" />
<asp:BoundColumn DataField="Cognome"
HeaderText="Cognome" />
<asp:BoundColumn DataField="Indirizzo"
HeaderText="Indirizzo" />
<asp:BoundColumn DataField="Citta"
HeaderText="Città" />
<asp:BoundColumn DataField="CAP"
HeaderText="CAP" />
<asp:HyperLinkColumn Text="Sito
Web" HeaderText="Sito Web"
DataNavigateUrlField="SitoWeb"
/>
<asp:EditCommandColumn ButtonType="LinkButton"
HeaderText="Modifica"
EditText="Modifica"
UpdateText="Aggiorna" CancelText="Annulla" />
<asp:ButtonColumn Text="Elimina"
ButtonType="PushButton"
HeaderText="Elimina"
CommandName="delete" />
</Columns>
</asp:datagrid>
Come si può notare, il controllo viene creato tramite il tag <asp:datagrid>. Esso dispone di molte proprietà che possono essere manipolate. Le prime righe impostano semplicemente proprietà relative allo stile del DataGrid.
Con onItemCommand, onUpdateCommand, onCancelCommand e onEditCommand assegniamo dei metodi al verificarsi di particolari eventi. Li vedremo meglio in seguito.
AutoGenerateColumns permette di personalizzare le colonne del DataGrid. In base all'impostazione predefinita (AutoGenerateColumns="true"), il controllo genera una colonna per ciascun campo del database, rispettando l'ordine di successione dei dati. Impostando AutoGenerateColumns="false", è invece possibile specificare i campi da visualizzare manualmente, così come specificare il modo in cui visualizzarli.
In particolare, possono essere definite:
- BoundColumn: colonne associate al DB, che consentono di specificare quali campi visualizzare e in quale ordine e di formattare gli attributi di stile;
- HyperLinkColumn: colonne con collegamenti ipertestuali;
- ButtonColumn: colonne di pulsanti, a cui si possono definire funzionalità personalizzate;
- EditCommandColumn: colonne di comandi di modifica, che consentono di modificare gli elementi sostituendo tutte le colonne associate al DB con campi modificabili;
- TemplateColumn: colonne con template, con le quali si possono anche definire formati personalizzati per le colonne.
Per definire le colonne personalizzate, è necessario che vengano aggiunte all'insieme Columns del controllo DataGrid, mediante il tag <Columns>.
Il controllo BoundColumn utilizza la proprietà DataField per associare la colonna del DataGrid ad un campo dell'archivio dati. La proprietà HeaderText imposta il testo da visualizzare nell'intestazione della colonna. Infine, con la proprietà ReadOnly è possibile rendere il valore della colonna non modificabile.
Il controllo HyperLinkColumn permette di associare un link ad un campo del DB. In questo modo possibile, per esempio, spostarsi da un elemento della griglia a una visualizzazione dei dettagli presente su un'altra pagina. Con la proprietà DataNavigateUrlField viene associato l'URL del link ad un campo del DB, mentre con DataTextField viene associato il testo del link. È anche possibile creare dei link statici. In questo caso con NavigateURL si definisce l'URL e con Text il testo. Mediante la proprietà HeaderText, si imposta, infine, il testo dell'intestazione di colonna.
Le colonne ButtonColumn vengono utilizzate per attivare un comando dell'utente da una riga in un gestore di eventi presente sulla griglia. L'evento viene associato al controllo all'interno del tag <asp: datagrid> (Nell'esempio: OnItemCommand="DataGrid1_Delete"). In base all'impostazione predefinita, il controllo ButtonColumn visualizza un controllo LinkButton, ma utilizzando la proprietà ButtonType, è possibile specificare un tipo diverso, come nell'esempio. Con Text e HeaderText si definiscono, rispettivamente, il testo del pulsante e quello dell'intestazione di colonna.
EditCommandColumn è uno speciale tipo di colonna che supporta la modifica sul posto dei dati contenuti in una riga della griglia. In base all'impostazione predefinita, se cioè non sono in corso modifiche ad alcuna riga della griglia, nella colonna EditCommandColumn viene visualizzato un pulsante di modifica per ogni riga della griglia. Il tipo di pulsante viene specificato tramite la proprietà ButtonType, mentre il testo visualizzato sarà indicato dalla proprietà EditText.
Quando l'utente fa click su questo pulsante si attiva la modalità di modifica per l'elemento selezionato e ciascuna colonna di tipo BoundColumn diviene una casella di testo che l'utente potrà modificare. EditCommandColumn visualizza inoltre automaticamente i collegamenti di aggiornamento e di annullamento, il cui testo viene specificato grazie alle proprietà UpdateText e CancelText.
Osserviamo cosa accade quando si seleziona questo pulsante di modifica (figura 2).
Modifica degli elementi
EditCommandColumn interagisce con un'altra proprietà della griglia: EditItemIndex. In base all'impostazione predefinita, il valore di EditItemIndex è -1, a significare che non sono in corso modifiche ad alcuna riga (elemento) della griglia.
Quando EditItemIndex è uguale a -1 nella colonna EditCommandColumn viene visualizzato un pulsante di modifica per ogni riga della griglia. Quando si fa click su tale pulsante, viene generato l'evento EditCommand della griglia. È possibile gestire questo evento nel codice.
Ricordiamo, a tal proposito, che all'interno del tag <asp:datagrid> è stato associato l'evento EditCommand al metodo DataGrid_Edit (OnUpdateCommand="DataGrid1_Update"). Vediamo il codice di tale metodo:
Private Sub DataGrid1_Edit(ByVal obj As Object, ByVal e As DataGridCommandEventArgs)
DataGrid1.EditItemIndex = e.Item.ItemIndex
DataGrid1.DataBind()
End Sub
Il funzionamento di questo metodo è molto semplice: EditItemIndex viene impostato sulla riga selezionata, quindi i dati vengono nuovamente associati alla griglia.
Quando EditItemIndex è impostato su una riga particolare, nella colonna EditCommandColumn vengono visualizzati i pulsanti di aggiornamento e annullamento per tale riga. Questi pulsanti consentono di generare, rispettivamente, gli eventi UpdateCommand e CancelCommand.
Ecco, in sintesi, il codice che gestisce l'evento di aggiornamento:
Private Sub DataGrid1_Update(ByVal obj As Object, ByVal e As DataGridCommandEventArgs)
'Aggiorna ...
DataGrid1.EditItemIndex = -1
DataGrid1.DataBind()
End Sub
Ed ecco ora il metodo che gestisce l'evento di annullamento:
Private Sub DataGrid1_Cancel(ByVal obj As Object, ByVal e As DataGridCommandEventArgs)
DataGrid1.EditItemIndex = -1
DataGrid1.DataBind()
End Sub
Prima di concludere va ricordato che il DataGrid è un controllo molto complesso e provoca molto sovraccarico. Per questo non è una buona idea utilizzarlo sempre. Va utilizzato quando è necessario consentire all'utente l'interazione con i dati oppure quando bisogna utilizzare la potenza di organizzazione dei dati di cui è dotato, mentre non è l'ideale in situazioni che richiedono una piccola e veloce visualizzazione.
