Template Column ile Adım Adım Butonlu Gridview Oluşturun

Üzerine butonlar yerleştirilmiş, dört dörtlük bir Gridview yapabilmek için şöyle en başından, ayrıntılarıyla anlatacak bir kaynak bulmak çok zor olabiliyor. Elimdeki örnekte, kolonlarını oluşturmaktan başlayıp veri çekmeye kadar bulabileceğiniz bir gridview örneğini sizlere anlatmaya çalışacağım.

 

1 ) Sol menüden bir Gridview nesnesini sürükleyip isimlendirerek işe başlayın. Grid’in köşesindekiki butonla açılan “Gridview Tasks” panelinden “Auto Format”ı seçin, ve zevkinize uygun bir desen belirleyin.

 

2 ) Aynı panelden, “Edit Columns” seçeneğini tıklayın. Açılan pencereden, ihtiyacınız kadar “Template Field” ekleyin. Ben bir Ankat sayfası yaptığım için aşağıdaki 4 kolonu ekledim, ki bunlardan üçü buton kolonu. Buton ya da resim yüklemek için elbette diğer özel kolonları da kullanabilirsiniz, fakat böyle yaparsanız kolon üzerindeki hakimiyetiniz kısıtlanacaktır, ve kolon tipi ilerde eklemek isteyeceklerinize engel olacaktır.

 

 http://yesugey.files.wordpress.com/2009/03/r1.jpg

 

1        Şimdi yine Gridview Tasks’tan “Edit Templates” bölümüne girin. Burada, her kolonun ItemTemplate seçeneğinin içine, veri dolduracağınız nesneleri koyacaksınız. Butonların işi kolay, çünkü onlara veri yüklemeyeceğiz. Sürükleyip bırakın, ve CommandName property’lerini “Select” yapın. Ama her butonunuz için şimdiden bir “OnClick” fonksiyonu açmanızı tavsiye ederim, birazdan onları kullanacağız.

 

http://yesugey.files.wordpress.com/2009/03/r2.jpg 

 

Atacağınız label’lara ise veri yükleneceği için bir numara çekmemiz gerekiyor. Label’in köşesindeki oka tıklayarak “Label Tasks” Penceresini açın. Burada Bindable Properties’ten “Text” kısmını tıklayarak “Eval(“kolonadi”) formatında, veritabanından göstermek istediğiniz verinin kolon adını girin. Artık bu label, Grid’e databind ettiğinizde ismini yazdığınız kolonun verisini gösterecek. Her label için, hangi veriyi tutacağını atamak zorundasınız.

 

http://yesugey.files.wordpress.com/2009/03/r3.jpg

 

1        Bu da tamamsa, grid’imizin görünümü tümüyle hazır demektir. Şimdi Grid’in tetiklenmesini istediğiniz butona ya da direk Page_Load’a, aşağıdaki kodları (tabii verileri, tablo isimlerini ve ConnectionString’inizi kendinize uyarlayarak)  girin:

 

SqlConnection sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ToString());

        SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(

            ” SELECT dataSetColumn1, dataSetColumn2, dataSetColumn3 FROM SQLTABLE “

            , sqlConnection);

        DataSet dataSet = new DataSet();

        sqlDataAdapter.Fill(dataSet, “SqlTable”);

        gridView1.DataSource = dataSet.Tables["SqlTable"];

     gridView1.DataBind();

 

Eğer tüm işlemleri doğru hallettiyseniz, sayfanızı çalıştırdığınızda uygun veriler, uygun kolonlara doluyor olmalı.

 

        Şimdiii, işin daha bir karizma  kısmına geliyoruz. Hangi butonun seçildiğini anlamak için, sayfada bir hiddnfield’a ihtiyacımız olacak. Sol menüden bir hiddenfield nesnesi alıp sayfanın herhangi bir yerine bırakın.

 

      Hani butonlarınız için onclick metodu açmıştınız ya? Her butonun o fonksiyonuna, yapacağı işlemle ilgili string değerini hiddenfield’a atmasını sağlayan kodu yerleştirin. Örneğin benim grid’imin delete fonksiyonu için şu kodu kullanıyorum:

 

protected void btnDelete_Click(object sender, EventArgs e)

    {

        hiddenField1.Value = “Delete”;

 }

 

Ya da edit butonum için:

 

   protected void btnPollOptions_Click(object sender, EventArgs e)

    {

        hfSelectedProcess.Value = “Edit”;

 }

 

       Gridinizin özellikler penceresinden events seçeneklerini açın, (üzerinde yıldırım olan buton) ve SelectedIndexChanging’e çift tıklayarak ilgili fonksiyonu açın.

 

http://yesugey.files.wordpress.com/2009/03/r4.jpg

 

Bu kısım, Grid’inizin butonları tıklandıktan sonra harekete geçecek fonksiyondur.

 

1        Fonksiyonun içine şu numarayı çekeceğiz:

 

  protected void gridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

    {

        if (hfSelectedProcess.Value == “Delete”)

        {

            // Silme kodlarınız

        }

        if (hfSelectedProcess.Value == “Edit”)

        {

            // Editleme kodlarınız

        }

    }

 

Buradaki yeşil alanlara örneğin silme butonu için silme işlemlerinizi, editleme butonu için editleme işlemlerinizi yazacaksınız.

 

2        İyi ama hangi satırın seçilmiş olduğunu nerden bileceğiz? Hadi bildik diyelim, o satırın bilgilerine nasıl ulaşacağız? Seçili satıra ulaşmak kolay, Event’ımızın kendisi zaten satır seçmek üzerine olduğu için e değişkeninin NewSelectedIndex özelliği bize satırı verecektir.

Grid’in seçili satırındaki verilere ulaşmak için ise, FindControl denen şahane yapıyı kullanacağız. Bu yapı, kodun içerisinde bir nesne oluşturuyor, ve grid’in seçili satırındaki aynı nesnenin verilerini bu nesneye aktarıyor. Hep birlikte izliyoruz:

 

Label _label1 = (Label)gridView1.Rows[e.NewSelectedIndex].FindControl(“label1″);

 

FindControl ile tırnak içinde yazdığınız nesnenin adı, grid’e sürüklediğiniz label’in adıyla aynı olmak zorunda. Artık o label’in bilgileri, kodda oluşturulan _label1’e aktarılmış durumda. (Bu bir ID bilgisi de olabilir) ve şimdi bu bilgiyle istediğimizi yapabiliriz.

 

Bu kadar… Örnekteki resimlerde benim isimlendirmelerim farklı olduğu için sıkıntı yaşayabilirsiniz, kendi isimlendirmelerinize dikkat edin.

 

Size yaptığımız işin teknik detayından da bahsedeyim, böylece grid’inizi ezberci zihniyetle değil anlayıp bilerek yapmış olursunuz.

 

• Grid’imizi yerleştirdik, stilini belirledik.
• Kolonlarımızı TemplateColumn olarak açtık, içlerine uygun label, hiddenfield gibi nesneleri atadık. Databinding kısımlarına, veritabanı kolonlarımızın isimlerini yerleştirerek dataset alanlarının bu nesneleri doldurmasını sağladık.
• Butonlarımızın CommandType’larını ise “Select” yaptık, böylece Grid’in ilgili satırını seçme işlemi yapmasını sağladık.
• Gridimizi dolduracak kodları yazdık.
•  Her butonun yapacağı işi kaydeden bir hiddenfield atadık, ve button’un click metodunda da, işlemin ismini bu hiddenfield’a atamasını sağladık.
• Gridview’in SelectedIndexChanging Event’ına da, hiddenfield’daki değere göre yapılacak işlemleri tek tek kodladık.

• Bu işlemleri yapmak için gerekli olan satır bilgilerine, oraya atadığımız template column nesnelerine FindControl metodu sayesinde ulaşarak kullandık.

 

Geliştirmeye oldukça açık bir yöntemle de olsa, TemplateColumn kullanarak Gridview işlemlerine kaliteli bir örnek vermeye çalıştım. Bu sayede siz de diğer özellikleri kurcalayarak çok daha iyisini ortaya çıkarabileceksiniz.