1.Bölümde HTML tablo tagi içerisinde verileri sunmak için tasarlanmis ASP.NET Web kontrolü olan DataGrid?in temellerini ögrendik. Bölüm 1 bize veritabani içerigini DataGrid?e baglamanin ne kadar basit oldugunu göstermisti: bunun için yapmamiz gereken bir SQL sorgusu çalistirdigimiz bir DataReader objesi olusturmak, bu DataReader?i DataGrid?in DataSource özelligine atamak, ve DataGrid?in DataBind() metodunu çagirmak. Bunlarin hepsinin çalismasi için DataGrid Web kontrolünü HTML içerigine asagidaki gibi yerlestirmeniz yeterli.
| <asp:datagrid runat=”server” /> |
Oldukça basit. Aslina bakarsaniz yaptigimiz DataGrid görüntüsü oldukça kötü gözükmekte, sonuçta elimizde DataReader?dan alinan kolon ve sütünlari barindiran bir HTML tablosundan farkli bir görüntü yok. Peki biz DataReader?dan gelen kolonlari gösterirken neler yapabiliriz ve her bir kolonun formatini nasil degistirebiliriz ? Bununla beraber bütün arkaplan rengi,font,vb.. gibi tüm tabloyu ilgilendiren biçim ayarlamalari yapmamiz mümkün mü ? Son olarak her bir kolon için farkli renk ve fontlarda özel basliklar atayabilmekte hos olurdu herhalde. Bu bölümde bu görevleri nasil yapacagimizi ögrenecegiz.
DataGrid Biçim Ayarlarini Belirlemek
DataGrid?in biçim ayarlarini degistirmemizin iki yöntemi bulunmakta. Birincisi bunu server-side sicript bloku içinde programlayarak ayarlamak. Mesela, DataGrid?in arkaplan rengini kirmizi yapmak için yazmamiz gereken kod:
| <%@ Import Namespace=”System.Drawing” %>
<script runat=”server”> sub Page_Load(sender as Object, e as EventArgs) … DataGridID.BackColor = Color.Red … end sub </script> |
Diger yolu ise DataGrid Web kontrol tagi içerisinde görüntü özelliklerini belirlemek. Mesela, asagidaki kod yukaridaki ile ayni etkiyi yaratacaktir.
| <asp:datagrid runat=”server” BackColor=”Red” /> |
Sahsen ikinci yolu tercih ediyorum. Özellikleri Web kontrolü taginin içinde belirlemeyi, server-side kod alternatifinden daha temiz buluyorum(server-side tarafinda görüntü özelligini ?Color.Red? olarak atamak için System.Drawing namespace?ni dökümanimiza eklememiz gerekiyor; Web kontrol taginin görüntü özelliklerinde ise sadece BackColor=?Red? yazmamiz yeterli oluyor.) Hadi hep birlikte DataGridimize uygulayabilecegimiz bazi kullanisli biçimlendirme ayarlarina bakalim.En kullanisli oldugunu düsündügüm bazilari :
? BackColor – background rengini belirler.
? Font ? DataGrid?in font bilgilerini belirlemek için kullanilir. Font bilgileri font family,size,bold,italic gibi bilgileri belirlemek için kullanilir.
? CellPadding ? HTML tablosunun cellpadding özelligini belirler.
? CellSpacing ? HTML tablosunun cellspacing özelligini belirler.
? Width ? HTML tablosunun genisligini belirler(pixel,yüzde)
? HorizontalAlign ? Tablonun nereye yaslanacagini belirler(Left, Right, Center, NotSet)
Daha güzel bir görüntü olusturmak için görüntü seçeneklerinin kullanildigi bir DataGrid örnegi. Dikkat etmeniz gereken DataGrid?in Font özelligi, FontInfo Class?ini kullanmakta ve bunun Size, Name, Bold, Italic, gibi özellikleri bulunmakta. Bu özellikleri belirlemek için (-) isaretini kullaniriz.
| <asp:DataGrid runat=”server” id=”dgAuthors”
BackColor=”#eeeeee” Width=”85%” HorizontalAlign=”Center” Font-Bold=”True” Font-Name=”Verdana” Font-Size=”10pt” /> |
Biraz daha etkileyici oldu mu? DataGridimize bir kaç satir ekleyerek kullanici arabirimimizi oludukça gelistirdik.Basit bir HTML tablosundan, arkaplan rengi gri olan ve güzel görünüslü fontlara sahip bir tablo elde ettik.
Stiller ile Süslenmek
DataGrid Web kontrolü görünümünü özellestiren bir grup kullanisli ?style? ler barindirmakta. Bu sitiller BackColor, ForeColor, HorizontalAlign ve Width gibi bir grup sitilistik özellikler içemekte . DataGrid için dört stil mevcuttur:
? HeaderStyle ? Baslik için stil bilgisini barindirir.(kolonlarin isimlerinin listelendigi tablonun en üst satiri; DataGrid?in ShowHeader özelligini true olarak ayarlamalisiniz(varsayilan).)
? FooterStyle ? Dipnot için stil bilgisini barindirir.(tablonun en son satiri;DataGrid’in ShowFooter özelligini true olarak ayarlamalisiniz (varsayilan degeri false).)
? ItemStyle ? Tablodaki her bir satir için stil bilgisini içerir.
? AlternatingItemStyle ? Tablodaki farkli satirlar için gerekli olan stil bilgilsini içerir.
ItemStyle ve AlternatingItemStyle özelliklerini DataGrid?in kolay okunmasi için farkli degerlerde ayarlamalisiniz. (örnek için asagidaki demoyu inceleyiniz). Diger DataGrid biçimlendirme özellikleri gibi stilleride hem programlayarak hemde DataGrid Web kontrol taglarini kullanarak ayarlayabilirsiniz. Daha önceden söyledigim gibi ben Web kontrol tagini terçih ediyorum. Web kontrolü tagi kullanarak özellikleri ayarlamanin iki farkli sentaksi mevcut. Birincisi daha önceki özelikleri belirleme yöntemi ile benzer, nesneleri nokta kullanarak yazmak (mesela, HeaderStyle?in BackColor özelligini ayarlamak için: HeaderStyle.BackColor=?Red?) Diger bir yöntem ise Web kontrolleri tagi içerisinde özel stil bloklari kullanmak, mesela:
| <asp:DataGrid runat=”server”>
<HeaderStyle BackColor=”Red” /> </asp:DataGrid> |
Her iki yöntemde iyi. Ben gömülmüs taglari daha okunakli buluyorum, özellikle birçok özellik için bir çok stil ayarlamayi planliyorsaniz.
| <asp:DataGrid runat=”server” id=”dgFAQs”
BackColor=”#eeeeee” Width=”85%” HorizontalAlign=”Center” Font-Name=”Verdana” Font-Size=”10pt”> <HeaderStyle BackColor=”Black” ForeColor=”White” Font-Bold=”True” HorizontalAlign=”Center” /> <AlternatingItemStyle BackColor=”White” /> </asp:datagrid> |
Artik DataGrid kontrolüne nasil stilistik özellikler ekliyecegimizi ve global görüntü özelliklerini ayarlamayi ögrenmis olduk.
Hangi Kolonun Gözükecegini Belirleyin
DataGrid olusturuldugunda SQL sorgusundan dönen bütün kolonlari HTML tablsosunda bir kolon olarak olusturur. Fakat özel durumlarda, DataGrid?inizde bu kolonlarin sadece bir grubunun gözükmesini isteyebilirsiniz. Mesela örneklerde gördügünüz DataGrid içinde Pubs veritabanindan gelen au_id sütununu görmek istemiyorum. Eger DataGrid içinde veritabani sorgusundan gelen bütün kolonlari göstermek istemiyorsak, göstermek istedigimiz kolonlari belirtmelisiniz. Bunun için ilk atmamiz gereken adim DataGrid?in AutoGenrateColumns özelligini ?False? olarak ayarlamak. Bir kere bunu yaptiktan sonra, göstermek istediginiz kolonlari BoundColumn kullanarak belirtmelisiniz. Asagidaki gibi:
| <asp:DataGrid runat=”server” AutoGenerateColumns=”False”>
<Columns> <asp:BoundColumn DataField=”DatabaseColumnName1″ … /> <asp:BoundColumn DataField=”DatabaseColumnName2″ … /> … <asp:BoundColumn DataField=”DatabaseColumnNameN” … /> </Columns> </asp:datagrid> |
Veritabanindaki kolonlardan göstermek istediginiz her bir kolon için <asp:BoundColumn ?./> tagini,DataField özelligi ile belirtmelisiniz. Bütün bu BoundColums taglari Columns taglari içinde bulunmali ( boundcolums özelligini programlayarak göstermekte mümkün, fakat bu gerçekten çok çirkin gözükmekte ve tonlarca kod yazmaniz gerekmekte ). Dikkat etmeniz gereken DataGrid?te BoundColumn taglari ile belirtiginiz kolonlar sizin belirlediginiz sirayla gözükür. BoundColumn kontrolünün güzel yönü ise, bu kontrolün bazi biçim özelliklerini barindirmasi, mesela:
? HeaderText- kolonlarin basliginda gözükecek yaziyi belirler.
? FooterText- kolonlarin footer kisminda gözükecek yaziyi belirler.(DataGridinizde footer kisminin gözükmesi için ShowFooter özelligini True olarak ayarlamayi unutmayin) ? HeaderStyle/FooterStyle/ItemStyle- DataGrid stilinin barindirdigi bütün özellikleri içerir. Kolonlari ortalamak, ön ve arka plan rengini ayarlamak gibi birçok kullanisli özelligi vardir.
? DataFormatString-Biçimlendirme bilgilerini belirler (tüm biçim özellikleri için dökümanlari inceleyiniz.)
Simdi BoundColumn taglarini nasil kullanacagimiza bir göz atalim. Daha öncedende söyledigim gibi, au_id veya city kolonlarini göstermek istemiyoruz, ayrica zip kolonunda biçimlendirme yapmak istiyoruz. Üstelik sayisal deger içeren kolonlarin degerlerini ortalamak istiyoruz. Bütün bunlari basarmak için sadece okunmasi-kolay ve anlamasi-kolay bicim belirten kod yazmamiz yeterli:
| <asp:datagrid id=”dgAuthors” runat=”server”
BackColor=”#eeeeee” Width=”85%” HorizontalAlign=”Center” Font-Name=”Verdana” CellPadding=”4″ Font-Size=”10pt” AutoGenerateColumns=”False”> <HeaderStyle BackColor=”Black” ForeColor=”White” Font-Bold=”True” HorizontalAlign=”Center” /> <AlternatingItemStyle BackColor=”White” /> <Columns> <asp:BoundColumn DataField=”au_fname” HeaderText=”Isim” /> <asp:BoundColumn DataField=”au_lname” HeaderText=”Soyad” /> <asp:BoundColumn DataField=”address” HeaderText=”Adres” /> <asp:BoundColumn DataField=”zip” DataFormatString=”{0:#,###}” HeaderText=”Posta Kodu” ItemStyle-HorizontalAlign=”Center” /> <asp:BoundColumn DataField=”city” HeaderText=”Sehir” /> <asp:BoundColumn DataField=”contract” HeaderText=”Contract” /> <asp:BoundColumn DataField=”phone” HeaderText=”Telefon” /> </Columns> </asp:datagrid> |
Gördügünüz gibi , yukaridaki kod sizin belirlediginiz kolonlari sizin istediginiz sekilde biçimlendirir. Dikkat etmeniz gereken DataFormatString özelligi oldukça farkli gözükmekte. Herzaman {0:format string} sekilde gözükmesi gerekmekte. {0:…} ifadesinin birinci elemani biçimini belirlemek için (DataReader?dan geri dönen kolonun degerini) ?. Ise format stringini belirtirsiniz. Örnegimizde format string?i olarak #,### kullanarak her 3 basamaktan sonra virgul yerlestirdik. Format stringleri ile ilgili daha çok bilgi için dökümanlari inceleyiniz.