Bir önceki makalemizde Treeview kontrolü ile seçim işlemlerine değinmiştik.Bu makalemizde ise Treeview ile oluşturduğumuz navigasyonları, programlı olarak nasıl kullanacağımızı göreceğiz.Treeview kendi içinde ilişkilendirmiş bir sınıfa sahiptir.Bu da Treeview ‘in nasıl çalışacağını, kodunu nasıl yönetebileceğimizi belirler.İlk olarak treeview kontrolü için kullanacağımız xml dosyamızı oluşturalım.

Donanim.xml
 

<?xml version="1.0" encoding="utf-8" ?>
<Donanım>

  <Item Category="Anakart">

    <Option Chocie="intel"/>

    <Option Chocie="Asus"/>

    <Option Chocie="Ati"/>

  </Item>

  <Item Category="Hafıza">

    <Option Chocie="1 gb"/>

    <Option Chocie="2 gb"/>

    <Option Chocie="3 gb"/>

  </Item>

  <Item Category="Hard Disk">

    <Option Chocie="120 gb"/>

    <Option Chocie="200 gb"/>

    <Option Chocie="300 gb"/>

  </Item> 
</Donanım> 

 

Navigasyonu Programlı Olarak Genişletip,Küçültme İşlemi 

İlk olarak Treeview kontrolü ile düğümlerimizi nasıl genişletip , küçültülmesini görelim.Treeview sınıfı bu işlemler için ExpandAll() ve CollapseAll() metodlarını kullanır.

Bizde bir örnekle bu metodların kullanımını görelim.

 protected void Button1_Click(object sender, EventArgs e)
  {        
TreeView1.ExpandAll(); 

}

 protected void Button2_Click(object sender, EventArgs e) 
   {        
TreeView1.CollapseAll(); 
   }  

Yukarıdaki örnekte 1.Buton da bütün düğümler gösterilir.2.Butonda ise bütün düğümler gizlenir.



Şimdi ise istediğimiz bir düğüme nasıl ulaşırız onu görelim.

protected void Button4_Click(object sender, EventArgs e) 
  {      
   TreeView1.CollapseAll();  
   TreeView1.FindNode("Bilgisayar Donanımı").Expanded = true; 
   TreeView1.FindNode("Bilgisayar Donanımı/Anakart").Expanded = true;
    }

Yukarıdaki örnekte ise sadece Bilgisayar Donanımı/ Anakart düğümü gösterilir. 



 Navigasyona Programlı Olarak Yeni Düğümler Ekleme
 
Yukarıdaki uygulamalarımızdan sonra şimdi gayet kullanışlı bir uygulama yapalım.Navigasyonumuza programlı olarak düğümler eklemek için Treeview kontrolünün TreeNode özelliğini kullanırız.Bu sayede istediğimiz alanın altına, düğümler ekleyebiliriz. Bunun için sayfamıza eklenecek düğüm ismi ve url için 2 adet textbox alırız.

 protected void Button3_Click(object sender, EventArgs e)  
  {   
TreeNode mynode = new TreeNode();         
mynode.Text = TextBox1.Text;              
mynode.NavigateUrl = TextBox2.Text;           
TreeView1.FindNode("Bilgisayar Donanımı/Anakart").ChildNodes.Add(mynode);        

    }

Yukarıdaki örnekte bir TreeNode nesnesi tanımlayarak, textbox daki değerlerimizi tutmuş olduk.Daha sonra istediğimiz hiyerarşiye düğüm ekleyerek işlemimizi gerçekleştirdik.

 

Bu makelemizinde sonuna geldik.Görüldüğü üzere Treeview ile işlem yapmak oldukça kullanışlı ve basit.Bir sonraki makalemizde görüşmek dileğiyle...

Saygılarımla
Yusuf KARAKAŞ

Etiketler: treeview, treeview programlı çalışma

 Treeview kontrolü esas olarak navigasyon işlemlerimizde bizlere büyük kolaylıklar sağlar.Çoğu zaman hiyerarşik bir yapıda kullanabiliriz…

Ancak treeview kontrolünün  önemli özelliklerinden biride, listedeki hiyerarşik  öğelerin yanına checkbox koyarak,

kullanıcıların birden fazla nseçim yapabilmelerine olanak sağlamasıdır.Bu bağlamda  e ticaret portallarında , bu tür uygulamalar gayet kullanışlıdır.

TreeView kontrolü  kendi bünyesinde ShowCheckBoxes adında bir özellik içerir. Bu özellik sayesinde TreeView düğümlerine, isteğimiz doğrultusunda onay kutusu uygularız.

Şimdi bu değerleri ayrıntılı bir şekilde görelim. 

 

ShowCheckBoxes Değerleri

All:                  Treeviev kontrolündeki her düğüme onay kutuları uygular.

 

Leaf:               Ek Çocuk elemanlara sahip olmayan düğümlere onay kutusu ekler.

 

None:              hiçbir düğüme onay kutusu atanmaz.

 

Parent:            ebeveyn düğümlere onay kutusu atanır.

 

Root:               Kök düğümlere onay kutusu atanır.

 

Aşağıdaki örnek uygulamada showCheckBoxes  leaf değerini kullandım.Sizlerde ihtiyacınıza göre istediğiniz değeri kullanabilirsiniz.

 Donanim.xml 

<?xml version="1.0" encoding="utf-8" ?>

<Donanım>

  <Item Category="Anakart">

    <Option Chocie="intel"/>

    <Option Chocie="Asus"/>

    <Option Chocie="Ati"/>

  </Item>

  <Item Category="Hafıza">

    <Option Chocie="1 gb"/>

    <Option Chocie="2 gb"/>

    <Option Chocie="3 gb"/>

  </Item>

  <Item Category="Hard Disk">

    <Option Chocie="120 gb"/>

    <Option Chocie="200 gb"/>

    <Option Chocie="300 gb"/>

  </Item> 
</Donanım> 

Default.aspx 

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TreeView ID="TreeView1" runat="server" Font-Underline="false" DataSourceID="Xmldatasource1" ShowCheckBoxes="leaf">

           <DataBindings>

        <asp:TreeNodeBinding DataMember="Donanım" Text="Bilgisayar Donanımı" />

        <asp:TreeNodeBinding  DataMember="Item" TextField="Category"/>

        <asp:TreeNodeBinding DataMember="Option" TextField="Chocie" />    

            </DataBindings>

        <SelectedNodeStyle Font-Underline="true" />   

                </asp:TreeView>
       
<asp:XmlDataSource ID="XmlDataSource1" DataFile="donanim.xml" runat="server"></asp:XmlDataSource>
   
</div>

    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Seç" />

    </form>

</body>

 Ve son olarak da Default.aspx.cs ile kodlarımızı görelim… 

protected void Button1_Click(object sender, EventArgs e)

    {

        if (TreeView1.CheckedNodes.Count > 0)

        {            

 Response.Write("Seçmiş olduğun pc" + "<br>");     

        foreach (TreeNode node in TreeView1.CheckedNodes)

            {

  Response.Write ( node.Text + " " + node.Parent.Text + "<br>");  

           } 

        }

         else
        {        

    Response.Write("Lütfen bi seçim yapınız");       

}   

 } 

 Açıklamalar: 

//Postbackte seçilen düğümlerin sayısının sıfırdan büyük olduğunu gösterir.Buda en azından  bir seçim yapıldığının göstergesidir.

   if (TreeView1.CheckedNodes.Count > 0)

 //Bir TreeNode nesnesi oluşturur ve seçilen düğümlerdeki treeviev nesnelerini kontrol eder.

foreach (TreeNode node in TreeView1.CheckedNodes)
            {              }  

// Seçilen her düğüm için , düğümlerin text değerini ve bu düğümlerin ebeveyn text değerlerini, alarak response.write içeriğini doldurur.  

Response.Write ( node.Text + " " + node.Parent.Text + "<br>"); 

 

Örnek Uygulama Görüntüsü aşağıdaki gibidir...

 

 

 İyi Çalışmalar...

Yusuf KARAKAŞ
Saygılarımla...

Etiketler: treeview, navigasyon, treeview ile seçim