Mellékelt példa megnyitása előtt szükséges egy WebGridColumnTypes03 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Tulajdonságok áttekintése
A TemplateColumn osztály segítségével amellett, hogy tetszőleges adatokat helyezhetünk el az oszlopokban, testre szabhatjuk a fejléc, a lábléc és az adatmező megjelenését függetlenül a DataGrid kontrol egészét érintő formázási beállításoktól. Erre használhatók az osztály HeaderTemplate, FooterTemplate és ItemTemplate property-jei. De nézzük végig a property-ket sorban:
EditItemTemplate
Osztály: TemplateColumn
public virtual ITemplate EditItemTemplate {get; set;}
Megadható az adott cella megjelenése abban az esetben, amikor a cella értéke szerkesztésre kerül. A HTML-kódban az <EditItemTemplate></ EditItemTemplate> tagok között adhatjuk meg a megjelenítés formáját, mely lehet egy egyszerű szöveg, de lehet komplexebb is, akár kontrolok halmaza.
FooterStyle
Osztály: TemplateColumn
public virtual TableItemStyle FooterStyle {get;}
Testre szabhatjuk az adott oszlop lábléc mezőjét. A TableItemStyle típusú elem property-jein keresztül állíthatók a színek, és egyéb megjelenést befolyásoló attribútumok.
FooterTemplate
Osztály: TemplateColumn
public virtual ITemplate FooterTemplate {get; set;}
Megadhatjuk, hogy mit, és hogyan jeleníthetünk meg az adott oszlop lábléc mezőjében. A HTML-kódban a <FooterTemplate></FooterTemplate> tagok között megadhatunk kontrolokat, szövegeket egyaránt.
FooterText
Osztály: TemplateColumn
public virtual string FooterText {get; set;}
Megadható a lábléc mezőben megjelenő szöveg.
HeaderImageUrl
Osztály: TemplateColumn
public virtual string HeaderImageUrl {get; set;}
A property-ben megadhatjuk, hogy milyen képet szeretnénk látni az adott oszlop fejlécmezőjében szöveg helyett. Értékül egy valós URL-t kell megadni.
HeaderStyle
Osztály: TemplateColumn
public virtual TableItemStyle HeaderStyle {get;}
Testre szabhatjuk az adott oszlop fejléc mezőjét. A TableItemStyle típusú elem property-jein keresztül állíthatók a színek, és egyéb megjelenést befolyásoló attribútumok.
HeaderTemplate
Osztály: TemplateColumn
public virtual ITemplate HeaderTemplate {get; set;}
Megadhatjuk, hogy mit, és hogyan jeleníthetünk meg az adott oszlop fejléc mezőjében. A HTML-kódban a <HeaderTemplate></HeaderTemplate> tagok között megadhatunk kontrolokat, szövegeket egyaránt.
HeaderText
Osztály: TemplateColumn
public virtual string HeaderText {get; set;}
A property alkalmas annak a szövegnek a megadására, mely a fejlécmezőben megjelenik. Alapértelmezett értéke az üres karakterlánc (””), vagyis a String.Empty értéke.
ItemStyle
Osztály: TemplateColumn
public virtual TableItemStyle ItemStyle {get;}
Testre szabhatjuk az adott oszlop adatmezőjét. A TableItemStyle típusú elem property-jein keresztül állíthatók a színek, és egyéb megjelenést befolyásoló attribútumok.
ItemTemplate
Osztály: TemplateColumn
public virtual ITemplate ItemTemplate {get; set;}
Megadhatjuk, hogy mit, és hogyan jeleníthetünk meg az adott oszlop adatmezőjében. A HTML-kódban a <ItemTemplate></ItemTemplate> tagok között megadhatunk kontrolokat, szövegeket egyaránt.
SortExpression
Osztály: TemplateColumn
public virtual string SortExpression {get; set;}
Megadhatjuk annak a mezőnek a nevét az adatforrásban, melyet átadunk az OnSortCommand eseménykezelőnek, mint a sorba rendezés alapját képező mezőt. Amennyiben a DataGrid kontrolban engedélyezzük a sorba rendezést (AllowSorting property TRUE értékű), akkor azoknak az oszlopoknak a fejlécében, ahol beállítottuk a SortExpression property-t, egy LinkButton kontrol jelenik meg a HeaderText property-ben megadott szöveggel. A LinkButton kontrolra kattintva SortCommand esemény keletkezik, mely kezelhető, így megadhatjuk a rendezési sorrendet.
Visible
Osztály: TemplateColumn
public bool Visible {get; set;}
Meghatározhatjuk, hogy legyen-e látható az adott oszlop az oldal betöltődése után, vagy sem. Alapértelmezett értéke TRUE.
Alkalmazásbeli felhasználás
A mellékelt alkalmazásban egy egyszerű példát láthatunk arra, hogyan lehet TemplateColumn típusú oszlopban egy cellán belül tetszőleges kontrolt, abban pedig tetszőlegesen kalkulált értéket megjeleníteni.
A DataGrid kontrol forrását képező DataSet objektumba a lap betöltődésekor a products.xml nevű állományból töltjük be az adatokat.
Az adatforrás a Northwind adatbázis Products táblájának egy részét tartalmazza. A ProductID oszlop értékeit helyezzük el a DataGrid kontrol első oszlopában. A tábla másik három oszlopának értékét pedig egy TemplateColumn oszlopban helyezzük el, abban is egy HtmlTable kontrolban. Lássuk, hogy mit is kell tennünk a HTML-kódban annak érdekében, hogy ez megvalósítsuk. Kezdjük a DataGrid létrehozásával:
<asp:DataGrid id="grid" style="..." AutoGenerateColumns="False" SelectedItemStyle-HorizontalAlign="Center">
Az első oszlop deklarációja:
<Columns>
<asp:BoundColumn DataField="ProductID" ItemStyle-Width="100" ItemStyle-HorizontalAlign="Center" HeaderText="Termék azonosítója" ItemStyle-Font-Bold="true" />
Következik a TemplateColumn oszlop létrehozása. Ebben a példában csak az adatmezőkre vonatkozó adatokat adjuk meg (ItemTemplate), a fej-, és lábléccel itt most nem dolgozunk:
<asp:TemplateColumn HeaderText="Összefoglaló adatok" ItemStyle-Width="200" ItemStyle-Font-Size="10" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
A beágyazott kontrol egy három rekordot tartalmazó, két oszlopos HtmlTable kontrol, melyben az adatforrás három oszlopának értéke megjeleníthető. Az első oszlopban szerepelnek a feliratok, a másodikban a konkrét értékek. Első a ProductName mező értéke:
...
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "ProductName")%>
</td>
A UnitPrice mező értéke:
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "UnitPrice")+" Ft" %>
</td>
És a UnitInStock mező értéke:
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "UnitsInStock") %>
</td>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Látható, hogy az oszlopon belül végtelen variációban adhatunk meg értékeket. A beágyazott ASP kód eredményeként pedig igazán rugalmas kódolásra van lehetőségünk. A felhasznált Eval metódusnak csupán meg kell adnunk azt az adatforrást, melyet a DataGrid kontrolunkhoz kapcsoltunk (ezt a Container objektum lekérdezésével kaphatjuk meg), valamint a mező nevét, melynek értékét konkrétan meg szeretnénk kapni.