Yazar: fatihdurgut

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.

Serinin 3. bölümünü hatirlarsaniz bir butona tiklama gibi bazi olaylari incelemistik. Mesela örnegimizde kullanici DataGrid’teki satirlardaki “Detay” butonuna tikladiginda o satirla ilgili ayrintili bilgiyi göstermistik.

Bu bölümde DataGrid içerisinde butonlari kullanarak son kullanicinin DataGrid’in içerigini siralamayi nasil yapabilecegini görecegiz.

DataGrid’i Siralama için Hazirlama

DataGrid’e siralama özelliginin katmanin nekadar basit oldugunu ögrendiginizde çok mutlu olacaksiniz. Bu özelligi 3 basamakta ögrenecegiz:

1. DataGrid’in AllowSorting özelligini True olarak ayarlayin. Eger DataGrid’in AutoGenerateColumns özelligi False olarak ayarlanmis ise, kullanicinin siralayabilecegi satirin BoundColumn kontrolünün SortExpression özelligini belirtmeniz gerekmektedir.

2. DataGrid’i siralanmis veri ile yeniden olusturacak bir event handler olusturun, ve DataGrid’in OnSortCommand olayinda bu siralama event handler ismini belirtin.

3. Veri kaynaginizda bulunan siralanmis formattaki veriyi yakalayacak bir fonksiyon olusturun.

Simdi bu adimlarin hepsine birden bakalim. Ilk adim, DataGrid’in AllowSorting özelligini asagidaki gibi belirleyelim:

<asp:DataGrid runat="server" id="dgAuthors" AllowSorting="True" … > … < /asp:DataGrid>

Eger AutoGenerateColumns özelligini True (varsayilan) olarak ayarladiysaniz 1. adimin tamamlamis oldunuz. (Hatirlatma; eger DataGrid’inizin AutoGenerateColumns özelligini True olarak ayarladiysaniz DataGrid’in kolonlari veri kaynagindan gelen kolonlar tarafindan belirlenir. Eger AutoGenerateColumns özelligini False olarak ayarladiysaniz, DataGrid içinde hangi kolonlarin gözükecegini BoundColumns özelligi ile belirtmeniz gerekmektedir. Bu konu için 2. bölüme bakiniz.) Eger herseye ragmen AutoGenerateColumns özelligini False olarak ayarladiysaniz, kullanicilara hangi kolon veya kolonlar için siralama izni vereceginizi belirlemeniz gerekir. Siralama izini vereceginiz bütün kolonlar için BoundColumn kontrolünün SortExpression özelligini eklemeniz gerekir. Dikkat etmeniz gereken SortExpression özelligine veritabaninizdaki kolon ismini atamaniz gerekir :

< asp:DataGrid runat="server" id="dgAuthors" AutoGenerateColumns="False" AllowSorting="True"> <Columns> <asp:BoundColumn DataField="dbField" /> <asp:BoundColumn DataField="dbField2" SortExpression="dbField2" /> </Columns> < /asp:datagrid>

Yukaridaki örnekte DataGrid iki kolon içerir. Birinci kolon veritabanindaki dbField kolonunu digeri ise dbField2 kolonunu barindirir. Kolonlardan ikincisi siralanabilirken birincisi bunu yapamaz.

Siralama Event Handler’i olusturmak

AllowSorting özelligini true olarak ayarladigimiz DataGrid olusturulurken her bir kolonun baslik kisminda link eklenir. Bu linke tiklandigi zaman bir postback meydana gelir ve siralama olayi harekete geçer. Bu olay harekete geçtiginde gerekli veriyi saklayan, veriyi belirlenen sirayla DataGrid’e geri gönderen bir event handler’i atesleriz. Bu olayi gerçeklestirmek için iki seye ihtiyacimiz var: bir siralama event handler’i olusturmak ve bunu DataGrid’in siralama olayina baglamak.

Ilk olarak, event handler’i olusturdugunuz zaman asagidaki tanimlamayi kullanin:

Sub SortEventHandler(sender as Object, e as DataGridSortCommandEventArgs) … End Sub

(Tabiki sender ve e degiskenlerini istediginiz gibi isimlendirebilirsiniz –önemli olan kismi eventhandler’in iki degiskeni kabul edecegi: bir Object ve bir DataGridSortCommandEventArgs.)

Event handler’in içinde siralayacaginiz kolonun ismini e.SortExpression degiskeni ile alacaksiniz. Eger SortExpression özelligini BoundColumn özelliginde belirttiyseniz, e.SortExpression’un degeri SortExpression özelliginin degeridir. Eger SortExpression özelligini belirtmemisseniz (çünkü AutoGenerateColumns özelligini True olarak ayarlamissinizdir), e.SortExpression degeri kolon tiklandiginda gelen veritabani kolonu ismidir.

Birkere siralama event handler’i olusturdugunuzda bunu DataGrid’in siralama olayina baglamaniz gerekir, böylelikle ne zaman bu olay harekete geçerse buna bagli event handlerda ateslenir. Bunu yapabilmek için DataGrid’in OnSortCommand event handler’ina olusturdugunuz siralama event handler’inin ismini atamaniz gerekir:

< asp:DataGrid runat="server" id="id" AllowSorting="True" OnSortCommand="NameOfSortEventHandler"> … < /asp:DataGrid>

Bu noktada bir kaç küçük örnek size yardimci olabilir. Ben bunlardan iki tanesini olusturdum, bir tanesi AutoGenerateColumns özelligi True olarak ayarlanmis olanini kullaniyor, digeri ise AutoGenerateColumns özelligi False olarak ayarlanmis olani kullaniyor. Her iki örnekte de AllowSorting özelligi True olarak ayarlanmis ve sadece bir label Web kontrolünün Text özelliginin degerini e.SortExpression’nin degerini atamaktan baska hiçbir sey yapmayan basit bir siralama event handler’ina sahip.

DataGrid’in bir server-side form içerisinde olduguna dikkat edin (<form runat="server"> … </form>)- bu postback yapilmasi için gerekli.

Geriye sadece, veriyi belirli bir siralanmis düzende geri alacak bir fonksiyon olusturmak kaliyor. Sadece yapmamiz gereken bu fonksiyonu çagirmak, SortExpression degiskenini bu fonksiyona göndermek ve sonucunu DataGrid’in DataSource’ na atayarak DataGrid’i yeniden yapilandirmak. Simdi bunlari yapalim.

Veriyi istenilen siralamada alan bir fonksiyon olusturalim

Gerçekte yapmaya çalistigimiz sey, siralama kosulunu gönderdigimiz zaman, geriye siralanmis düzende veri getiren ve bu veriyi direk olarak DataGrid içine aktaran veya DataReader nesnesini kullanarak DataGrid’in içine atan bazi fonksiyonlar olusturmak.
Bir dakikaligina BindData ile çagirabildiginiz ve siralama kosulunuda degisken olarak alan böyle bir fonksiyonumuzun oldugunu düsünün. Bu fonksiyon veriyi istediginiz sirada geri çeviriyor ve bunu DataGrid’in içine yerlestiriyor. Siralama kosulunu alan ve bu islemleri yapan fonksiyonu tek bir satirda asagidaki gibi oldugunu düsünün:

Sub SortData(sender as Object, e as DataGridSortCommandEventArgs) BindData(e.SortExpression) End Sub

Simdi tek sorunumuz böyle bir fonksiyonu olusturmak! Bu fonksiyonun ana kismi kullandiginiz veri kaynagina ve bunu nasil siralayicaginiza dayanir. Burada yapmamiz gereken SQL komutunu kullanmak ayni asagidaki gibi :

Sub BindData(sortExpr as String) Dim dr As SQLDataReader Dim conn As SqlConnection Dim cmdAuthors As SqlCommand 'Pubs veritabanina bir baglanti kuruyoruz conn = New SqlConnection("server=localhost;uid=sa;pwd=password;database=pubs") conn.Open() 'Authors tablosundaki verileri içeren bir datareader olusturuyoruz’ cmdAuthors = New SqlCommand("SELECT au_lname, au_fname, phone, address, city, state, zip, contract FROM authors ORDER BY " & sortExpr,conn) dr = cmdAuthors.ExecuteReader 'bind the first datagrid to dataset' dgAuthors.DataSource = dr dgAuthors.DataBind() conn.Close() End Sub

Dikkat ettiyseniz sortExp degiskenlerini SQL sorgusuna dinamik olarak ORDER BY ekinden sonra ekliyorum ve bunun siralamasinida yine gelen degisken ile belirliyecegiz. Mesela: au_id DESC gibi:

< asp:DataGrid runat="server" id="dgAuthors" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" CellPadding="4" Font-Size="10pt" AutoGenerateColumns="False" AllowSorting="True" OnSortCommand="SortResults"> <HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" /> <AlternatingItemStyle BackColor="White" /> <Columns> <asp:BoundColumn DataField="au_fname" HeaderText="Isim" SortExpression="au_fname DESC"/> <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" SortExpression="city DESC"/> <asp:BoundColumn DataField="contract" HeaderText="Contract" /> <asp:BoundColumn DataField="phone" HeaderText="Telefon" /> </Columns> < /asp:datagrid>

Son olarak, DataGrid üzerindeki verileri sayfa ilk yüklendiginde varsayilan degerler üzerine siralanmasini istiyoruz. Ben bu siralamayi au_id azalan sekilde seçtim. Bunun için Page_Load event handler’inda BindData(“au_id DESC”)’i çagirmaliyiz, fakat bunu sadece ilk sayfa yüklendiginde yapmaliyiz.

1. Bölüm de ASP.NET Web kontrolü olan ve HTML tablo tagi içerisinde verileri göstermek için tasarlanmis DataGrid?in temellerini ögrendik, ASP.NET sayfasi içerisinde veritabani içerigi göstermenin ne kadar kolay oldugu anladik. 2. Bölüm de ise DataGrid?in görünüsünü nasil özellestirebilecegimizi, küçük bir programlama kodu ile veritabanindaki bilgileri nasil dikkat çekici bir hale getirdigimizi gördük.

Veriyi sunmak hos ve tamam, peki birde DataGrid ile biraz daha farkli olaylari yapabilseydik gerçekten kullanisli olmazmiydi. Mesela, bir e-Ticaret firmasi için çalistiginizi ve herbir siparis için verileri DataGrid ile gösterdiginizi düsünün. Herbir siparisin, siparis verilen ürün, siparis verilen tarih, alicinin bilgileri(name,address, vs), alicinin seçtigi nakliye ayarlari vs. Gibi bir çok iliskisel verileri bulunmakta. Bütün bu bilgileri bir DataGrid?te (herbir siparis için) sunmak bilginin tasmasina sebep olabilir.

2. Bölümde gördügümüz gibi, DataGrid?in AutoGenerateColums özelligini False olarak ayarlayip daha sonradan Columns özelligini görüntülemek istedigimiz siparis bilgisine göre belirleyebiliriz.

Bu sekide veriyi kolayca parçalamis oluyoruz, peki ya kullanici her bir siparisin detaylarini görme özelligini isterse ? Yapmamiz gereken DataGrid?in herbir satirinda üzerine tiklandiginda siparisin bütün bilgilerini göstericek ?Detay? butonu yerlestirmek.

Örneklerimizi gelistirelim ve Pubs tablomuza herbir satira üzerine tikladigimizda detaylarini getirecegi bir ?detay? butonu yerlestirelim.

Temelin üzerine insaa etmek

2. Bölümde gördügümüz gibi, DataGrid kontrolü Column tagi içerisinde bir çok BoundColumn tagi içermekte. DataGrid içerisinde bulunan BoundColumn taglarindan herbiri sayfamizda bir kolon olarak gözükür. DataGrid?e bir buton yerlestirmek için ButtonColumn tagini BoundColumn taglarini kullandigimiz sekilde kullaniriz. Asagidaki kod DataGrid?e nasil buton yerlestirdiginizi göstermektedir.

< form runat=”server”>     <asp:DataGrid runat=”server” id=”dgAuthors”         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:ButtonColumn Text=”Details” HeaderText=”Detay” />        <asp:BoundColumn DataField=”au_id” Visible=”False” />        <asp:BoundColumn DataField=”address” HeaderText=”Adres” />     </Columns>     </asp:datagrid> < /form>

Dikkat ederseniz bu isi yapabilmemiz için DataGrid?i bir server-side formun içine(<form runat=?server?>) yerlestirmemiz gerekli. Bunun sebebi butonun tiklanmasi durumda ilgili olayin gerçeklesip gerçeklesmedigini takip ederek, ASP.NET sayfalarinin DataGrid içindeki butonlari ve sayfayi yeniden olusturmak istegi. Bunun için ASP.NET sayfalarinin ViewState özelligine ihtiyaci var.

Dikkat etiyseniz örnekte olusturdugumuz buton, yazidan olusan bir link butonu. Bu ButtonColumn class?i tarafindan üretilen ve varsayilan görüntüdür. Eger standart bir buton göstermek isterseniz: ButtonColumn tagi içerisinde, özelligi ButtonType=?PushButton? olarak ayarlamalisiniz. ButtonColumn class?i birkaç önemli özellik barindirir. Görüntü ile ilgili olan iki tanesini yukaridaki örnegimizde kullandik. HeaderText DataGrid?te butonun gözükeçegi kolonun baslik yazisini belirler. Text her bir butonun yazisini belirler.

BoundColumn tag?i ile, ButtonColumn tag?i içerisindeki butonlarin yazisini DataGrid?in DataSource?dan gelen degerler olarak atayabilirsiniz- bunun için ButtonColumn içerisindeki Text özelligini atlayip, veritabanindaki degerlerini göstermek istediginiz kolonlarin degerini DataTextField özelligine atamalisiniz.

Button tiklandiginda birseyler gerçeklestirelim

Su anda DataGrid?imizde bir butonumuz var, simdi ise bu butona tiklandiginda bazi olaylarin gerçeklesmesi için server-side kodumuzu yazalim. DataGrid?te ButtonColumn butonuna tiklandiginda ItemCommand olayinin ateslenmektedir, bu nedenle server-side event-handler?imizi bu olaya yazmaliyiz. Bu event handler su sekilde olmali:

Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs) … End Sub

Bir kere bu fonksiyonu server-side script blogunda(veya code-behind sayfamizda) tanimlarsaniz DataGrid tag?i içerisinde OnItemCommand özelligini ekleyerek bu event handler?a ulasabilirsiniz.Mesela:

< asp:datagrid runat=”server”     …     OnItemCommand=”eventHandlerName”>    … < /asp:datagrid>

Asagidaki kod DataGrid içindeki butonlara tiklandiginda bir event handler?in nasil çalistiginiz gösteriyor:

< script language=”vb” runat=”server”> Sub Page_Load(sender as Object, e as EventArgs)     If Not Page.IsPostBack then      BindData()’Sayfa sadece ilk defa yüklendiginde veri yüklenecek    End If End Sub Sub BindData()     ‘Make a connection to the database     ‘Databind the DataReader results to the DataGrid. End Sub Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)      Response.Write(“You clicked one of the details buttons!”) End Sub < /script> <form runat=”server”>     <asp:DataGrid runat=”server” … >      …     </asp:datagrid> < /form>

Burada dikkat etmeniz gereken önemli bir nokta: DataGrid?e veriyi sadece sayfa ilk defa yüklendiginde sorgu çalistirip yüklüyoruz. Page_Load event handler?i sayfa her yüklendiginde çalisir, bizim safyamizin geri gönderildigini kontrol etmemiz gerekir. Eger gönderilmemisse bu sayfaya ilk ziyarettir. Bu durumda DataReader olusturarak veritabanindaki verileri alir, ve DataGrid?in DataSource özelligini ayarlar daha sonrasinda ise DataBind() metodunu çagiririz.

Ne zaman biri ?Detay? butonuna tiklarsa ASP.NET Web sayfasi geri gönderilecek. Tekrar Page_Load event handler?imiz ateslenicek, fakat bu sefer sayfamiz geri gönderildigi için BindData() kismi çalistirilmaz. Bu sefer detailsClicked event handler?i çalistirilir. Dikkat etmeniz gereken eger DataGrid?e verileri tekrar yüklersek(bunu If Not Page.IsPostBack kontrolü ile engelliyoruz) verilerin tekrar yüklenmesi ItemCommand event?ini etki disi birakacagindan detailsClicked event handler?i çalismaz.

Bu örnegimiz bize ButtonColums tagi içerisinde bulunan buton tiklamasi ile iliskili event handler?in nasil çalistigini gösterdi.

Hangi Satirin Buttonu Tiklandi

Button click için olan event handler?ini hatirlayalim:

Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs) … End Sub

DataGridCommandEventArgs class?i bir olayi ateslenmesine sebep olan ve nesnenin kaynagini içeren bir Item özelligi barindirir.

Bu nesne, DataGrid içerisinde tiklanan satira karsilik gelen TableRow class?inin bir örnegidir. TableRow class?ina cells özelligini kullanarak ulasabilir ve hücre degerini atamak istediginiz kolonu belirleyebilirsiniz. Bunun, Column kolleksiyonu asagidaki gibi tanimlanan bir DataGrid oldugunu hayal edin:

<asp:DataGrid runat=”server” … >    <Columns>     <asp:ButtonColumn Text=”Details” HeaderText=”Detay” CommandName=”details” />     <asp:BoundColumn DataField=”au_id” HeaderText=”Auther ID” />     <asp:BoundColumn DataField=”address” HeaderText=”Adres” />    </Columns> < /asp:datagrid>

Sonra, button click event handler?i içerisinde tiklanan satirin kolonunu belirtiriz:

Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)    Dim buttonColumn as TableCell = e.Item.Cells(0)    Dim AUIDColumn as TableCell = e.Item.Cells(1)    Dim AddrColumn as TableCell = e.Item.Cells(2)      Dim buttonColText as String = buttonColumn.Text    Dim AUIDColText as String = AUIDColumn.Text    Dim AddrColText as String = AddrColumn.Text End Sub

Örnegi iyice kontrol ettiginizden emin olun. Burada dikkat ediceginiz ilk sey button kolonunun bir yazi içermemesi. Bunun sebebi HTML?in görüntüyü button olarak göstermesi, ve bu nedenle TableCell?in Text özelligi bos deger gönderir.

Yazimizin basinda siparis bilgilerinin bir bölümünü gösteren,fakat herhangi birinin bir siparis hareketinin tüm detaylarini görebilme özelligi olan bir e-Commerce firmasi senaryosunu ele almistik. Örnegimiz bu senaryodan oldukça uzak, biz bunun sadece SQL sorgusundan gelen bir grubunu gösterdik. Bizim sadece yazarin adress kismini gösterdigimizi ve detay butonuna tikladiginizda kullanicinin bu kayitla ilgili diger bilgileri görmek istedigini hayal edin.

Hatirlarsaniz au_id kolonunu DataGridimiz içinde göstermek istemiyorduk, ve hala bizim detailsClicked event handler?inin bu veriye ihtiyaci var, çünkü veritabanimizda bu alan herbir satiri tanitan primary key. Bu bilgiyi DataGrid tagi içerisinde birkaç küçük degisiklik yaparak aktarabiliriz: BoundColumn tagi ile veritabanindan bu kolonu aliyoruz ve Visible=?False? özelligi ekliyoruz. Bu sekilde kolonu gizliyoruz fakat hala detailsClicked event handlerina e.Item.Cells(1).Text ile istenilen Id?yi gönderebiliyoruz.

Bu yüzden yapmamiz gereken butona tiklandiginda id bilgisini yakalayan ve ayrintili bilgi görmek isteyen kullaniciya ayrintilari gösteren detailsClicked event handler?i üzerinde yeniden çalismamiz gerekiyor. Simdi sayfamiz su sekilde gözükmeli:

<script language=”vb” runat=”server”>   Sub Page_Load(sender as Object, e as EventArgs)    If Not Page.IsPostBack then     BindData() ‘Only bind the data on the first page load    End If   End Sub   Sub BindData()    ‘Make a connection to the database    ‘Databind the DataReader results to the dgAuthors DataGrid.   End Sub   Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)     ‘Get detailed information about the selected id and bind     ‘the database results to the dgauthorsdetay DataGrid    End Sub < /script> <form runat=”server”>   <asp:DataGrid runat=”server” id=”dgAuthordetay” … >     …   </asp:datagrid>   <asp:DataGrid runat=”server” id=”dgAuthor” … >    <Columns>     <asp:ButtonColumn Text=”Details” HeaderText=”Detay”              ButtonType=”PushButton” />     <asp:BoundColumn DataField=”au_id” Visible=”False” />     <asp:BoundColumn DataField=”address” HeaderText=”Adres” />    </Columns>   </asp:datagrid> < /form>

Burada dikkat etmemiz gereken ilk sey ASP.NET sayfamizda iki tane DataGrid oldugu. Birincisi dgAuthorsdetay bir kayitin detayini gösteren tablo. Ikincisi dgAuthors ise bütün kayitlari gösteren DataGrid. Dikkat etiyseniz dgAuthors DataGrid?imizin au_id BoundColums taginin Visible=?False? olarak ayarlandiginiz ve au_id kismi bizim dgAuthors DataGrid?imizin çiktisinda gözükmüyor.

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.

Asp ile yapilan uygulamalarda en sik karsilasilan uygulamalarin basinda veritabaninda bulunan tablo halindeki verileri alip bunu HTML tablosu olarak göstermektir. Klasik Asp ile bunu yapabilmek için birçok karmasik kod yazmaniz gerekmekteydi. ASP.NET’in bir avantajida içinde bir çok web kontrolünü barindirmasidir. Bu web kontrolleri HTML sunmak ve gelistiricilerin kod ile içerigi birbirlerinden ayirabilmesi için programlanabilir bir arabirim saglamaktadir. Eger ASP.NET kullanarak bir HTML çiktisi almak istiyorsak.

<script language="vb" runat="server">          sub Page_Load(sender as Object, e as EventArgs)          lblMessage.Text = "Hello, World!" end sub </script> <asp:label runat="server" id="lblMessage" />

Burada “lblMessage” label Web kontrolünün HTML-benzeri taglar ve runat=”server” özelligi kullanilarak HTML içerisine yerlestirildigini görüyoruz. Page_Load event handler’i ise (sayfanin her yüklenmesinde çalisir) lblMessage Web Kontrolünün text özelligine “Hello World!” yazisini yazdirir. Bu sekide Web kontrollerinin kullanarak kod ile içerigi birbirinden ayirmaktayiz. Klasik ASP ‘de bunu yapabilmek için <%="Hello, World!"%> kodunu HTML içinde gerekli yere eklememiz gerekiyordu. Görüldügü gibi ASP.NET Web kontrolleri basit label kontrolünden daha kullanisli ve güçlü. Ayrintili olarak inceleyecegimiz DataGrid Web kontrolü ise web kontrollerinin en güçlülerinden biri. DataGrid bize veri-dolu HTML tablolari olusturmak için gerekli HTML çiktisini sunar. Ileride göreceginiz gibi DataGrid’e veri baglamak gerçekten çok kolaydir. Ayrica sadece birkaç ufak ayarlama ile DataGrid’lerin görünüslerini profesyonel HTML tablolari halinde sunabilirsiniz.

DataGrid Temelleri

DataGrid’i ASP.NET web sayfasina yerlestirmek için asagidaki kodu sayfaniza eklemeniz gerekmektedir.

<asp:datagrid runat="server" id="ID_of_DataGrid" />

Burada id DataGrid’e server-side kod yazarken ulasacaginiz ismidir. Yukaridaki sentaks DataGrid’i HTML içerigine yerlestirmek için kullanilmakta, fakat bizim esas ihtiyacimiz olan DataGrid’e herhangi bir grup bilgiyi baglayarak daha kullanisli bir sekilde göstermek. Peki, DataGrid’e bu bilgiyi nasil baglayacagiz? Bu inanamayacaginiz kadar kolay. Ilk yapmamiz gereken içinde veritabanindan çekilmis veriler bulunduran bir DataReader yakalamak. Bu örnek için SQL server ile gelen Pubs veritabanini kullanacagiz. Birkere DataReader’a gerekli olan verileri attiktan sonra, DataGrid’e bu verileri baglamak için iki satir kod eklememiz yeterli; Ilk satir DataGrid’ in DataSource özelligine DataReader’i atamak; ikincisi ise DataGrid’in DataBind() metodunu çagirmak. Hepsi bukadar, asagidaki kodda bunu ayrintili olarak görebilirsiniz.

<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <SCRIPT language="VB" runat="Server"> Sub Page_Load(Src As Object, E As EventArgs) Dim dr As SQLDataReader Dim conn As SQLConnection Dim cmdAuthors As SqlCommand 'Pubs veritabanina bir baglanti kuruyoruz conn = New SQLConnection _ ("server=localhost;uid=sa;pwd=1Aspnet;database=pubs") conn.Open() 'Authors tablosundaki verileri içeren bir dataset olusturuyoruz’ cmdAuthors = New SqlCommand _ ("select * from Authors", conn) dr = cmdAuthors.ExecuteReader 'DataGrid’in datasource’na datareader’i baglayalim dgAuthors.DataSource = dr 'DataGrid’in databind() methodunu çagiralim. dgAuthors.DataBind() conn.Close() End Sub </SCRIPT>   <ASP:DataGrid id="dgAuthors" runat="server"/>

Yukaridaki örnekte ilk olarak bir database baglantisi açip SQL komutunu çalistiriyoruz, DataGrid’in DataSource özelligini verileri barindiran DataReader’a bagliyoruz ve son olarak DataBind metodunu çagiriyoruz. Bu sekilde bütün kodu içerikten izole etmis oluyoruz; klasik ASP sayfalarinda karsilastigimiz, HTML tablosu ile DataReader çikti sentaksi arasinda hiçbir karisim olmuyor.