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.
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 connstr, sql As String connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("kisiler.mdb") + "" sql = "SELECT * FROM kisiler" Dim conn As New OleDbConnection(connstr) conn.open() Dim adapter As New OleDbDataAdapter(sql,conn) Dim ds As New DataSet() adapter.Fill(ds,"kisiler_tablosu") dgKisiler.DataSource = ds.Tables("kisiler_tablosu") dgKisiler.DataBind() conn.close() End If End Sub </script> <asp:DataGrid id="dgKisiler" runat="server" BorderColor="#C7C7C7" Border BorderWidth="1px" CellSpacing="0" CellPadding="3" Font-Name="verdana" Font-Size="11px" AutoGenerateColumns="False" > <HeaderStyle font-bold="true" BackColor="#EAEAEA" HorizontalAlign="Center"/> <ItemStyle BackColor="#E1F0FF" VerticalAlign="Middle" HorizontalAlign="Center"/> <AlternatingItemStyle BackColor="#D2E9FF" VerticalAlign="Middle" HorizontalAlign="Center"/> <Columns> <asp:BoundColumn DataField="no" HeaderText="Öğrenci No"> <itemStyle width="100"/> </asp:BoundColumn> <asp:BoundColumn DataField="ad" HeaderText="Ad"> <itemStyle width="110"/> </asp:BoundColumn> <asp:BoundColumn DataField="soyad" HeaderText="Soyad"> <itemStyle width="110"/> </asp:BoundColumn> <asp:BoundColumn DataField="sehir" HeaderText="Şehir"> <itemStyle width="120"/> </asp:BoundColumn> </Columns> </asp:DataGrid> </body> </html> |
