Makale Özeti

Herkeze selamlar bu makalem ile sizlere Datagridin rowlarının rengini, gene datagiridimizin rowlarında bulunan bir Item'e bağlı olarak nasıl değiştirebileceğimizi anlatacağım.

Makale

Herkeze selamlar bu makalem ile sizlere Datagridin rowlarının rengini, gene datagiridimizin rowlarında bulunan bir bilgiye dayanarak nasıl değiştirebileceğimizi anlatacağım.

 

  

 

 

 

İlk olarak database’mizi hazırlayalım. Aşağıdaki gibi sade iki adet tablo oluşturdum. Bunlardan birtanesi cihaz_durumu ve diğeride renkler tablosu.

 

                                             

                                              Cihaz Durumu  Tablosu                                               Renkler Tablosu

 

                                                                     
                                                                                           RelationShip

 

Bu database’e bağlı olarak DataGrid’imizde cihaz.durum_no, cihaz.durum_adi ve renk_adi variable lerini göstermek istiyorum. Ve renk_adi na bağlı olarak DataGrid’de bulunduğu row’un rengini değiştireceğiz.

 

 

 

Şimdi aşağıda DataGrid’in html kodlarını sizelere anlatacağım.

 

 

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 160px; POSITION: absolute; TOP: 152px" runat="server" Width="352px" AutoGenerateColumns="False">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

<Columns>

<asp:BoundColumn DataField="durum_no" HeaderText="Durumu No">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>

</asp:BoundColumn>

<asp:BoundColumn DataField="durum_adi" HeaderText="Durum Adı">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>

</asp:BoundColumn>

<asp:TemplateColumn HeaderText="Renk Adı">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>

<ItemTemplate>

<asp:Label ID="Label1" Runat=server Text='<%# DataBinder.Eval(Container, "DataItem.renk_adi") %>'>

</asp:Label>

</ItemTemplate>

</asp:TemplateColumn>

 

</Columns>

 

</asp:DataGrid>

 

Yukarıdaki DataGrid’in kodunu incelerken dikkatinizi çekmek için TemplateColumn kısmını sarı renkte değiştirdim. Bu column da ItemTemplate olarak bir asp:Label tanımladım ve ID olarakda Label1 verdim. Ben bu formda başka bir label kullanmadığım için bu ismi verdim ama siz kendi webFormunuza göre bu ID yi değiştirebilirsiniz. Dikkat edin vereceğiniz ID numarası webFormunuzda kullandığınız başka bir Labelin ID si olmasın.

 

<asp:Label ID="Label1" Runat=server Text='<%# DataBinder.Eval(Container, "DataItem.renk_adi") %>'>

 

Label i tanımlayıp Id numarasını da verdikten sonra Labelimizde ne yazacağını belirleyeceğimiz yer olan Text yerine geldi. Burda sizinde gördüğünüz gibi TemplateColumnlarda bir numaraları yardımcımız olan DataBinder ve DataItem isimlerini görüyorsunuz. "DataItem.renk_adi"  çağrılabilmesi için DataGrid’imize bind() ederken kullandığımız datasetin içerisinde renk_adi isimli variable tanımlanması gerekir. Diğer bir deyişle SQL cümlesini yazarken mutlaka databaseden renk_adi isminide SELECT komutumuzun içerisinde çağırmamız gereklidir ki . "DataItem.renk_adi"   komutu çalışırken bize “renk_adi bulunamadı”  hatası vermesin.

Aşağıda Doldur Düğmesinin kodlarını yazıyorum

private void Button1_Click(object sender, System.EventArgs e)

{

OleDbConnection con=new OleDbConnection();

string con_string="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\yazgelistir.mdb "

con.ConnectionString=con_string ;

                 

string SQL="SELECT cihaz_durumu.durum_no, cihaz_durumu.durum_adi, "+
           "renkler.renk_adi "
+

"FROM renkler INNER JOIN cihaz_durumu ON renkler.renk_no = cihaz_durumu.renk_no";

                  OleDbDataAdapter dataadaptor5=new OleDbDataAdapter(SQL,con);

                  dataadaptor5.SelectCommand.CommandText=SQL;

                  con.Open();

                  dataSet1.Clear();

                  dataadaptor5.Fill(dataSet1,"renkler");

                  DataGrid1.DataSource=dataSet1;

                  DataGrid1.DataBind();

                  con.Close();

            }                             

 

 

 

                             

Üstteki resimde gördüğünüz gibi Doldur düğmesine basarak DataGrid’min içerisini istediğim Başlıklar altında doldurdum. Dikkat ederseniz ki TemplateColumn adı altında tanımladığım asp:Label ‘in Text komutuna tanımladığım function

<asp:Label ID="Label1" Runat=server Text='<%# DataBinder.Eval(Container, "DataItem.renk_adi") %>'>

 renk_adi isimli variableyi buldu ve Label’in text özelliğinin içinede databaseden okuduğu bilgileri yazdır . Şu anda elimde 4 Rowu olan bir DataGrid var. Bu 4 rowdan Renk Adı başlığına sahip olan Bütün Rowlarda Label vardır.

 

Şimdi ise Renk isimlerini tutan Labellere bağlı olarak bulundukları Row’un rengini değiştirecek olan kodu yazalım. Bu olayı yazmak için DataGrid Properties penceresindeki Olaylar() sekmesinden ItemDataBound’u bulup çift tıklayalım.

 

                                                    

                                                          

 

 

Bu sayede datagiridmizin her rowunu oluştururlen bütün kontrolü elimizde tutabiliriz. Aşağıda gerekli olan kodları yazdım ve sizelere nasıl çalıştığını anlatacağım.

 

 

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)

            {

// e.Item.FindControl("Label1") diyerek templateColoumda daha önceden

//belirlediğimiz Label'in ID sini buluyoruz. Ve bunu "isim" adında tanıladığımız

//bir labelin içine atıyoruz.

Label isim = (Label)e.Item.FindControl("Label1");

                            

//Burada dikkat edecek olursanız isim adındaki labelimizin boş olup olmadığını değil bu labelin Label

//objecti olup olmadığını kontrol ediyoruz. Buna ne gerek var zaten hepsi Label değilmiydi

//diyebilirsiniz. Fakat unutmayın ki datagriddeki sadece Rowlara Label tanımaladım Yani

//Datagridin başlığı olan Renk Adı başlığı Label değil. İşte Label olmayan Başlığın kontrolü

//için bunu yapmanız gereklidir.

if(isim!=null)

{

//artık içerideyiz yani datagrid bize bir labelden renk_adı yolladı biz bu

//bilgiyi kontrol ediyoruz gönderdiği renk adına göre o Labelin bulunduğu Rowun

//rengini değiştirip yeni rengi ile oluşturmuş oluyorum

    if(isim.Text=="KIRMIZI")

      {

      //buradaki e ile bize gelen datagirid rowu.

        e.Item.BackColor = Color.Red;

      }

      else if (isim.Text=="MAVİ")

      {

        e.Item.BackColor= Color.DodgerBlue;

      }

      else if(isim.Text=="YEŞİL")

      {

        e.Item.BackColor= Color.LimeGreen;

      }

      else if(isim.Text=="SARI")

      {

        e.Item.BackColor= Color.Yellow;

      }

      else

      {

       //son olarak eger bu karşılaştırmalardan bitanesi uymuyorsa bize    

      //gönderilen renk isimlerinden bunu empty olarak göndermeliyiz yoksa hata  

      //mesajı alırız.çünkü datagirid artık bizim isteğimiz doğrultusunda  

      //oluşturuluyor yani ona ne yapacağını söylemezsek otomatik olarak  

      //yapmaz.Bunu engellemek için bütün koşullara bi tanım yapmalıyız

            e.Item.BackColor= Color.Empty;

      }

   }

}

 

 

 

 

Doldur düğmesine bastığımızda Gördüğünüz gibi her row kendi ayrı rendini aldı. TemplateColumn daki rengine bağlı olarak.

 

                               

 

Resimde gördüğünüz gibi datagirimizin headerları renksiz kaldı çünkü header için herhangi bir şey yapmasını istemedik.

Fakat bunuda değiştirmek için DataGridin propertieslerinden Format sekmesinden bunuda ayarlayabilirsiniz.

 

 

                      

 

 

 

 

Bu işlemden sonra Header Ayarlarını OK leyip çıkın ve projenizi tekrardan çalıştırın ve Doldur Düğmesine basın. Aşağıdaki gibi rengarenk bir datagiridiniz olsun...Bu DataGrid’in style özelliklerinden ve renk atamalarını yapacağınız kodlama kısmından göze daha çok hitap eden stylelar oluşturabilirsiniz.

 

                        

 

İşte hepsi bu kadar... Datagridinde verilerini gösterdikten sonra birde bunları renk ile kategorize etmek isteyenler için ideal bir yol.

 

Bir sonraki makalemde sizlere Datagiridin içerisine nasıl resim yerleştirilir ve bir duruma bağlı olarak datagiriddeki o resmi nasıl tayin edeceğimizi anlatacağım.

Yapmış Olduğumuz Örneğin Kodları