Makale Özeti

Selamlar bu makalem ile sizlere DataGrid’deki bir Item’e bağlı olarak DataGrid’imize nasıl resim ekleyebileceğimizi anlatacağım bir örnek ile.

Makale

Selamlar bu makalem ile sizlere DataGrid’deki bir Item’e bağlı olarak DataGrid’imize nasıl resim ekleyebileceğimizi anlatacağım bir örnek ile.

 

İlk olarak DataGridimizin içerisini dolducağız bir butona basarak. Ve DataGrid’imizin bir columnda TemplateColumn kullacağız. Bu columnda function’nımızdan dönen bir image gelecek ve DataGrid’deki ilgili yerine yerleşecek. Bu function’ımıza yollayacağımız değer yine DataGrid’imizin içinde bulunan bir Item’den gönderilecek. Fakat Column’u kullanıcılara göstermek istemiyorum. Onların bu columndan haberleri olmasına çok fazla gerek yok.

 

Şimdi ilk olarak database için Tablolarımızı oluşturalım. Database olarak ben access kullanıyorum fakat bu sizin seçiminiz.

 

Aşağıda 2 adet access’te hazırlanmış Tablo görüyorsunuz. Bunlardan bir tanesi cihazlar için ve diğeri ise cihazların garanti durumunu göstermesi için. Tabloların dizaynlarını ve içlerinde neler olduğunu birlikte görebiliyoruz.
 

       

       

 

Database hazırlama işlemini bitirdikten sonra sıra projemizdeki DataGridimizi Doldurmaya geldi. Aşağıda DataGrid’mizi doldurma işlemini yapacak olan Button’umuzun kodlarını görüyoruz.

 

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 cihazlar.cihaz_no, cihazlar.cihaz_adi,garanti.garanti_adi, garanti.garanti_no "+

           "FROM garanti INNER JOIN cihazlar ON garanti.garanti_no =cihazlar.garanti_no";

OleDbDataAdapter dataadaptor5=new OleDbDataAdapter(SQL,con);

dataadaptor5.SelectCommand.CommandText=SQL;

con.Open();

dataSet1.Clear();

dataadaptor5.Fill(dataSet1,"cihazlar");

DataGrid1.DataSource=dataSet1;

DataGrid1.DataBind();

con.Close();

}          

 

Bu kod sayesinde database’imizde bulunan bütün bilgileri DataGrid’imizde göstermiş oluyoruz.

Yukarıdaki kodumuzuda düğmemizin Click olayına yazdıktan sonra sıra geldi button’numuza bastıktan sonra DataGrid’mizin nasıl göründüğüne.

 


 

DataGrid’imizden de anlayacağınız gibi 5 adet Column’mumuz var ki bunlardan kırmızı ile seçilmiş Garanti No başlığına sahip olan column’u kullanıcılara göstermek istemiyorum. Bu sayılar onlara anlamsız gelecektir. Yazımızın başlarında bahsettiğimiz Database’imizi incelediyseniz eğer, Garanti tablosunda garanti_no muz vardı. Bunlardan 1 ile gösterilenler Garantili 2 ile gösterilenler Garantisiz olarak gösteriliyor. Mavi ile seçilmiş Garanti Başlığına sahip olan column’umuz henüz boş. Çünkü, her nekadar bu coloum’u TemplateColumn olarak tanımlamış olsakta içerisinde herhangi bir Item oluşturmadık o yüzden içerisi boş geldi.

 

 

Şimdi kullanıcılardan gizlemek istediğimiz Garanti No başlığına sahip Column’un visible’sini false olarak tanımlayalım ve Garanti No larına göre tain edeceğimiz resimleri yerleştireceğimiz Garanti Başlığına sahip column’a ItemTemplate tagları arasında bir Item tanımlayalım. Aşağıda DataGrid’imizin html kodlarını görüyorsunuz. Şimdi bu kodları inceleyelim.

 

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 192px; POSITION: absolute; TOP: 168px"

                                               runat="server" Width="472px" AutoGenerateColumns="False" BorderColor="#3366CC" BorderStyle="None"

                                               BorderWidth="1px" BackColor="White" CellPadding="4">

                                               <FooterStyle ForeColor="#003399" BackColor="#99CCCC"></FooterStyle>

                                               <SelectedItemStyle Font-Bold="True" ForeColor="#CCFF99" BackColor="#009999"></SelectedItemStyle>

                                               <ItemStyle ForeColor="#003399" BackColor="White"></ItemStyle>

                                               <HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="#CCCCFF" VerticalAlign="Middle"

                                                           BackColor="#003399"></HeaderStyle>

                                               <Columns>

                                                           <asp:BoundColumn DataField="cihaz_no" HeaderText="Cihaz No">

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

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

                                                           </asp:BoundColumn>

                                                           <asp:BoundColumn DataField="cihaz_adi" HeaderText="Cihaz Adı">

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

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

                                                           </asp:BoundColumn>

                                                           <asp:BoundColumn DataField="garanti_adi" HeaderText="Garanti Durumu">

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

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

                                                           </asp:BoundColumn>

                                                           <asp:BoundColumn Visible="False" DataField="garanti_no" HeaderText="Garanti No">

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

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

                                                           </asp:BoundColumn>

                                                           <asp:TemplateColumn HeaderText="Garanti">

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

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

                                                                       <ItemTemplate>

                                                                                  <asp:Image ID="Image" Runat="server" ImageUrl='<%# image_ata(DataBinder.Eval(Container, "DataItem.garanti_no").ToString()) %>' >

                                                                                  </asp:Image>

                                                                       </ItemTemplate>

                                                           </asp:TemplateColumn>

                                               </Columns>

                                               <PagerStyle HorizontalAlign="Left" ForeColor="#003399" BackColor="#99CCCC" Mode="NumericPages"></PagerStyle>

                                   </asp:DataGrid>

 

 

DataGrid’imizin html kodlarına dikkat ederseniz eğer. Sarı renk ile belirlediğim ItemTemplate tagları arasında <asp:Image > oluşturdum ve <asp:Image> ‘ımızın ImageUrl’sine yani image’ımızın yolunu yazdığımız yere image_ata() function’ını çağırdım. Bu functiona DataGrid’imizde bulunan garanti_no Item’ini yolladım. Şimdi aşağıdaki image_ata() function’nının kodlarını inceleyelim.

 

public string image_ata(string garanti_no)

            {

                  if(garanti_no== "1")

                  {

                        return "G.gif";

                  }

                  else if(garanti_no=="2")

                  {

                        return "Y.gif";

                  }

                  else

                        return "";

 

            }

 

Kodlarda gördüğünüz gibi garanti_no isminde bir string variable tanımladım. DataGrid’de tanımladığımız TemplateColumn içinde bu function’ı çağırırken Item olarak da gatanti_no ‘yu göndermişik. Gönderiğimiz garanti_no function’ımızda tanımladığımız garanti_no’ya atanıyor.

Son olarak gelen string değerini karşılaştırıyorum. Karşılaştırma işlemi bittikten sonra geriye daha önceden proje dosyamızın içerisine yerleştirdiğim G.gif ve Y.gif isminde ki image’larımızından uygun olanını göndermiş oluyoruz.

  Bu kısımda kısa bi not düşmek isterim ki ; buradaki karşılaştırma tamamen sabit yani database’imizdeki garanti_no başlığı altındaki “1” ve “2” değerleri değiştiği zaman bu functiondan geriye her zaman boş bir değer dönecektir ve DataGrid’de herhangi bir resim görünmeyecektir. O yüzden bu kontrolü daha da sağlamlaştırmak için bu function içerisinde database ile bağlantı kurup, garanti_no larının neler olduğunu ve bu no’lardan hangisinin Garantili hangisinin Garantisizi temsil ettiğini öğrendikten image ataması yapmak daha doğru olacaktır.

 

Bu kısa bilgiden sonra şimdi projemizi çalıştıralım ve Doldur Button’umuza basarak DataGrid’imizi dolduralım.

 

                                                         

Gördüğünüz gibi DataGrid’imizde durumu Garantili olanların yanında Garantili olduklarını temsil eden resmi ve durumu Garantisiz olanların yanınada Garantisiz olduklarını temsil eden resmi geldi.

 

Bu makalem ile de yine DataGrid'in TemplateColumn özelliğini farklı bir alan üzerinde işlemiş olduk. Umarım hepinize daha güzel görünümlü