DataGrid

[Fatih!]

DataGrid sayesinde verilerinizi, kullanıcılarınıza çok kolay bir şekilde gösterebilirsiniz. Genellikle raporlama işlemlerinde kullanacağınız DataGrid ile sayfalama, kayıtları değiştirme vs. gibi bir çok özelliği çok kolay bir şekilde yapabilirsiniz.
Makalemiz boyunca vereceğimiz örnekler, Delphi diliyle Delphi 2005 IDE ortamında ve Access Database ile olacağı için bir çok arkadaşımıza güzel bir kaynak olacağına inanıyorum.
Adım adım gideceğimiz uygulamamızın sonunda, elinizde mükemmel bir kaynak olacak. İsterseniz hemen başlayalım.
1) Yeni bir Web Application açıyoruz ve MyDataGrid.aspx olarak yeni bir web form oluşturuyoruz.
2) Component Paletten sürükle bırak yardımıyla, bir adet DataGrid nesnesini sayfamıza koyalım. Farkettiğiniz üzere DataGrid nesnemizin adı DataGrid1 oldu. Kodlama sırasında nesnemizin adı önemli olduğu için, doğabilecek karışıklıklarıda önlemek amacıyla, Properties penceresinden DataGrid nesnemizin (ID) özelliğini, varolan DataGrid1 değeri yerine myGrid olarak değiştirelim.
3) Properties ekranında bulunan bir önemli özellik de AutoGenerateColumns.
Değerinin true olması durumunda, DataGrid e bağlanan verikaynağı ile aynı özellikleri kullanarak run-time da oluşturulacaktır. Yani bir nevi veritabanına ait tabloyu size sunacaktır.
Değerinin false olması durumunda ise, run-time oluşturulmayacak ve siz istediğiniz kolanları ekleyebilecek ve hatta verilerin gösterimini bile değiştirebileceksiniz. Biliyorum, eğer ilk uygulamanızsa kafanız biraz karışmış olabilir. Ancak biz iki türlüsünü de deneyeceğimiz için biraz sabretmenizi istiyorum. Şimdilik değerini true olarak ayarlayınız.
4) Bir Önemli özelliğimiz ise, yine properties penceresinden erişebileceğiniz AllowPaging. Eğer DataGrid imizde otomatik olarak sayfalama yapmak istersek bu değeri true olarak değiştirmemiz gerekecektir. Biz şimdilik değerini false olarak ayarlayacağız. (Herşey sırayla.)
5) Şimdi, hafiften kod kısmına geçelim. Sayfamızın Load eventine ulaşarak gerekli veritabanı bağlantılarını gerçekleştireceğiz. Ve ardından verilerimizi DataGrid imize bağlayacağız. Hatırlatmama gerek var mı bilmiyorum, gerekli namespace(unit) leri lütfen import etmeyi unutmayınız.
Biz makalemizde herkezde MSSQL server olmaması ihtimaline karşın Access DataBase dosyası ile OleDB bağlantısı yapacağız. İsterseniz SQL bağlantısı ile de tüm işlemleri gerçekleştirebilirsiniz.

Kod: Tümünü seç

procedure TWebForm1.Page_Load(sender: System.Object; e: System.EventArgs);
var
MyConnect:oleDbConnection;
MyAdapter:oleDbDataAdapter;
MyDataset:DataSet;
begin
//Bağlantıyı oluştur
MyConnect:=oleDbConnection.Create;
MyConnect.ConnectionString:='Provider=microsoft.Jet.OLEDB.4.0;'+'data source='+Server.MapPath('/MyProc/Data.mdb');
//Tabloya bağlan
MyAdapter:=oleDbDataAdapter.Create('Select * From TBL_LISTE',MyConnect);
//Seçilen Tabloyu DataSete Aktar
MyDataset:=Dataset.Create;
MyAdapter.Fill(MyDataset,'TBL_LISTE');
MyGrid.DataSource:=MyDataset.Tables['TBL_LISTE'];
//verilemizi bağlıyoruz.(PostBack değilse)
if not (IsPostBack) then
MyGrid.DataBind;
end;

Burada daha önceki makalemizden farklı olarak IsPostBack komutunu görüyoruz. Bunun anlamı sayfa ilk defa yüklenmediyse gride bulunan görüntüyü değiştirme yani veritabanından daha önce çektiğimiz veriler kalsın tekrar veriyi çekmeye gerek yok. Peki Bu bize ne gibi bir fayda sağlar?
Gridin yanında bir button olduğunu düşünün. Button çeşitli işlemler yapıyor. Sayfa her buttona basışınızda sunucuya gidip o işlemleri yapıp size işlem sonucunu gönderir. Bu esnada her buttona tıklayışınızda sayfanın load olayı çalışır ve sürekli gride bir işlem yapmamamıza rağmen verileri tekrar tekrar atar. Bunu engellemek için bu şart ekini kullanıyoruz.
F9 tuşuna bastığımızda aşağıdaki gibi bir ekran görüntümüz olacaktır.



Gördüğünüz gibi veriler gride.. Sizin gridiniz benim gridim kadar güzel görünmüyorsa object inspectordan renk ayarlarıyla oynayın. C#’ta görüp delphide görmediğim güzelliklerden biri C#’ta grid için hazır şablonlar bulunması. Maalesef delphide bu seçenek yok. Ben buna kendimce bir çözüm buldum. C# derleyicisini açarak bir grid ekliyorum sonrada oluşturduğu asp.net kodlarını delphiye yapıştırıyorum ve şablon olduğu gibi delphide
Şablonu datagridi seçtikten sonra aşağıdaki gibi delphiye yapıştırmanız yeterli. Yukarıda gridin isminin MyGrid olduğunu söylemiştim. Eğer grid isminiz farklıysa asp.net kodundaki Mygrid yerine kendi grid isminizi yazın.



Şablon kodlarım aşağıdaki gibi. İsterseniz diğer şablonları da gönderebilirim

Kod: Tümünü seç

<asp:DataGrid id="MyGrid" style="Z-INDEX: 101; LEFT: 94px; POSITION: absolute; TOP: 246px"
  runat="server" backcolor="#DEBA84" bordercolor="#DEBA84" borderstyle="None"
  cellspacing="2" borderwidth="1px" cellpadding="3">
  <FooterStyle forecolor="#8C4510" backcolor="#F7DFB5"></FooterStyle>
  <HeaderStyle font-bold="True" forecolor="White" backcolor="#A55129"></HeaderStyle>
  <PagerStyle horizontalalign="Center" forecolor="#8C4510" mode="NumericPages"></PagerStyle>
  <SelectedItemStyle font-bold="True" forecolor="White" backcolor="#738A9C"></SelectedItemStyle>
  <ItemStyle forecolor="#8C4510" backcolor="#FFF7E7"></ItemStyle>
</asp:DataGrid>

Gördüğünüz gibi bu haliyle DatGrid imiz pek hoş durmuyor, ve ayrıca pek de bir özelliği yok. Sadece veritabanındaki verileri komple listeledi. Şimdi isterseniz yavaş yavaş daha kullanışlı bir hale getirelim.
6) Öncelikle DataGrid imize ait properties ekranında bulunan Columns sekmesine gelelim. Karşınıza aşağıdaki gibi bir ekran çıkacaktır.



7) En yukarıda bulunan Create columns automaticaly at run time ChackBox ını boş bırakın. Bu makalemizin başında bahsettiğimiz AutoGenerateColumns ile aynı işi yapmaktadır.
Öncelikle 4 adet Bound Column seçip sağ tarafa geçirin. Yukarıdaki şekilde IDNO alanına ait Bound Column sağ tarafa geçirilmiş durumda. Ve Header Text ve Data Field özellikleri bizim tarafımızdan doldurulmuştur.
Header Text; DataGrid de o alanın en yukarsında yazılması istenen başlıktır.
Data Field ise; veritabanımızdaki alanın ismidir.
Bu şekilde; IDNO, ADI, MESLEĞİ, KAYIT TARİHİ alanlarımızıda Bound Column olarak olşturuyoruz. DataField kısımlarına sırasıyla; IDNO, ADI,, MESLEGI, KAYIT_TARIHI yazıyoruz. Header Text kısımlarına ise sırasıyla; Sıra No, Adı, Mesleği, Kayıt Tarihi yazıyoruz.
Bu ekranda en altta görülen Read Only CheckBox ı; DataGrid in Edt Modunda iken var alon alanın asla değiştirilmemesini sağlar. Bu kullanıma en uygun alan IDNO alanımız için bu ChechkBox ı seçebiliriz ancak biz zaten bu alanı kullanıcıya göstermeyeceğimiz için onun yerine Visible kutucuğunun işaretini kaldırıyoruz.
9) Şimdiye kadar eklediğimiz kolonlar, veri tabanından verilerimiz almak için gereken kolanlardı. Şimdi ise birde Button Column ekleyeceğiz. Button Columunlar göreceğiniz üzere bir kaç alternatiften oluşmaktadır. Biz öncelikle Edit, Update, Cancel Kolonu ekleyeceğiz. Aşağıdaki şekildeki gibi bir ekleme yapınız.
Bu Halde Çalıştırırsanız Alan İsimlerinin Belirlediğimiz Şekilde Geldiğini Görürüz. Herhangi bir alanın eklenmesini istemiyorsak. O alanı bu listeden çıkarırız.
10) Birde Button Columnlardan Delete Edit,Update,Cancel i listeye ekleyelim. Header Text ini Tıpkı bir alana İsim verir gibi bir isim verebilirsiniz. Text özellikleri Buttonun yapacağı görevi yazın. Sil, Güncelle gibi. Button Type kısmını da PushButton yaparsanız Captionlar Button şeklind görünür. LinkBotton da Link Şeklinde görülmesini sağlar.



Yeri Gelmişken söyleyeyim Visible Kutucuğunun işaretini kaldırırsanız o alan görünmez. Header İmage= Alan ismi yerine resim eklemenizi sağlar. Data Formatting alan değerini formatlamanızı sağlar. Footer Text özelliği ise gridin altınada alan ismi yada istediğiniz yazıyı göstermenizi sağlar.
11) Gerekli görsel ayarları yaptıktan sonra, gerekli kodlara geçelim. Yukarıda yazdığımız kodları tamamen silin.
12) Öncelikle DataGrid imizin EditCommand Event i içersine aşağıdaki kodu girelim.bu kod grideki aktif kaydı edit moduna sokar. ItemIndex i listboxtan tanıyoruz aktif kaydı gösterir.

Kod: Tümünü seç

procedure TWebForm1.MyGrid_EditCommand(source: System.Object; e: System.Web.UI.WebControls.DataGridCommandEventArgs);
begin
myGrid.EditItemIndex := e.Item.ItemIndex;
myGrid.DataBind();
end;

13) DataGrid imizin CancelCommand Event i içersine aşağıdaki kodu girelim. Düzenlemeyi iptal eder. İndexe geçersiz bir sayı vererek edit modundan çıkar.

Kod: Tümünü seç

procedure TWebForm1.MyGrid_CancelCommand(source: System.Object; e: System.Web.UI.WebControls.DataGridCommandEventArgs);
begin
myGrid.EditItemIndex := -1;
myGrid.DataBind();
end;

14) DataGrid imizin UpdateCommand Event i içersine aşağıdaki kodu girelim. Projeyi çalıştırdığınızda düzenleme moduna giren kaydın TextBox oluşturarak düzenleyeceğimiz verileri bu TextBoxlar içine attığını görürsünüz. 4 alanımız olduğu için 4 textbox oluşturup otomatik oluşan textBoxlarda bulunan verileri kendi oluşturduğumuz textboxlara atıyoruz. Dikkat ettiyseniz ilk textboxa yaptığımız atama farklı. İlk alanımız idno ve otomatik artan primary keye sahip bir alandı. Kullanıcının işine yaramadığı için bu alanı gizlemiştik. Bu alan primary alan olduğu için silme ve güncellemeleri bu alan üzerinden yapıyoruz. Tasarım aşamasında DataGridi seçerek object inspectordan “DataKeyField” özelliğine “IDNO” yazıyoruz. Bu alanın tuttuğu değer integer tipte olduğu için “ToString” fonksiyonuyla Stringe çevirip TextBoxa atıyoruz. TextBoxa atamalar bittikten sonra oledbconnection nesnesi oluşturup veritabanına bağlanıyoruz. Sonrasında yeni bir nesne “OleDbCommand” görüyoruz. Bu bileşen sql cümlelerimizi çalıştırabilmemizi sağlıyor. MSSQL e bağlanacaksanız bileşenin adı “sqlcommand” olmalıdır. “ExecSQL” Komutuna karşılık gelen “ExecuteNonQuery” ile bileşene atadığımız sql cümlesini çalıştırıyoruz. Sonrasında Baglan adlı proceduremizi çağırarak gride verileri güncelliyoruz. Dikkat ettiyseniz burada Connection nesnesi açıp kapatıyoruz ancak DataSet ve DataAdapter kulkandığımızda bu işlem otomatik yapılır.

Kod: Tümünü seç

procedure TWebForm1.MyGrid_UpdateCommand(source: System.Object; e: System.Web.UI.WebControls.DataGridCommandEventArgs);
Var
txt1,txt2,txt3,txt4:TextBox;
MyConnect2:oleDbConnection;
MyCommand:OleDbCommand;
begin
txt1:=TextBox.Create;
txt2:=TextBox.Create;
txt3:=TextBox.Create;
txt4:=TextBox.Create;
TXT1.Text :=(MyGrid.DataKeys[e.Item.ItemIndex]).ToString;
txt2 := (e.Item.Cells[1].Controls[0]) as TextBox;
txt3 := (e.Item.Cells[2].Controls[0]) as TextBox;
txt4 := (e.Item.Cells[3].Controls[0]) as TextBox;
MyConnect2:=oleDbConnection.Create('Provider=microsoft.Jet.OLEDB.4.0;'+'data source='+Server.MapPath('/MyProc/Data.mdb'));
MyConnect2.Open;
MyCommand:=OleDbCommand.Create('UPDATE TBL_LISTE SET ADI='+#39+TXT2.Text+#39+',MESLEGI='+#39+TXT3.Text+#39+',KAYIT_TARIHI='+#39+TXT4.Text+#39+' WHERE IDNO='+txt1.Text,MyConnect2);
MyCommand.ExecuteNonQuery;
MyConnect2.Close;
myGrid.EditItemIndex := -1;
Baglan;
myGrid.DataBind();
end;

15) DataGrid imizin DeleteCommand Event i içersine aşağıdaki kodu girelim.

Kod: Tümünü seç

procedure TWebForm1.MyGrid_DeleteCommand(source: System.Object; e: System.Web.UI.WebControls.DataGridCommandEventArgs);
Var
txt1:TextBox;
MyConnect2:oleDbConnection;
MyCommand:OleDbCommand;
begin
txt1:=TextBox.Create;
TXT1.Text :=(MyGrid.DataKeys[e.Item.ItemIndex]).ToString;
MyConnect2:=oleDbConnection.Create('Provider=microsoft.Jet.OLEDB.4.0;'+'data source='+Server.MapPath('/MyProc/Data.mdb'));
MyConnect2.Open;
MyCommand:=OleDbCommand.Create('DELETE FROM TBL_LISTE WHERE IDNO='+TXT1.TEXT,MyConnect2);
MyCommand.ExecuteNonQuery;
MyConnect2.Close;
Baglan;
myGrid.DataBind();
end;

son olarak bir iki yerde kullandığımız için aşağıdaki kodları procedure olarak tanımlayın.

Kod: Tümünü seç

procedure TWebForm1.Baglan;
var
MyConnect:oleDbConnection;
MyAdapter:oleDbDataAdapter;
MyDataset:DataSet;
begin
//Bağlantıyı oluştur
MyConnect:=oleDbConnection.Create;
MyConnect.ConnectionString:='Provider=microsoft.Jet.OLEDB.4.0;'+'data source='+Server.MapPath('/MyProc/Data.mdb');
//Tabloya bağlan
MyAdapter:=oleDbDataAdapter.Create('Select * From TBL_LISTE',MyConnect);
//Seçilen Tabloyu DataSete Aktar
MyDataset:=Dataset.Create;
MyAdapter.Fill(MyDataset,'TBL_LISTE');
MyGrid.DataSource:=MyDataset.Tables['TBL_LISTE'];
end;

16) Son olarakta, DataGrid imizi sayfalı bir şekilde listelersek çok daha kullanışlı olacaktır. Bunun için yine, DataGrid imizin properties penceresinden bulunan Columns tıklayıp Paging sekmesine gelelim.
Burdan Allow Paging ChckBox ını işaretlemeniz, sayfalama yapmak için yeterli olacaktır. İsteseniz diğer ayrıntıları da düzenleyebilirsiniz.
Her sayfada kaç kayıt listelenmesi gerektiğini; Page Size ile
Sayfa Numaralarının yerini; Position ile
Sayfa Numarası veya ileri geri ok ile mi gösterileceğini; Mode ile
ve dahasını istediğiniz gibi gerçekleştirebilirsiniz.
17) Sayfalama işlemi için gerekli olan kodu da DataGrid imizin PageIndexChanged eventi altına yazmamız gerekmektedir.

Kod: Tümünü seç

procedure TWebForm1.MyGrid_PageIndexChanged(source: System.Object; e: System.Web.UI.WebControls.DataGridPageChangedEventArgs);
begin
 myGrid.CurrentPageIndex := e.NewPageIndex;
myGrid.DataBind(); 
end;

projeyi çalıştırdığınızda aşağıdaki görüntüyle karşılaşacaksınız.

[Fatih!]

DataGridde Sıralama
Datagridin Header Textine tıkladığınızda o alana göre sıralama yapmasını istermiydiniz. Cevabınız “Evet” ise makaleyi okumaya devam edin.

Öncelikle Formunuza bir datagrid ekleyip “AllowSorting” özelliğini “true” yapın.”AutoGenerateColumns” özelliğini “False” yapın. Daha sonra Columns özelliğine tıklayıp DataGride Alanlarınızı ekleyin. Alanları eklerken “Sort expression” kısmına Alan ismini eklemeyi unutmayın.

İki yerde kullanacağımız için aşağıdaki şekilde bir procedure oluşturun. Procedure de tanımladığımız parametreye tablonun hangi alanına göre sıralama yapmak istiyorsak o alanın ismini parametre olarak gönderiyoruz.

Kod: Tümünü seç

 procedure TWebForm1.Baglan(alan: String);

var

MyConnect:SqlConnection;

MyAdapter:SqlDataAdapter;

MyDataset:DataSet;

begin

//Bağlantıyı oluştur

MyConnect:=sQLConnection.Create('Server=localhost;Database=F atihDB;uid=sa;pwd=;');

//Tabloya bağlan

MyAdapter:=SQLDataAdapter.Create('Select * From IL Order By '+alan,MyConnect);

//Seçilen Tabloyu DataSete Aktar

MyDataset:=Dataset.Create;

MyAdapter.Fill(MyDataset,'Iller');

DataGrid1.DataSource:=MyDataset.Tables['Iller'];

DataGrid1.DataBind;

end; 

Page_Load olayına aşağıdaki kodu yazıyoruz. Varsayılan olarak sayfa ilk yüklendiğinde IDNO alanına göre yaptırıyoruz.

Kod: Tümünü seç

 procedure TWebForm1.Page_Load(sender: System.Object; e: System.EventArgs);

begin

If Not IsPostBack Then

Baglan('IDNO');

end; 

son olarakta DataGridin başlığına tıklandığında tıklanan alana göre sıralama yapmasını sağlamak için DataGridin SortCommand olay Precedure’üne aşağıdaki kodu yazıyoruz.

Kod: Tümünü seç

 procedure TWebForm1.DataGrid1_SortCommand(source: System.Object; e: System.Web.UI.WebControls.DataGridSortCommandEventArgs);

begin

Baglan(e.sortExpression);

end; 

Proseürün “e” parametresi tıklanan alanı temsil etmektedir. Hatırlarsanız Alanları oluştururken “Sort expresion” bölümüne alan ismini yazmıştık. İşte bu özelliğe “e.sortExpression” şeklinde ulaşıp değeri Prosedure parametre parametre olarak gönderiyoruz.

Bugünlükte Bu kadar

Bol Kodlu günler…………………

[haydarxxx]

Bilmiyorum benim makinamdamı hata var syn FAOsoft bu makalesinde de resim linkleri hatalı galiba aynı manzara.

[rsimsek]

Resim bağlantıları farklı olduğu halde hep aynı resimler çıkıyor. Sanırım resimlerin olduğu bilgisayarda bir problem var ya da fw gibi bir şey engelleyip bu resmi gösteriyor

[haydarxxx]

Makalenizin örnek projesini yayınlarsanız çok sevirim

[Fatih!]

hocam, örnekleri hiç diskimde saklamaedım.
Hatır için yapar eklerdim, ama şu aralar çok pis yoğunum

[haydarxxx]

Bekleriz hocam sorun değil. Teşekkürler

[haydarxxx]

Sonunda DataGrid bağlantısı yapabildim.teşekkürler.