DataGrid Kontrolümüzü Özelleştirelim

Makale

DataGrid Kontrolümüzü Özelleştirelim

ASP(Actie Server Pages) ile dinamik web uygulamaları geliştirdikten sonra, Microsoft tarafından yeni vizyonu olacağını açıkladığı .NET teknolojilerinin duyurulması, sektör için büyük bir değişimin başlangıcı oldu. Bu teknoloji ile birlikte, dinamik web uygulamarının yerini, artık çok fonksiyonlu ve çok daha kullanışlı web tabanlı yazılımlar alacaktı. Sonuç olarak bugüne baktığımızda, değişim, hızlı sayılabilecek bir zaman diliminde gerçekleşti ve herkes yavaş yavaş .NET teknolojilerinin gücünü öğrenmeye ve uygulamalarında artık tamamen kullanmaya başladı.

Bu teknolojinin nasıl başladığı ve yaygınlaştığına kısa bir giriş yaptıktan sonra bu değişimin neden bu denli kısa olduğuna değinmek istiyorum. Nedir ASP.NET ile birlikte gelen bu büyük yenilik? Aslında saymakla bitmeyecek, tek başına birer kitap konusu olabilecek kadar çok değişiklik geldi ASP.NET ile birlikte. Ama sanrım herkesi bu teknolojiyi kullanmaya ve öğrenmeye iten en önemli yenilik, tüm yazılım geliştiricilerin hayatını kolaylaştıran standart web kontrolleri oldu. Hepimizin kullandığı bu kontroller arasında sanıyorum en çok kullanılan, gelişmiş özellikleri sayesinde DataGrid web kontölü olmuştur diye düşünüyorum. Bunun sebebi de tabiki; bir veri kaynağından çektiğimiz kayıtlarımızı mümkün olduğunca az kod yazarak, kullanıcılarımızın kolaylıkla takip edebileceği bir arayüzde kolaylıkla sunmamıza olanak sağlaması. Ayrıca kendi içinde gelen, yazılım geliştiriciler olarak bizlerin pek fazla kod yazmamıza gerek olmadan çalışan, bizlerin hayatını kolaylaştıran, paging(sayfalama) ve sorting(sütun sıralama) özellikleri de bizleri bu kontrolü çokca kullanmaya iten özellikler arasında geliyor şüphesiz.

İşte bu makalenin konusu, kullandığımız DataGrd web kontrolünün nasıl özellşetirileceği ve kişiselleştirileceği ile ilgili olacak. Bu makaleyi okuduktan sonra herkes, stanadart DataGrid kotrölü içerisindeki paging ve sorting mekanizmalarının nasıl değiştirilebileceği ve görüntülerinin nasıl daha şık bir hale getirileceği konusunda yeterli düzede fikir sahibi olacak.

1. DataGrid Kontörlümüzün Yaratılması

Öncelikle ASP.NET projemizi yarattıktan sonra, aspx sayfamızın üzerine standart DataGrid web kontrolümüzü ekliyoruz ve sql server veritabanımıza bağlanarak görüntülenecek verilerimiz alıyoruz. Ben bu örnek uygulama için DataGrid isimli bir ASP.NET web projesi oluşturdum ve daha önceden hazırlanmış dukkan isimli veritabanıma bağlanarak tblUrun tablosundan ilgili kayıtları sorgulayarak görüntülenecek datagrid'i oluşturdum. İlk standart göürünüm ile ilgili aspx kodları ve DataGrid görünümü aşağıda görülebilir. Makalenin asıl konusu bu kısım olmadığından buradaki kodları açıklamayacağım.

2. DataGrid Kontrolümüze Çoklu Seçim ve Çoklu Silme Özelliğinin Eklenmesi

Bunu yapabilmek için öncelikle DataGrid kontölümüze, satırların seçilebilmesini sağlamak için, bir adet asp.net CheckBox web kontrolü içeren templated column ekliyoruz. Daha sonra seçilen satırların arkaplan rengini değiştirmek, datagrid'imizin daha kolay kullanılabilirliğini sağlamak için chechbox ların onclick eventlerine kavascript kodları ekliyoruz. Bunun amacı tik atıldığında satırın arka plan rengini değiştirmek, tik kaldırıldığında da tekrar eski arka plan rengine geri döndürmek. Ayrıca bir diğer önemli konu da bu sütunun header ksımına bir adet daha check box ekliyoruz. Bunun amacı ise tıklandığında, tüm satırlardaki checkbox lara tik atmak ve tüm satırların arka plan rengini değiştirmek.

<script language="javascript">
function chkItem(chkB){
if (chkB.checked==true)
{
     chkB.parentElement.parentElement.style.backgroundColor = '#b0b0b0'
     chkB.parentElement.parentElement.style.color='white'
}
else
{
    chkB.parentElement.parentElement.style.backgroundColor = '#eeeeee';
    chkB.parentElement.parentElement.style.color='black';
    document.getElementById("dbGrid__ctl2_chkAll").checked = false;
}
}

function chkAll() {
var aRows = dbGrid.tBodies[0].rows;
var nRows = aRows.length-1;

a=document.getElementsByTagName('input');
for(var i=0; i < a.length; i++)
{
    if (a[i].getAttribute("type")=="checkbox")
    {
      if ( document.getElementById("dbGrid__ctl2_chkAll").checked==true )
         a[i].checked = true;
      else
        a[i].checked = false;
    }
}

if ( document.getElementById("dbGrid__ctl2_chkAll").checked==true )
{
    for(var i=nRows;i>=1;i--)
    {
      aRows[i].style.backgroundColor = '#b0b0b0';
      aRows[i].style.color = 'white';
    }
}
else
{
    for(var i=nRows;i>=1;i--)
    {
       aRows[i].style.backgroundColor = '#eeeeee';
       aRows[i].style.color = 'black';
    }
}
}
</script>

Bundan sonraki aşama, grid kontrolümüzün en alt kısmında bulunan sil butonuna basınca seçili olan kayıtları silecek olan kodu asp.net sayfasının code-behind tarafına eklemek. Burada dikkat edilmesi gereken nokta; datagrid kontrolünün DataKeyField özelliği. Bu özelliğe verilerimizi silek için kullanılacak veritabanından gelen kayıtları benzersiz olarak ifade edecek olan bir değer atamak. Yani kayıtların çekildiği veritabanı tablsounun primary key alanı bu kısma atanabilir. Bu örnekj proje için; dbGrid.DataKeyField = "urunKod" satırı kullanıldı.

Daha sonraki aşama ise, bir döngü kullanarak datagrid içerisinde seçili olan satırların(datagrid item), DataKeyField değerlerini alarak string türünden bir değere eklemek.Ve sonra bu eklenen değer kullanılarak kayıtları silen gerekli SQL satırı yazılıp çalıştırılacak. DELETE FROM TabloAdı WHERE ID IN (seçililerineklediğiString) İlgili kodu aşağıda inceleyebilirsiniz.

Private Sub btnSil_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSil.Click
      Dim result, sqlStr As String, sqlCn As SqlConnection
      Dim i As Integer = 0
      Dim cb As CheckBox
      Dim dgi As DataGridItem
      Dim id As Integer
      Dim secililer As String = ""

     For Each dgi In dbGrid.Items
           cb = CType(dgi.Cells(0).Controls(1), CheckBox)
           If cb.Checked Then
                 id = CType(dbGrid.DataKeys(i), Integer)
                 secililer += CStr(id) + ","
           End If
           i += 1
      Next

      If secililer <> "" Then
            result = Left(secililer, secililer.Length - 1)
     Else
            result = ""
     End If
      If result = "" Then Exit Sub

      sqlStr = "DELETE FROM tblUrun WHERE urunKod IN (" + result + ")"
      sqlCn = New SqlConnection(ConnStr)
      sqlCn.Open()
      Dim SqlCmd As New System.Data.SqlClient.SqlCommand(sqlStr, sqlCn)
      Try
           SqlCd.ExecuteNonQuery()
           Response.Redirect(Request.RawUrl)
      Catch ex As Exception
           Response.Write(ex.Message)
      End Try
      sqlCn.Close()
End Sub

3. Paging(Sayfalama) Yapısını Özelleştirmek

DataGrid ASP.NET kontölü ile birlikte gelen paging yapısının bizim için yeterli olmadığını yada örneğin sayfalar arasında gezinme işlemini grid'imizin altındaki 1,2,3,... sayfa link'leri ile değil, bir DropDownList kontrolü ile yaptırmak istediğimizi düşünelim. Yani DropDownList içerisinde kaç adet sayfa olacaksa, bunlar için sayfa1 , sayfa 2 , ... şeklinde kayıtlar bulunacak ve kullanıcı hangi sayfaya geçmek istiyorsa buradan dilediği sayfayı seçebilecek. Böylelikle eğer topam sayfa sayımız 10 dan fazla ise, kullanıcı diğer sayfaları görebilmek için daha önceden olduğu gibi ... bağlantısına tıklayıp 10-20 arası sayfa link'lerine ulaşmak zorunda kalmayacak, tüm sayfalar DropDwonList içerisinde erişim için bulunacak.

Bu yapıyı sağlamak için öncelikle DatGrid kontrolündeki AllowPaging özelliği True yapılacak ve DataGrid tarafından otomatik olarak konulan sayfa index lerinin görüntülenmesini engellemek için PagerStyle objesinin Visible özelliği false yapılacak. Böylelikle grid içierisinde safalama yapabileceğiz fakat kontrolün sağladığı otomatik indexler görünmeyecek. Bunun için gridin altına bir html table koyarak bunun içerisine, DropDwonList kontrolümüzü ekleyeceğiz.

Yukarıdaki resimde de görüldüğü gibi, cmbSayfalar adlı DropDownList yaratılıyor ve içini dolduran kod da yanda gösterildiği şekliyle yazılıyor. Burada didkkat edilmesi gereken bir diğer konu da, sayfanumarası DropDownList'den seçildikten sonra DataGrid'in ilgili sayfaya göre nasıl dolacağı konusu;

Bunu sağlamak içinse, web formunun her yerinde, gerekli oalcak her durumda, DataGrid kontrolümüzü oluşturacak olan bir fonksiyon yazıyoruz ve bu fonksiyon da parametre olarak grid'deki pageIndex değerini alıyor. Daha sonrada cmbSayfalar adlı DropDownList kontrolünün SelectedIndexChanged olayı sırasında dbGrid kontrolünü yeniden dolduruyoruz. Grid tekrar doldurulurken de CurrentPageIndex değeri fonksyiondan gelen parametreye eşitleniyor.

4. Detaylandırılmış Sütun Sıralama(Sorting) Yapısı

Bu bölümde DataGrid web kontrolümüze yukarıda eklediğimiz ek görsel özellikler dışında yeni bir sorting yapısı ekleyeceğiz. Burada yapılacak olan, sıralanan sütun için, sutün başlığının yanına, sıralama tipini (büyükten küçüğe ya da küçükten büyüğe) belirten ikonlar eklemek olacak. Buradaki temel mantık, DataGrid kontrolündeki her bir kolonun ilk satırında bulunan header nesnesine, kolon başlığını belirten bir yazı (Header Text) dışında, bir de kolonun sıralama tipini belirten bir resim eklemek. Sütunları sıralamak için kolon başlığına tıklandığında, öncelikle sıralama tipi ViewState objesi içerisinde saklayacak ve daha sonra CreateDbGrid fonkisyonu ile DataGrid tekrar doldurulacak. Son olarak da DataGrid kontrolünün ItemDataBound olayı içerisinde, sıralama tipine göre, sıralanan kolonun başlık nesnesinde dinamik olarak bir Image kontrolü oluşturulacak ve bu kontrol sıralanan sütunun header hücresine eklenecek. Buraya kadar anlatılan işlemleri yapan program kodunu aşağıda görebilirsiniz.

Private Sub dbGrid_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles dbGrid.SortCommand
       If Trim(viewstate("Sort")) = Trim(e.SortExpression) Then
             If viewstate("Sort_asc") = 1 Then
                    viewstate("Sort_asc") = 0
              Else
                    viewstate("Sort_asc") = 1
              End If
     Else
             viewstate("Sort_asc") = 0
      End If
      viewstate("Sort") = e.SortExpression

      CreateDbGrid(sql, 0, e.SortExpression)
End Sub

Private Sub dbGrid_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles     dbGrid.ItemDataBound
       If viewstate("Sort") Is Nothing Then Exit Sub
       Dim dg As System.Web.UI.WebControls.DataGrid = sender
       Dim col As DataGridColumn
       For i As Integer = 0 To dg.Columns.Count - 1
            col = dg.Columns(i)
            If e.Item.ItemType = ListItemType.Header Then
                  If col.SortExpression = viewstate("Sort") Then
                         Dim img As New System.Web.UI.WebControls.Image
                         If viewstate("Sort_asc") = 0 Then
                               img.ImageUrl = "down.gif"
                         Else
                               img.ImageUrl = "up.gif"
                         End If
                         e.Item.Cells(i).Controls.Add(img)
                 End If
          Else
                Exit Sub
          End If
          Next
End Sub

Burada unutulmaması gereken bir diğer ayrıntı da, CreateDbGrid fonksiyonu içerinde yapılacak olan küçük değişikliktir. Şu ana kadar DataGrid oluşturmak için kullandığımız bu fonksiyonun sorting parametresi ile hiç ilgilenmemiştik. Artık bu kez bu parametreyle de ilgileniyor ve DataGrid'e bağlamak için kullandığımız DataTable'ı, öncelikle sort ettikten sonra DataGrid'e bağlıyoruz. Bunun için kullandığımız küçük kod parçacığı da aşağıda ;

If viewstate("Sort_asc") = "1" Then sortStr += " DESC"
tblData.DefaultView.Sort = sortStr

Sonuç

.NET teknojilerinin duyurulması ve ASP.NET'in ortaya çıkmasıyla birlikte, biz yazılım geliştiriciler için önceden hazırlanmış ve kullanımımıza sunulmuş birçok hazır web kontrolü ile tanıştık. Bunlar içinde en çok kullanılanlardan biri, şüphesiz ASP.NET DataGrid kontrolü oldu. Bu makalede, hepimiz tarafından sıklıkla kullanılan bu web kontrolünün, çok fazla bilinmeyen yönlerine değinerek, kontrolümüzü kullanım açısından daha estetik kılacak çeşitli eklentiler üzerinde durduk.

Bir sonraki makalede farklı bir konu ile tekrar görüşmek dileğiyle...

Kaan TEZGEL
kaan@kaantezgel.com

Not : Makalede kullanılan örnek projeyi, tüm kodlarıyla birlikte indirmek için tıklayınız.

Makaleyi nasıl buldunuz?
Makaleye puan vermek için üye girişi yapmanız gerekmektedir.

DataGrid Kontrolümüzü ÖzelleştirelimPrint Versiyonu

DataGrid Kontrolümüzü Özelleştirelim

Print Versiyonu