Datagrid – 2
Bir önceki makalede ASP.NET ile birlikte gelen ve
web kontrollerinin en güçlüsü olduğunu söylediğim DataGrid hakkında özetleyici bilgi
vermiştim. DataGrid'in nasıl kullanılacağına dair VB ile yazılmış bir kod göstermiş
ve çalıştırıldığında sayfada nasıl durduğunu göstermiştim.
Ancak çok fazla özelliği olan bu gelişmiş web kontrolünün envai çeşit özelliği hakkında
detaya girmemiştim. Çünkü bu geniş konuyu tek tek ayrı makalelerde işlemeyi düşünüyorum.
Makaleyi okuduğu sırada DataGrid'i tanıyanlar bu müthiş kontrolün artık web üzerinde
de kullanılabilecek olmasından eminim sevinç duymuştur. Web programcısını hamal
pozisyonundan yönetici pozisyonuna çıkaran bu icat nice insanın mutluluğunu web'e
yansıtmış olsa gerek.
Daha önce DataGrid'in varlığından bihaber olup makaleyi okuyarak kendisiyle tanışma
şerefine ulaşanlar ise benim de kendisiyle ilk defa tanıştığımda verdiğim tepkiye
benzer bir tepki vermiş olabilirler.
DataGrid kontrolünün server'da nasıl işlenip koca bir HTML tabloya dönüştüğü belki
anlaşılabilir. Ancak DataGrid'i HTML tabloya dönüştüren algoritma pek çok programcının
rüyalarına girecek niteliktedir. Web programcısının rüyasına giren DataGrid'in algoritması,
taksicinin rüyasına giren Porsche otomobil gibidir. Eveet bu kadar benzetme ve hikaye
yeter. Artık konumuza, yani DataGrid'in harikalar dünyasına girebiliriz.
DataGrid'e Stil verme
Sayfalama, sıralama, seçme, silme, düzenleme gibi özellikleri şimdilik bir kenara
bırakıp DataGrid'in oluşturacağı HTML tabloyu stilleme işlemini ön plana almak istiyorum.
Yapacağımız şey güzel olsun sonra sayfalar ve sıralarız.
Web Formları hakkındaki diğer makaleleri okuyup verilen kodları inceleyenler DataGrid'in
nasıl stilleneceği konusunda fikir sahibidirler. Benzer özelliklere benzer değerler
verilerek stil verilebilir. Ancak veri kaynağından çekilen tablodaki alanların hangilerinin
tarayıcıda gösterileceği veya gösterilen alanların sütun başlıklarının ne olacağı
tamamen DataGrid'e özgüdür.
İlk makalede adı geçen AutoGenerateColums özelliği ile sütunlara ve satırlara hükmedilir.
Neler yapılabileceği üzerine kısaca bilgi veriyim; veri kaynağından aldığınız tablonun
istediğiniz alanlarını gösterebilirsiniz. Alanların sütun başlıklarını keyfinize
göre belirlersiniz. İçerisinde daha kısa (örneğin id türü) bilgi taşıyan alanların
HTML tablodaki sütun genişliklerinin küçültüp daha çok bilgi taşıyanlarınkini büyültebilebilirsiniz.
Ayrıca sütunlara ayrı ayrı stil verip her sütundaki yazının farklı renk veya yazıtipi
ile görünmesini sağlayabilirsiniz. DataGrid'de yapabileceğiniz şeyler çoktur. Saydıklarımın
dışında daha birçok şeyi yapabilirsiniz.
Peki nasıl yaparsınız? Şimdi yavaş yavaş bu konuya girelim. DataGrid kontrolünün
nasıl kullanıldığını görmüştük. Şimdi eski bilgilerimize dayanarak tüm alanlarının
görüneceği bir veri kaynağındaki veriyi DataGrid ile gösterelim. Önce yüzeysel bir
stilleme yapalım.
|
<asp:DataGrid id="dgKisiler" runat="server"
BorderColor="#C7C7C7" Border BorderWidth="1px" CellSpacing="0" CellPadding="3" Font-Name="verdana" Font-Size="11px" /> |
Gereksiz yer işgali yapmaması açısından sadece DataGrid kontrolünü nasıl kullanacağınıza
dair kodu verdim. Bağlantı kodları için aşağıda vereceğim örneğin koduna bakabilirsiniz.
DataGrid'e stil vermek için kullanılan özellikleri sanırım HTML'den hatırlıyorsunuzdur.
Hepsi de bizim mahalleden kaliteli çocuklar. Önce kenar çizgilerini inceltiyoruz,
sonra hücrelerin arasını kapatıyoruz, hücre içini ferahlatıyoruz ve son olarak yazıtipimizi
ayarlıyoruz. İşte bu kadar.. Şimdi birde DataGrid'in bu haliyle neye benzediğini
görelim.
width="374" /> Gördüğünüz gibi bu haliyle DataGrid çok hoş bir görünüme kavuştu. Kenar çizgileri
ince, yazıtipi küçük. Kesinlikle göze batan bir tarafı yok.
AutoGenerateColums
Göze hoş geliyor belki ama fazladan bir alanı gösteriyoruz. "id" isimli alanın gösterilmesine
gerek yok, çünkü ziyaretçi bu bilgiye ihtiyaç duymayacaktır. O zaman sıvayalım kolları..
Ya da biz değil DataGrid sıvasın..
İlk olarak AutoGenerateColums özelliğine False değerini vermemiz gerekiyor. Böylece
DataGrid sütunların kendisi düzenlemeyerek işi bize bırakacak. DataGrid <Column>
koleksiyon özelliğine sahiptir. <Column> etiketinin içinde <BoundColumn>
özelliğini kullanarak sütunun başlığı ve veri kaynağından alınan tablodaki alanlardan
hangisinin burada gösterileceğini belirtebiliriz.
<Column> etiketinin içinde tüm sütunları belirtmemize gerek yoktur. İstediğimiz
sütunları istediğimiz sıra ile yazabiliriz. Her bir <BoundColumn> etiketi
içinde o sütuna ait şahsi stil özellikleri belirtilir. Sütunun genişliği de burada
verilir. Ayrıca <BoundColumn> nesnesinin <ItemStyle> özelliğini kullanarak
örneğin sütunun genişliğini belirtebiliriz.
Başlık satırının görünümünü düzenlemek için <HeaderStyle> özelliği kullanılır.
<AlternatingItemStyle> özelliği ile ise satırların farklı arka plan renkleriyle
gösterilmesi sağlanabilir. Bundan ilk makalede de bahsetmiştim.
|
<%@ Page Language="VB" Debug="True" %>
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.OleDb" %> <html><head><title> DataGrid kontrolü </title></head><body> <script runat="server"> Sub Page_Load(Source As Object, E As EventArgs) If Not IsPostBack Then Dim conn As New OleDbConnection(connstr) Dim adapter As New OleDbDataAdapter(sql,conn) dgKisiler.DataSource = ds.Tables("kisiler_tablosu") conn.close() End Sub </script> <asp:DataGrid id="dgKisiler" runat="server" </body> |
width="534" />
Son
Bu makalede DataGrid'i görünümüyle oynayıp adam etmeyi göstermeye çalıştım. Sanırım
adam etme konusunda başarılı oldum. İlk makaledeki kodun oluşturduğu tablonun ekran
görüntüsü ile bugünki son kodun ekran görüntüsünü karşılaştırdığımızda bu ortaya
çıkıyor. Özellikleriyle oynayarak eminim çok daha hoş görünen ve tasarımlarınıza
uyan DataGrid'ler oluşturabilirsiniz. Stil vermeyi de öğrendiğimize göre sıra DataGrid'in
sayfalama, sıralama gibi diğer özelliklerine sıra geldi. Bir dahaki makaleye sayfalama
konusuyla buluşmak üzere.. İyi denemeler..
Bu yazı, iş görür mü?
