GridView Kontrolü – III – TemplateField Kullanimi ve Grid içinde Grid Kullanmak.

Bu makalemizde GridView kontrolü içinde template field alanlarin kullanimina deginecegiz.  Template field içerisinde istedigimiz HTML taglarini ve ASP.NET kontrollerini kullanabiliriz. Bu özellik isteklerimiz dogrultusunda grid satirlari olusturabilmemizi saglar.

.

Projeyi buradan indirebilirsiniz.

<asp:GridView ID="GridViewMusteri" runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Yukarida da görüldügü gibi gridin satirlarini olusturacak kismi template field içerisindeki ItemTemplate içerisine koyuyoruz. Yapacagimiz örnek de Microsoft tarafindan ücretsiz olarak yayinlanan AdvantureWorkDW2008 veritabanini kullanacagiz. Isterseniz sizde bu eklentiyi indirip kendi veritabaniniza ekleyebilirsiniz. SQL Server 2008 için olanini buradan indirebilirsiniz.

Bu örnek de Müsteri bilgilerini grid üzerinde gösterecegiz. Müsteri seçildigin de ise seçilen satirin hemen altinda müsterinin yapmis oldugu interne, FactInternetSales ve DimProduct alisverislerinden 10 tanesini gösterecegiz. Bunun için DimCustomert tablolarini kullanacagiz.  Ilk olarak Kod içerisinde Customer tablosundan bilgileri alip gride bind eden fonksiyonu yazalim. Sonrada gridimize template fieldleri ekleyelim.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        MusterileriGetir();
    }
}
SqlConnection connection = new SqlConnection("Data Source=.;
Initial Catalog=AdventureWorksDW2008;Integrated Security=True");
private void MusterileriGetir()
{   
    connection.Open();
    SqlDataAdapter da = new SqlDataAdapter("SELECT TOP 500 CustomerKey,  
    FirstName,LastName, Gender, EmailAddress, AddressLine1 FROM DimCustomer",
    connection);
    DataTable dTable = new DataTable();
    da.SelectCommand.ExecuteNonQuery();
    da.Fill(dTable);
    GridViewMusteri.DataSource = dTable;
    GridViewMusteri.DataBind();
    connection.Close();
}

 Yukaridaki kodu ekledikten sonra gridi asagidaki gibi düzenleyin.

<asp:GridView ID="GridViewMusteri" AutoGenerateColumns="false" runat="server"
 OnRowCommand="GridViewMusteri_RowCommand">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <table width="100%">
                    <tr>
                        <th>
                            Isim
                        </th>
                        <th>
                           Soyad
                        </th>
                        <th>
                            Cinsiyet
                        </th>
                        <th>
                            E-Posta
                        </th>
                        <th>
                            Adres
                        </th>
                        <th>
                            Göster
                        </th>
                        <th>
                            Gizle
                        </th>                  
                  </tr>
            </HeaderTemplate>
            <ItemTemplate>
         <tr style="font-size: 12px; font-weight: normal;" align="left">
                 <td>
      <asp:Label ID="Label1" runat="server" Text='<%#Bind("FirstName") %>'>
                   </asp:Label>
                </td>
                <td>
     <asp:Label ID="Label2" runat="server" Text='<%#Bind("LastName") %>'>
                  </asp:Label>
                </td>
                <td>
     <asp:Label ID="Label3" runat="server" Text='<%#Bind("Gender") %>'>
                  </asp:Label>
                </td>
                <td>
     <asp:Label ID="Label4" runat="server" Text='<%#Bind("EmailAddress") %>'>
                </asp:Label>
                </td>
                <td>
     <asp:Label ID="Label5" runat="server" Text='<%#Bind("AddressLine1") %>'>
                </asp:Label>
                </td>
                <td>
                 <asp:LinkButton ID="LinkButton1" CommandName="Göster" 
                 CommandArgument='<%#Bind("CustomerKey") %>'runat="server">
                 Göster</asp:LinkButton>
               </td>
               <td>
     <asp:LinkButton ID="LinkButton2" CommandName="Gizle" CommandArgument=
       '<%#Bind("CustomerKey") %>' runat="server">Gizle</asp:LinkButton>
                </td>
                <td>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

 Burada dikkat etmemiz gereken yerlerden birincisi Grid içerisinde

AutoGenerateColumns="false"

tagini eklemeniz aksi takdirde grid bind ettiginiz kaynakta bulunan kolonlari kendisi otomatik olarak üretir. Biz bu örnek de template filedlerle çalismak istedigimizden bunu false olarak ayarliyoruz. Ikinci önemli nokta template field içine ekledigimiz link buton için commandname ve commandargument taglarini ayarlamaniz. Ayrica grid üzerindeki satirlarda bir event oldugu zaman yani ekledigimiz link buton tiklandigi zaman çalisacak olan fonksiyonu ayarladik

OnRowCommand = "GridViewMusteri_RowCommand"

Bu fonksiyonun içini nasil dolduracagimizi ilerleyen kisimlarda anlatacagim. Projeniz çalistirdiginiz zaman Müsteri tablosundaki ilk 500 kayit grid içerisinde görüntülenecektir.

.

Simdi sira geldi seç butonuna tiklandigi zaman müsterinin yapmis oldugu alisverislerden 10 tanesini göstermeye. Bunun için ilk olarak template field içinde bulunan tablomuza yeni bir satir ekleyecegiz bunun içine de yeni bir grid koyacagiz. Müsteri gridi üzerinde göster butonuna basildigi zaman seçilen müsterinin CustomerKey özelligi ile veri tabanindan sorgu yaparak bu müsterinin yapmis oldugu son 10 alisverisi yeni giridimize bind edecegiz ayrica Gizle butonuna basildiginda Müsterinin Siparis detayini gizleyecegiz. Gridimizin yeni halinin bulundugu aspx sayfasi ve yazmamiz gereken C# kodlari asagidaki gibidir.

<asp:GridView ID="GridViewMusteri" AutoGenerateColumns="false" runat="server"
OnRowCommand="GridViewMusteri_RowCommand">
<Columns>
<asp:TemplateField>
    <HeaderTemplate>
        <table width="800px">
            <tr>
                <th>
                   Isim
                </th>
                <th>
                    Soyad
                </th>
                <th>
                   Cinsiyet
                </th>
                <th>
                    E-Posta
                </th>
                <th>
                    Adres
                </th>
                <th>
                   Göster
                </th>
                <th>
                    Gizle
               </th>
          </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr style="font-size: 13px; font-weight: normal;" align="left">
            <td>
       <asp:Label ID="Label1" runat="server" Text='<%#Bind("FirstName") %>'>
                     </asp:Label>
            </td>
            <td>
       <asp:Label ID="Label2" runat="server" Text='<%#Bind("LastName") %>'>
                     </asp:Label>
            </td>
            <td>
     <asp:Label ID="Label3" runat="server" Text='<%#Bind("Gender") %>'>
                     </asp:Label>
            </td>
            <td>
    <asp:Label ID="Label4" runat="server" Text='<%#Bind("EmailAddress") %>'>
                     </asp:Label>
            </td>
            <td>
     <asp:Label ID="Label5" runat="server" Text='<%#Bind("AddressLine1") %>'>
                     </asp:Label>
            </td>
            <td>
                <asp:LinkButton ID="LinkButton1" CommandName="Göster"
                     CommandArgument='<%#Bind("CustomerKey") %>'
                    runat="server">Göster</asp:LinkButton>
            </td>
            <td>
                <asp:LinkButton ID="LinkButton2" CommandName="Gizle" 
                   CommandArgument='<%#Bind("CustomerKey") %>'
                    runat="server">Gizle</asp:LinkButton>
            </td>
        </tr>
        <tr style="font-size: 12px; font-weight: normal;" align="left">
            <td colspan="7">
                <asp:GridView ID="GridViewSiparisListesi" Width="100%"
                                         AutoGenerateColumns="false"
                    runat="server">
                    <Columns>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <table width="100%" style="font-size: 12px; 
                                        font-weight: normal;" align="left">
                                    <tr>
                                        <th>
                                            Siparis No
                                        </th>
                                        <th>
                                           Tutar
                                        </th>
                                        <th>
                                           Ürün Adi
                                       </th>
                                   </tr>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                           <asp:Label ID="Label7" runat="server" 
                           Text='<%#Bind("SiparisNo") %>'></asp:Label>
                                    </td>
                                    <td>
                            <asp:Label ID="Label8" runat="server"
                              Text='<%#Bind("Tutar") %>'></asp:Label>
                                    </td>
                                    <td>
                              <asp:Label ID="Label9" runat="server"
                             Text='<%#Bind("UrunAdi") %>'></asp:Label>
                                    </td>
                                </tr>
                            </ItemTemplate>
                            <FooterTemplate>
                                </table>
                            </FooterTemplate>
                        </asp:TemplateField>
                   </Columns>
                </asp:GridView>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Aspx sayfanizi yukarda ki gibi düzenledikten sonra kod sayfaniza da asagidaki kodlari ekleyin.

protected void GridViewMusteri_RowCommand
(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Göster")
 {
     string sqlCmnd = String.Format(@"SELECT   TOP 10  
     FactInternetSales.CustomerKey
     as MusteriKey, FactInternetSales.SalesOrderNumber as SiparisNo, 
     FactInternetSales.SalesAmount as Tutar, 
     DimProduct.EnglishProductName as UrunAdi 
     FROM  FactInternetSales LEFT OUTER JOIN DimProduct ON 
     FactInternetSales.ProductKey = DimProduct.ProductKey 
     Where 
     FactInternetSales.CustomerKey = {0}", e.CommandArgument.ToString());
        connection.Open();
        SqlDataAdapter da = new SqlDataAdapter(sqlCmnd, connection);
        DataTable dTable = new DataTable();
        da.SelectCommand.ExecuteNonQuery();
        da.Fill(dTable);
        int rowIndex = 
   ((GridViewRow)(((LinkButton)(e.CommandSource)).Parent.Parent)).RowIndex;
        GridView siparisListesiGrid =(GridView)GridViewMusteri.
Rows[rowIndex].FindControl("GridViewSiparisListesi");
        siparisListesiGrid.DataSource = dTable;
        siparisListesiGrid.DataBind();
        connection.Close();
 }
else if (e.CommandName == "Gizle")
 {
  int rowIndex = 
((GridViewRow)(((LinkButton)(e.CommandSource)).Parent.Parent)).RowIndex;
  GridView siparisListesiGrid =(GridView)GridViewMusteri
.Rows[rowIndex].FindControl("GridViewSiparisListesi");
  siparisListesiGrid.DataSource = null;
  siparisListesiGrid.DataBind();
 }
}

.

Yukarda ki kodu incelediginizde

((GridViewRow)(((LinkButton)(e.CommandSource)).Parent.Parent)).RowIndex;
  GridView siparisListesiGrid = (GridView)GridViewMusteri
.Rows[rowIndex].FindControl("GridViewSiparisListesi"); 

Satiri dikkatinizi çekmis olmali. Grid içerisine ekledigimiz kontrollere kod içersinden direk erisemeyiz bu yüzden FindControl fonksiyonunu kullanmamiz gerekir. Bu fonksiyonu kullanmak içinde Göster butonuna basilan satiri bilmemiz lazim. e.CommandSource satirdaki göster linkbuttona isaret etmektedir. Onun parentti da bulundugu cell e isaret eder. Cell in paranti ise bulundugu satirdir. Bu satir GridViewRow tipinde bir kontroldür. Bu yolla butona tiklanan satir indexini bularak Gridin o satirdaki kontrolleri üzerinden

GridViewMusteri.Rows[rowIndex].FindControl

metodu ile arama yapabiliriz.

Yeni Makalelerde bulusmak üzere hoscakalin.

13 thoughts on “GridView Kontrolü – III – TemplateField Kullanimi ve Grid içinde Grid Kullanmak.

  1.  arkadaslar çok acil bir ödevi yetistirmem lazim lütfen yardimci olun ben bir site yapmaya çalisiyrum ödevim tur sitesi yapmak turlar butonuna tiklayinca bilgi gözükecek ama hepsi degil detayli bilgi diye birsey olacak ve ona tiklayinca turlarla ilgili detayli bilgi gözükecek bunu popup olayiyla nasil yapabilirim gerçekten çok acilll…..simdiden tesekkürler…

  2. her kolon için bir header bir footer ve bir item template tanimlamaya neden gerek olsunki.

  3. Bu sekilde kullanmak yerine her column için bir header ve bir item template olusturulmasi header template ve item template mantigina daha uygun sanirim…

     

  4. bir forma 2 tane ayri database i sürükleyip atiigimda içlerinde degisiklik yapamiyorum.. herzman üsttekini aliyor sil butonuna basinca ilk tablodan nesne siliniyor fakat diger database,ten bir nesne secip sil butonuna basinca çalismiyor. ilk tablodan veri siliniyor . nasil yapabilirim..kisaca yardimci olurmusunuz?

  5. Merhaba, yapmak istediginiz sey özünde basit.
    En basit olarak kullanmak istediginiz tablolardan bir view olusturun ve kod içinde bu viewi bir tablo gibi kullanin.
    kodlarinizda veritabani baglantisi yapmak için nasil bir yöntem kullaniyorsunuz bilmorum. Eger SqlDataAdapter kullaniyorsaniz. select cümlesini
    select tb1.alan1,tb2.alan1 from tb1,tb2 where tb1.id = tb2.id
    seklinde yazin. kisacasi join islemi yapin. join islemi için yazilmis makalelerimizi okuyabilirsini.

  6. Elinize ve emeginize saglik.. Benim söyle bir sorum olacak. Gridview kullanarak listeleme yapacagim fakat bir kaç tablodan alanlar seçip bir kayit olarak göstermek istiyorum. Bu nasil mümkün olabilir. Kendi yazdigim sorguyu da bir türlü gridview’e kaynak olarak veremedim. Ne yapabilirim ?

  7. Anlatiminiz çok güzel olmus.Emeginiz için tesekkür ederim.Çalismalarinizin devamini bekliyoruz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir