Un paio di giorni fa un post sul forum della community che frequento ha attratto la mia attenzione, un utente chiedeva come fosse possibile realizzare un GridView contenente un pulsante per ogni riga alla cui pressione rendesse visibile un secondo GridView con le informazioni associate alla riga. I casi erano due, o si voleva realizzare un effetto in stile Access, con la seconda griglia in primo piano, o si voleva integrare la seconda griglia nella riga. Il secondo caso è il più semplice, in quanto necessità solamente di aggiungere un TemplateField alla GridView principale, e fare il bind della seconda griglia allo scatenarsi dell’ evento SelectedIndexChanging. Il primo caso è un pò più rognoso, e mi ha portato a elaborare una soluzione che ha condotto a questo risultato:

Malauguratamente questa soluzione presenta delle incompatibilità tra browser, il posizionamento del secondo GridView andrebbe adattato di caso in caso, e l’iniezione di codice CSS in linea da codice non è certo il massimo in quanto a separazione tra dati e presentation layer, ma tant’è…

Prima il markup:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”MyGridViewWithGridDetail.ascx.cs”
Inherits=”MyGridViewWithGridDetail” %>
<div id=”GV1Div” runat=”server”>
<div style=”margin:0 0;”>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” DataKeyNames=”IDLibrary”
DataSourceID=”SqlDataSource1″ BackColor=”White” BorderColor=”#DEDFDE” BorderStyle=”Solid”
BorderWidth=”1px” CellPadding=”4″ GridLines=”Vertical” OnSelectedIndexChanging=”GridView1_SelectedIndexChanging”
ForeColor=”Black”>
<FooterStyle BackColor=”#CCCC99″ />
<RowStyle BackColor=”#F7F7DE” Font-Names=”Verdana” Font-Size=”10pt” Height=”25px” />
<Columns>
<asp:TemplateField ShowHeader=”False”>
<ItemTemplate>
<asp:Button ID=”Button1″ runat=”server” CausesValidation=”False” CommandArgument=’<%# Eval(”IDLibrary”) %>’
CommandName=”Select” Text=”+” Font-Size=”10px” />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField=”IDLibrary” HeaderText=”IDLibrary” InsertVisible=”False”
ReadOnly=”True” SortExpression=”IDLibrary” />
<asp:BoundField DataField=”Name” HeaderText=”Name” SortExpression=”Name” />
<asp:BoundField DataField=”Adress” HeaderText=”Adress” SortExpression=”Adress” />
</Columns>
<PagerStyle BackColor=”#F7F7DE” ForeColor=”Black” HorizontalAlign=”Right” />
<SelectedRowStyle BackColor=”#CE5D5A” Font-Bold=”True” ForeColor=”White” />
<HeaderStyle BackColor=”#6B696B” Font-Bold=”True” ForeColor=”White” Font-Names=”Verdana”
Font-Size=”10pt” Height=”25px” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:ConnectionString %>”
SelectCommand=”SELECT * FROM [Library]“></asp:SqlDataSource>
</div>
<div id=”GV2Div” runat=”server”>
<asp:GridView ID=”GridView2″ runat=”server” BackColor=”White” BorderColor=”#DEDFDE”
BorderStyle=”Solid” BorderWidth=”1px” CellPadding=”4″ ForeColor=”Black” GridLines=”Vertical”>
<FooterStyle BackColor=”#CCCC99″ />
<RowStyle BackColor=”#F7F7DE” />
<PagerStyle BackColor=”#F7F7DE” ForeColor=”Black” HorizontalAlign=”Right” />
<SelectedRowStyle BackColor=”#CE5D5A” Font-Bold=”True” ForeColor=”White” />
<HeaderStyle BackColor=”#6B696B” Font-Bold=”True” ForeColor=”White” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView>
</div>
</div>

E infine il codice per il popolamento della GridView e l’iniezione delle regole CSS. Per effettuare il bind dei dati alla seconda GridView ho utilizzato LinqToSql che mi ha permesso di sveltire l’operazione di retrieve dei dati:

protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
DataClassesDataContext db = new DataClassesDataContext();
GridView gv = (GridView)sender;
Button btn = (Button)gv.Rows[e.NewSelectedIndex].Cells[0].FindControl(”button1″);
int bca = int.Parse(btn.CommandArgument);
var clt = from c in db.Books where c.IdLibrary == bca select c;
GridView2.DataSource = clt;
GridView2.DataBind();
GV2Div.Style.Add(HtmlTextWriterStyle.Position, “absolute”);
GV2Div.Style.Add(HtmlTextWriterStyle.BackgroundColor, “White”);
int rowSh = Convert.ToInt32(GridView1.RowStyle.Height.Value);
int rowHh = Convert.ToInt32(GridView1.HeaderStyle.Height.Value);
GV2Div.Style.Add(HtmlTextWriterStyle.Top, String.Format(”{0}px”, (rowSh * e.NewSelectedIndex) + rowHh * 2));
GV2Div.Style.Add(HtmlTextWriterStyle.Left, “75px”);
}