Introduzione:
Nel caso che si devono creare delle griglie, con delle colonne che evidenziano tramite immagine lo stato dei dati, o altre indicazioni, tramite la creazione di colonne personalizzate possiamo dotare il controllo gridView di questa particolarità.
Di seguito viene illustrato come creare un controllo GridView, nel quale ci sia una colonna di tipo immagine, che in base al valore di una colonna nascosta, verrà visualizzata una determinata immagine (figura 1) .
Figura 1
Aggiungiamo nel nostro progetto web, un controllo gridView, ed un pulsante. Per il controllo gridview, impostiamo la proprietà autogeneratecolomn a false.
Passiamo in visualizzazione codice html, in questo modo impostiamo le colonne da visualizzare nella griglia.
Qui di seguito si riportano le colonne di cui è composto il controllo gridview.
<Columns>
<asp:BoundField DataField="ValoreStato" ReadOnly="true">
<ItemStyle Font-Size="0pt" Width="0px" Wrap="False" />
<HeaderStyle Font-Size="0pt" Width="0px" Wrap="False" />
<ControlStyle Font-Size="0pt" Width="0px" />
<FooterStyle Font-Size="0pt" Width="0px" Wrap="False" />
asp:BoundField>
<asp:TemplateField>
<HeaderTemplate>
<input ID="chkAll" runat="server"
type="checkbox" />
HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="Panel2" runat="server" Height="16px" Width="20px">
<asp:CheckBox ID="chkSeleziona" runat="server" Text=" " Width="18px" />
asp:Panel>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Stato">
<HeaderStyle Font-Size="Smaller" Wrap="False" />
<ItemTemplate>
<asp:Image ID="ImgAccettato" runat="server" ImageUrl="~/Img/si.png"
ToolTip="Validato" />
<asp:Image ID="ImgRifiutato" runat="server" ImageUrl="~/Img/no.png"
ToolTip="Rifiutato" />
<asp:Image ID="ImgAttesa" runat="server" ImageUrl="~/Img/attesa.png"
ToolTip="In attesa di validazione" />
ItemTemplate>
<ItemStyle Wrap="False" />
asp:TemplateField>
<asp:BoundField DataField="Nome" HeaderText="Nome" />
<asp:BoundField DataField="Anni" HeaderText="Anni" />
VB.Net
Columns>
Notiamo con attenzione la creazione di queste colonne.
La prima colonna, chiamata ValoreStato di tipo bounField, avrà il compito di contenere il valore di ogni riga relativo allo stato, in questo modo a secondo del valore, verrà visualizzata una determinata immagine.
La seconda colonna di tipo template field, visualizzerà una colonna di tipo checkbox, in questo caso, può essere anche omessa.
La terza colonna, sempre di tipo templateField, avrà il compito di visualizzare l'immagine, in base al valore impostato nella prima colonna.
Come si vede, abbiamo degli oggetti di tipo itemTemplate, nel quale si trovano oggetti image, contenenti l'immagine da visualizzare.
Le ultime due colonne di tipo buondField, sono colonne che visualizzano i dati.
Terminata la personalizzazione del controllo gridView, passiamo in visualizzazione, codice, in particolare, nell'evento load della pagina, in modo che valorizziamo con dei dati, il controllo gridview.
Qui di seguito si riporta un esempio di codice.
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack <> True Then
Dim dttDati As New DataTable()
Dim dtcValoreStato As New DataColumn("ValoreStato")
Dim dtcNome As New DataColumn("Nome")
Dim dtcAnni As New DataColumn("Anni")
dttDati.Columns.Add(dtcNome)
dttDati.Columns.Add(dtcAnni)
dttDati.Columns.Add(dtcValoreStato)
Dim dtrRiga As DataRow = dttDati.NewRow()
dtrRiga("ValoreStato") = 0
dtrRiga("Nome") = "Emanuele"
dtrRiga("Anni") = 34
dttDati.Rows.Add(dtrRiga)
dtrRiga = dttDati.NewRow()
dtrRiga("ValoreStato") = 0
dtrRiga("Nome") = "Mario"
dtrRiga("Anni") = 52
dttDati.Rows.Add(dtrRiga)
dtrRiga = dttDati.NewRow()
dtrRiga("ValoreStato") = 0
dtrRiga("Nome") = "Marco"
dtrRiga("Anni") = 14
dttDati.Rows.Add(dtrRiga)
GrvDati.DataSource = dttDati
GrvDati.DataBind()
ViewState("Dati") = dttDati
End If
End Sub
C#
if (!Page.IsPostBack )
{
DataTable dttDati = new DataTable();
DataColumn dtcValoreStato = new DataColumn("ValoreStato");
DataColumn dtcNome = new DataColumn("Nome");
DataColumn dtcAnni = new DataColumn("Anni");
dttDati.Columns.Add(dtcNome);
dttDati.Columns.Add(dtcAnni);
dttDati.Columns.Add(dtcValoreStato);
DataRow dtrRiga = dttDati.NewRow();
dtrRiga["ValoreStato"] = 0;
dtrRiga["Nome"] = "Emanuele";
dtrRiga["Anni"] =34;
dttDati.Rows.Add(dtrRiga);
dtrRiga = dttDati.NewRow();
dtrRiga["ValoreStato"] = 0;
dtrRiga["Nome"] = "Mario";
dtrRiga["Anni"] = 52;
dttDati.Rows.Add(dtrRiga);
dtrRiga = dttDati.NewRow();
dtrRiga["ValoreStato"] = 0;
dtrRiga["Nome"] = "Marco";
dtrRiga["Anni"] = 14;
dttDati.Rows.Add(dtrRiga);
GrvDati.DataSource = dttDati;
GrvDati.DataBind();
ViewState["Dati"] = dttDati;
}
else
{
DataTable dttDati = (DataTable)ViewState["Dati"];
GrvDati.DataSource = dttDati;
GrvDati.DataBind();
}
Quando si creano le varie righe del controllo gridView, dobbiamo impostare l'immagine che dovrà essere visualizzata. Nell'evento RowDataBound, del controllo gridiView, dobbiamo rilevare i vari oggetti image, e renderli visibili o no, a seconda del valore della prima colonna,
Qui di seguito si riporta un esempio di codice.
VB.Net
Protected Sub GrvDati_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GrvDati.RowDataBound
'visualizzo o no le varie immagini
Try
If e.Row.RowType = DataControlRowType.DataRow Then
Dim chkSelect As CheckBox = CType(e.Row.FindControl("chkSeleziona"), CheckBox)
Dim ImgSi As Image = CType(e.Row.FindControl("ImgAccettato"), Image)
Dim ImgNO As Image = CType(e.Row.FindControl("ImgRifiutato"), Image)
Dim ImgAttesa As Image = CType(e.Row.FindControl("ImgAttesa"), Image)
Dim status As Integer = Integer.Parse((e.Row.Cells(0).Text))
If status = 0 Then
ImgSi.Visible = False
ImgNO.Visible = False
ImgAttesa.Visible = True
ElseIf status = 1 Then
ImgSi.Visible = True
ImgNO.Visible = False
ImgAttesa.Visible = False
chkSelect.Checked = True
ElseIf status = 2 Then
ImgSi.Visible = False
ImgNO.Visible = True
ImgAttesa.Visible = False
chkSelect.Checked = True
End If
End If
Catch ex As Exception
Response.Write(ex.Message)
End Try
End Sub
C#
protected void GrvDati_RowDataBound(object sender, GridViewRowEventArgs e)
{
//visualizzo o no le varie immagini
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkSelect = (CheckBox)e.Row.FindControl("chkSeleziona");
Image ImgSi = (Image)e.Row.FindControl("ImgAccettato");
Image ImgNO = (Image)e.Row.FindControl("ImgRifiutato");
Image ImgAttesa = (Image)e.Row.FindControl("ImgAttesa");
int status = int.Parse(e.Row.Cells[0].Text);
if (status == 0)
{
ImgSi.Visible = false;
ImgNO.Visible = false;
ImgAttesa.Visible = true;
}
if (status == 1)
{
ImgSi.Visible = true;
ImgNO.Visible = false;
ImgAttesa.Visible = false;
chkSelect.Checked = true;
}
if (status == 2)
{
ImgSi.Visible = false;
ImgNO.Visible = true;
ImgAttesa.Visible = false;
chkSelect.Checked = true;
}
}
}
catch (Exception ex)
{
Response.Write( ex.Message);
}
}
Terminato ciò, non ci resta che cambiare i valori nella griglia, in modo che vengano visualizzate le varie immagini.
Nell'evento click del pulsante, cambiamo il valore della prima colonna, per ogni riga, in questo modo, ogni riga avrà un determinato valore.
Protected Sub BtnSi_Click(ByVal sender As Object, ByVal e As EventArgs) Handles BtnSi.Click
Dim dttDati As DataTable = CType(ViewState("Dati"), DataTable)
dttDati.Rows(0)("ValoreStato") = 1
dttDati.Rows(1)("ValoreStato") = 2
GrvDati.DataSource = dttDati
GrvDati.DataBind()
End Sub
C#
protected void BtnSi_Click(object sender, EventArgs e)
{
DataTable dttDati = (DataTable)ViewState["Dati"];
dttDati.Rows[0]["ValoreStato"] = 1;
dttDati.Rows[1]["ValoreStato"] = 2;
GrvDati.DataSource = dttDati;
GrvDati.DataBind();
}
Conclusioni
Abbiamo visto una delle tante possibilità di come personalizzare il controllo GridView, in particolare visualizzare una colonna di tipo immagine, che indica visibilmente lo stato della riga a cui fa riferimento.
Tramite la parola download è possibile scaricare il file di progetto utilizzato, sia per il linguaggio Visual Basic Net e sia per C#.
Download