GridVew con espansione - Asp.Net (VB.Net e C#)

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_aspnet-creazione-di-un-gridview-con-espa_874.aspx .

Introduzione
Vedremo come creare un gridView, nel quale il singolo record, contiene altri record figli, ossia appartenemente al record selezionato. Il tutto come mostrato in figura 1

Figura 1

Supponiamo di avere una situazione in cui si ha una grande società con diversi reparti (marketing, it, vendite, ecc) e per ogni reparto si trovano un certo numero di dipendenti.
L’articolo, illustra la tecnica di come rendere visibili tali dati, in maniera gradevole, ossia per ogni reparto visualizzare i dipendenti per quel settore. Tramite un immagine (+ o -) possiamo espandere la riga del reparto e vedere i dipendenti, oppure nasconderli.

Creazione del codice javascript e HTML

Dopo aver aggiunto al progetto delle immagini (+ e -), dobbiamo inserire un controllo gridview, nel codice html, utilizzeremo del codice Javascript per gestire l’immagine relativa alla possibilità di espandere o nascondere i dati relativi ai dipendenti.
Qui di seguito si riporta il codice Javascript, per le suddette operazioni.

<script language="javascript" type="text/javascript">

function CambiaImmagine(ClientId,IdTable)

{

if (document.getElementById(ClientId).getAttribute("src").indexOf("piu.gif") !=-1)

{

document.getElementById(ClientId).setAttribute("src","img/meno.gif");

}

else

{

document.getElementById(ClientId).setAttribute("src","img/piu.gif");

}

var aa = document.getElementById(IdTable).style;

if(aa.display=="none") aa.display="block";

else aa.display="none";

return false;

}

</script>

Dopo aver aggiunto il controllo gridView, aggiungere due colonne di tipo tamplate. Nel primo template si avrà un controllo di tipo imagebutton, che visualizza il simbolo + o – a seconda della circostanza.
Mentre nell’altro modello, inseriamo due controlli (textbox e label) per visualizzare la descrizione dell’ufficio ed il codice univoco dell’ufficio.
All’interno si inserisce una tabella, per la gestione delle informazioni, con al suo interno un controllo GridView.
Questo controllo griglia, avrà il compito di contenere le informazioni relativi ai dipendenti.
Riportiamo il codice Html della form.

<asp:GridView ID="grvEspansione" runat="server" AutoGenerateColumns="False" CellPadding="4"

ForeColor="#333333" GridLines="None"

onrowdatabound="grvEspansione_RowDataBound" >

<RowStyle BackColor="#EFF3FB" />

<Columns>

<asp:TemplateField>

<ItemTemplate>

<asp:ImageButton ImageUrl="img/piu.gif" CommandName="Expand" ID="btnEspandi" runat="server">

</asp:ImageButton>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Ufficio">

<ItemTemplate>

<asp:Label ID="lblIdUfficio" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Ufficio")) %>'></asp:Label>

<asp:TextBox ID="txtIdUfficio" Text='<%# Convert.ToString(DataBinder.Eval(Container.DataItem,"IdUfficio")) %>'

runat="server" Visible="false"></asp:TextBox>

<asp:Table ID="TabImpiegati" runat="server" HorizontalAlign="Center" Style="display: none;">

<asp:TableRow>

<asp:TableCell Width="5">&nbsp;</asp:TableCell>

<asp:TableCell ColumnSpan="3">

<asp:GridView ID="grdImpiegati" runat="server" AutoGenerateColumns="false" HeaderStyle-Font-Names="Verdana"

HeaderStyle-Font-Size="11pt" RowStyle-ForeColor="Black"

RowStyle-Font-Names="Verdana" RowStyle-Font-Size="10pt">

<Columns>

<asp:TemplateField HeaderText="Codice Impiegato">

<ItemTemplate>

<asp:Label ID="lblIdImpiegato" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container.DataItem,"IdUfficio")) %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Nome">

<ItemTemplate>

<asp:Label ID="lblNome" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Nome")) %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Cognome">

<ItemTemplate>

<asp:Label ID="lblCognome" runat="server" Text='<%# Convert.ToString(DataBinder.Eval(Container.DataItem,"Cognome")) %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<EditRowStyle BackColor="#2461BF" />

<AlternatingRowStyle BackColor="White" />

</asp:GridView>

Stesura Codice.
Terminata la creazione della parte web, si passa in visualizzazione codice
Il linguaggio utilizzato sarà VB.Net e C#

Si crea una funzione per il caricamento dei dati, qui di seguito si riporta il caricamento dei dati relativo alla prima griglia, quella che contiene i nomi dei vari reparti.

VB.NEt

Private Sub CaricaDati()

Dim CodiceUfficio As New DataColumn("IdUfficio")

Dim DescrizioneUfficio As New DataColumn("Ufficio")

Dim riga As DataRow

Dim dttTabella As New DataTable()

dttTabella.Columns.Add(CodiceUfficio)

dttTabella.Columns.Add(DescrizioneUfficio)

riga = dttTabella.NewRow()

riga("IdUfficio") = 1

riga("Ufficio") = "Marketing"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

riga("IdUfficio") = 2

riga("Ufficio") = "IT"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

riga("IdUfficio") = 3

riga("Ufficio") = "Vendite"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

Dim dtsDati As New DataSet()

dtsDati.Tables.Add(dttTabella)

grvEspansione.DataSource = dtsDati

grvEspansione.DataBind()

End Sub

C#

private void CaricaDati()

{

DataColumn CodiceUfficio = new DataColumn("IdUfficio");

DataColumn DescrizioneUfficio = new DataColumn("Ufficio");

DataRow riga;

DataTable dttTabella = new DataTable();

dttTabella.Columns.Add(CodiceUfficio);

dttTabella.Columns.Add(DescrizioneUfficio);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 1;

riga["Ufficio"] = "Marketing";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 2;

riga["Ufficio"] = "IT";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 3;

riga["Ufficio"] = "Vendite";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

DataSet dtsDati = new DataSet();

dtsDati.Tables.Add(dttTabella);

grvEspansione.DataSource = dtsDati;

grvEspansione.DataBind();

}

A seguire riportiamo una funzione nella quale contiene i dati relativi ai dipendenti e quindi alla griglia figlia.

VB.Net

Private Function CaricaImpiegati(ByVal IdUfficio As String) As DataView

Dim IdUff As Integer

IdUff = CType(IdUfficio, Integer)

Dim CodiceUfficio As New DataColumn("IdUfficio")

Dim Nome As New DataColumn("Nome")

Dim Cognome As New DataColumn("Cognome")

Dim riga As DataRow

Dim dttTabella As New DataTable()

dttTabella.Columns.Add(Nome)

dttTabella.Columns.Add(Cognome)

dttTabella.Columns.Add(CodiceUfficio)

riga = dttTabella.NewRow()

riga("IdUfficio") = 1

riga("Nome") = "Marco"

riga("Cognome") = "Toni"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

riga("IdUfficio") = 2

riga("Nome") = "Emanuele"

riga("Cognome") = "Mattei"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

riga("IdUfficio") = 2

riga("Nome") = "Max"

riga("Cognome") = "Urioni"

dttTabella.Rows.Add(riga)

riga = dttTabella.NewRow()

riga("IdUfficio") = 3

riga("Nome") = "Emanuele"

riga("Cognome") = "Foti"

dttTabella.Rows.Add(riga)

Dim dtvDati As New DataView

dttTabella.DefaultView.RowFilter = "IdUfficio =" & IdUff

dtvDati = dttTabella.DefaultView

Return dtvDati

End Function

C#

private DataView CaricaImpiegati(String IdUfficio)

{

int IdUff = Convert.ToInt32(IdUfficio);

DataColumn CodiceUfficio = new DataColumn("IdUfficio");

DataColumn Nome = new DataColumn("Nome");

DataColumn Cognome = new DataColumn("Cognome");

DataRow riga;

DataTable dttTabella = new DataTable();

dttTabella.Columns.Add(Nome);

dttTabella.Columns.Add(Cognome);

dttTabella.Columns.Add(CodiceUfficio);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 1;

riga["Nome"] = "Marco";

riga["Cognome"] = "Toni";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 2;

riga["Nome"] = "Emanuele";

riga["Cognome"] = "Mattei";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 2;

riga["Nome"] = "Max";

riga["Cognome"] = "Urioni";

dttTabella.Rows.Add(riga);

riga = dttTabella.NewRow();

riga["IdUfficio"] = 3;

riga["Nome"] = "Emanuele";

riga["Cognome"] = "Foti";

dttTabella.Rows.Add(riga);

DataView dtvDati = new DataView();

dttTabella.DefaultView.RowFilter = "IdUfficio =" + IdUff;

dtvDati = dttTabella.DefaultView;

return dtvDati;

}

Questa funzione viene richiamata nell’evento rowDataBound, del controllo padre, nel quale rileva I dati in relazione ai dipendenti che fanno parte degli uffici.
Vediamo qui di seguito il metodo rowDataBound, nel quale carica i dati per il controllo griglia figla. Dopo aver rilevato il codice identificativo dell’ufficio, effettua una query per verificare se rilevare i dati dell’ufficio che si sta caricando. Si imposta per ogni pulsante immagine, la funzione javascript per il cambiamento dell’immagine.

VB.Net

Protected Sub grvEspansione_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grvEspansione.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

DirectCast(e.Row.FindControl("btnEspandi"), ImageButton).Attributes("onClick") = "return CambiaImmagine('" + DirectCast(e.Row.FindControl("btnEspandi"), ImageButton).ClientID + "','" + DirectCast(e.Row.FindControl("TabImpiegati"), Table).ClientID + "')"

Dim IdUfficio As String = DirectCast(e.Row.FindControl("txtIdUfficio"), TextBox).Text

Dim grvImpiegati As GridView

grvImpiegati = DirectCast(e.Row.Cells(grvEspansione.Columns.Count - 1).FindControl("grdImpiegati"), GridView)

Dim dtvDati As DataView = CaricaImpiegati(IdUfficio)

grvImpiegati.DataSource = dtvDati

grvImpiegati.DataBind()

If dtvDati.Count < 1 Then

DirectCast(e.Row.Cells(0).FindControl("btnEspandi"), ImageButton).Visible = False

End If

End If

End Sub

C#

protected void grvEspansione_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

((ImageButton)e.Row.FindControl("btnEspandi")).Attributes["onClick"] = "return CambiaImmagine('" + ((ImageButton)e.Row.FindControl("btnEspandi")).ClientID + "','" + ((Table)e.Row.FindControl("TabImpiegati")).ClientID + "')";

string IdUfficio = ((TextBox)e.Row.FindControl("txtIdUfficio")).Text;

GridView grvImpiegati;

grvImpiegati = (System.Web.UI.WebControls.GridView)e.Row.Cells[grvEspansione.Columns.Count - 1].FindControl("grdImpiegati");

DataView dtvDati = CaricaImpiegati(IdUfficio);

grvImpiegati.DataSource = dtvDati;

grvImpiegati.DataBind();

if (dtvDati.Count < 1)

((ImageButton)e.Row.Cells[0].FindControl("btnEspandi")).Visible = false;

}

}

Conclusioni.
L’articolo ha voluto illustrare una tecnica di come creare un gridView nel quale espandere i sotto record di un riga principale, da cui dipendono, molto utile, in certi scenari.
Con il pulsante immagine, possiamo visualizzare il dettaglio dei dati o nasconderli.
Tramite la parola Download potete scaricare il progetto per entrambi i linguaggi.

Download