DataGrid Web Kontrolu 5

Last updated on 02 Haziran 2009

2. bölümde DataGrid'in BoundColumn kontrolü kullanimi ile nasil özellestirildigini görmüstük. Bunu yapabilmek için DataGrid'in AutoGenerateColumns özelligini False olarak ayarladik, böylece DataGrid içinde veritabaninin hangi kolonunun gözükecegini , kolon basliklarini, biçim ve stil özelliklerinin hepsini BoundColumn kontrolü içerisinde belirledik. Bu islem bizelere veriyi çok özel sekillerde sunabilme imkanini sagliyor. Sinirimiz ise DataGrid'in çiktisi olan HTML <TD> tagi.

Peki ya daha fazla esneklik isterseniz ? DataGrid kontrolü ile, ASP.NET'in içerdigi DataList ve Repeater Web Kontrolleri sayesinde baslik templateleri ve footer templerini kullanarak özel HTML çiktilari alabiliriz. Aslinda templateler size header ve footer içerisindeki her bir eleman için bir HTML belirlememizi saglar. DataGrid bu yetenegini her bir kolon için destekler. Bunu, DataGrid'in HTML çiktisinda BoundColumns'dan daha hos gözüken, <columns> tagi içerisinde TemplatesColumns'un yerini belirterek yapariz. Bu bölümde TemplateColumn'larin özelliklerini ve bunlari nasil kullanacagimizi ögrenecegiz.

TemplateColumn Kullanimi

DataGrid içerisinde TemplateColumns'u her bir kolon için belirleyebilirsiniz. BoundColumns gibi TemplateColumns'u kullanmak için DataGrid'in AutoGenerateColumns özelligini False yapmalisiniz. Daha sonra TemplateColumn kontrolünü <Columns> tagi içerisinde göstermek istediginiz herbir kolon için yerlestirmelisiniz. Dikkat etmeniz gereken <Columns> tagi içerisinde ayni zamanda BoundColumns kontrolünüde barindirabilirsiniz. Böylece asagidaki örnekteki gibi DatGrid BoundColumn ve TemplateColums ‘dan olusur:

<asp:datagrid id="dgAuthors" runat="server" AutoGenerateColumns="False" > <Columns> <asp:BoundColumn DataField="au_id" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" /> <asp:TemplateColumn HeaderText="Adres bilgisi"> … </asp:TemplateColumn> </Columns> </asp:datagrid>

Yukaridaki DataGrid her bir satir için 2 kolon içerir: birincisi BoundColumn (au_id) ve digeri içerigini belirledigimiz TemplateColumns. Ayrica birden çok TemplateColumns kullanabilirsiniz. Herbir templatecolumn DataGrid içerisinde herbir satir için bir kolon olusturur.

TemplatColumn kontrolünün HTML çiktisini içerisindeki taglar ile belirleriz.

Peki, TemplateColumn için HTML içerigini nasil belirleyecegiz ? TemplateColumn kontrolü içerisinde HTML içeriginin kolon basligini belirtmek için HeaderText ve kolonun gözüküp gözükmeyeceginin belirtlemek için Visible özelligi gibi bazi bazi UI-related özellikler barindirir. Ilginç olani bu taglar TemplateColums kontrolünün içinde gözükür. Buna benzer 4 tag vardir:

ItemTemplate – TemplateColumn'un sundugu herbir satir'in özeliklerini belirten template. HeaderTemplate – Kolon basliklari özellikleri belirleyen template. FooterTemplate – Kolon footer özelliklerini belirleyen template. EditItemTemplate – Edit edilmek için seçilen belli bir satirin özelliklerini belirleyen template. Bu özellik DataGrid'in Edit/Update/Delete özelligi kullanilirsa gözükür.

Bu template'ler data-bound degeri gibi bazi HTML templateleri içerir. Mesela TemplateColumn veritabanindaki bir kolonu kalin yazili olarak çikartir. DataGrid'in DataSource dinamik veri çiktisi alabilmek için:

<%# DataBinder.Eval(DataItem.Container, " ColumnName ") %>

Bu “databinding” denilen komuttur. Esasen söyledigi sey, “ DataItem içerisinde ColumnName'i bul (DataItem DataGrin'in içerisindeki gecerli satirdir) ve her bir döngüde DataGrid'in bir satirini göster. Bu nedenle, DataGrid'in TemplateColumn kontrolü ItemTemplate içeren bir satir kod barindirir:

<asp:TemplateColumn HeaderText="Adres bilgisi"> <ItemTemplate> <b> <%# DataBinder.Eval(DataItem.Container, " ColumnName ") %> </b> </ItemTemplate> </asp:TemplateColumn>

TemplateColumn'un BoundColumn'a göre yararlari

Bu noktada TemplateColumn'un size verdigi UI(kullanici arabirimi) özgürlügünü tam olarak anlayamamis olabilirsiniz. Aslinda verdigimiz küçük örnek BoundColumn ile de kolayca gelistirilebilinirdi. Peki ya iki veritabani kolonunu tek bir DataGrid kolonu içerisinde göstermek isterseniz ? bunu BoundColumn yapamazsiniz, Templatecolumn'da ise bu görev bu oldukça basit.

Hadi biraz daha karisik bir örnege bakalim. Bütün örneklerde oldugu gibi bu örnegimizde de SQL Server 2000 ile gelen Pubs veritabanini kullanacagiz. Bundan önceki örneklerde BoundColumns tagini kullanmistik, buda DataGrid içindeki herbir kolonda veritabanindaki tek bir degeri gösterebilmekteydi. Sadece iki kolonu olan bir DataGrid'imizin oldugunu hayal edin. Birinci kolon authors id'yi(au_id) ikincisi ise her bir id'nin adresini, telefon numarasini ismini,soyadini HTML tablosunun içinde barindirmasini istiyoruz. Asagidaki örnekte TemplateColumn kullanarak bunu yapmanin ne kadar kolay oldugunu görebilirsiniz:

<asp:datagrid id="dgAuthors" runat="server" AutoGenerateColumns="False" HeaderStyle-HorizontalAlign="Center" HeaderStyle-BackColor="Red" HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="True" HeaderStyle-Font-Name="Verdana" AlternatingItemStyle-BackColor="#dddddd" ItemStyle-Font-Name="Verdana"> <Columns> <asp:BoundColumn DataField="au_id" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" HeaderText="Author ID" /> <asp:TemplateColumn HeaderText="Yazar Bilgisi"> <ItemTemplate> <table border="0"> <tr> <td align="right"><b>Adres:</b></td> <td><%# DataBinder.Eval(Container.DataItem, "address") %></td> </tr> <tr> <td align="right"><b>Sehir:</b></td> <td><%# DataBinder.Eval(Container.DataItem, "city") %></td> </tr> <tr> <td align="right"><b>Posta Kodu:</b></td> <td><%# DataBinder.Eval(Container.DataItem, "zip", "{0:#,###}") %></td> </tr> </table> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid>

Burada dikkat etmemiz son data-bound ifadesi DatBinder.Eval farkli bir kullanim sekli – içinde kolonun görünüm formatini degistirecek üçüncü bir parametre bulundurmakta. Buradaki format sartimiz #,### her üç basamakta bir virgül koyulmasi gerektigini göstermektedir.